@j3m-quantum/ui 1.5.0 → 1.7.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React15 from 'react';
+import * as React22 from 'react';
 import { useMemo } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { SearchIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, FolderIcon, ShareIcon, TrashIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, User, Calendar as Calendar$1, Clock, CalendarX2, ChevronLeft, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Plus, Info, Moon } from 'lucide-react';
+import { SearchIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Check, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, ChevronsLeft, ChevronLeft, ChevronsRight, Settings2, FolderIcon, ShareIcon, TrashIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, X, Flag, Factory, Truck, MessageSquare, ChevronDown, Plus, Send, MessageSquarePlus, AlertTriangle, CheckCircle, Calendar as Calendar$1, User, Clock, CalendarX2, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Info, Moon, ArrowUpDown, CheckCircle2, XCircle, Package } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -39,14 +39,16 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ResizablePrimitive from 'react-resizable-panels';
+import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+export { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { subMonths, subYears, subWeeks, subDays, addMonths, addYears, addWeeks, addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear, isSameMonth, isSameWeek, isSameDay, isSameYear, isWithinInterval, parseISO, differenceInMinutes, eachDayOfInterval, differenceInDays, startOfDay, setMinutes, setHours, eachHourOfInterval, endOfDay, getHours, getMinutes, addMinutes, isToday, areIntervalsOverlapping } from 'date-fns';
 export { areIntervalsOverlapping, format, getDay, isSameDay, isSameMonth, isToday, parseISO } from 'date-fns';
 
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React15.useState(void 0);
-  React15.useEffect(() => {
+  const [isMobile, setIsMobile] = React22.useState(void 0);
+  React22.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -87,7 +89,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React15.forwardRef(
+var Button = React22.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -451,7 +453,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React15.useMemo(
+  const _values = React22.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -737,7 +739,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React15.createContext({
+var ToggleGroupContext = React22.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -774,7 +776,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React15.useContext(ToggleGroupContext);
+  const context = React22.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -804,7 +806,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React15.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React22.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1224,7 +1226,7 @@ function Label2({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React15.createContext(
+var FormFieldContext = React22.createContext(
   {}
 );
 var FormField = ({
@@ -1233,8 +1235,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React15.useContext(FormFieldContext);
-  const itemContext = React15.useContext(FormItemContext);
+  const fieldContext = React22.useContext(FormFieldContext);
+  const itemContext = React22.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1251,11 +1253,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React15.createContext(
+var FormItemContext = React22.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React15.useId();
+  const id = React22.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -2357,8 +2359,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React15.useRef(null);
-  React15.useEffect(() => {
+  const ref = React22.useRef(null);
+  React22.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -2379,9 +2381,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React15.createContext(null);
+var CarouselContext = React22.createContext(null);
 function useCarousel() {
-  const context = React15.useContext(CarouselContext);
+  const context = React22.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2403,20 +2405,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React15.useState(false);
-  const [canScrollNext, setCanScrollNext] = React15.useState(false);
-  const onSelect = React15.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React22.useState(false);
+  const [canScrollNext, setCanScrollNext] = React22.useState(false);
+  const onSelect = React22.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React15.useCallback(() => {
+  const scrollPrev = React22.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React15.useCallback(() => {
+  const scrollNext = React22.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React15.useCallback(
+  const handleKeyDown = React22.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2428,11 +2430,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React15.useEffect(() => {
+  React22.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React15.useEffect(() => {
+  React22.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2565,9 +2567,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React15.createContext(null);
+var ChartContext = React22.createContext(null);
 function useChart() {
-  const context = React15.useContext(ChartContext);
+  const context = React22.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2580,7 +2582,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React15.useId();
+  const uniqueId = React22.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2641,7 +2643,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React15.useMemo(() => {
+  const tooltipLabel = React22.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3297,6 +3299,105 @@ function Progress({
     }
   );
 }
+function CircularProgress({
+  className,
+  value,
+  size = 80,
+  strokeWidth = 8,
+  variant = "default",
+  showCheckmark = true,
+  children,
+  ...props
+}) {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const isComplete = clampedValue >= 100;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - clampedValue / 100 * circumference;
+  const center = size / 2;
+  const getVariantColors = () => {
+    switch (variant) {
+      case "success":
+        return {
+          track: "stroke-green-500/20",
+          progress: "stroke-green-500",
+          text: "text-green-600 dark:text-green-400"
+        };
+      case "warning":
+        return {
+          track: "stroke-amber-500/20",
+          progress: "stroke-amber-500",
+          text: "text-amber-600 dark:text-amber-400"
+        };
+      case "destructive":
+        return {
+          track: "stroke-red-500/20",
+          progress: "stroke-red-500",
+          text: "text-red-600 dark:text-red-400"
+        };
+      default:
+        return {
+          track: "stroke-primary/20",
+          progress: "stroke-primary",
+          text: "text-primary"
+        };
+    }
+  };
+  const colors = getVariantColors();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "circular-progress",
+      "data-value": clampedValue,
+      "data-complete": isComplete,
+      className: cn("relative inline-flex items-center justify-center", className),
+      style: { width: size, height: size },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "transform -rotate-90",
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: cn("transition-all", colors.track),
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: cn("transition-all duration-300 ease-out", colors.progress),
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: children ? children : isComplete && showCheckmark ? /* @__PURE__ */ jsx(Check, { className: cn("h-6 w-6", colors.text) }) : /* @__PURE__ */ jsxs("span", { className: cn("text-sm font-semibold tabular-nums", colors.text), children: [
+          Math.round(clampedValue),
+          "%"
+        ] }) })
+      ]
+    }
+  );
+}
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -3344,8 +3445,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React15.useState("light");
-  React15.useEffect(() => {
+  const [theme, setTheme] = React22.useState("light");
+  React22.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -3397,6 +3498,81 @@ function Spinner({ className, ...props }) {
     }
   );
 }
+var deliveryIndicatorVariants = cva(
+  "inline-block rounded-full shrink-0",
+  {
+    variants: {
+      status: {
+        "on-time": "bg-[var(--j3m-green-9,#84EBB4)]",
+        "delayed": "bg-[var(--j3m-yellow-9,#FFDB43)]",
+        "critical": "bg-[var(--j3m-red-9,#FB3748)]",
+        "pending": "bg-[var(--j3m-gray-6,#D2D2D2)]"
+      },
+      size: {
+        sm: "h-1.5 w-3",
+        default: "h-1.5 w-3",
+        lg: "h-2 w-4"
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      size: "default"
+    }
+  }
+);
+function DeliveryIndicator({
+  className,
+  status,
+  size,
+  label,
+  showTooltip = false,
+  ...props
+}) {
+  const indicator = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "delivery-indicator",
+      "data-status": status,
+      className: cn(deliveryIndicatorVariants({ status, size }), className),
+      "aria-label": label || `Delivery status: ${status}`,
+      role: "img",
+      ...props
+    }
+  );
+  if (showTooltip && label) {
+    return /* @__PURE__ */ jsxs(Tooltip2, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: indicator }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label })
+    ] });
+  }
+  return indicator;
+}
+function DeliveryIndicators({
+  className,
+  deliveries,
+  size = "default",
+  showTooltips = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "delivery-indicators",
+      className: cn("flex items-center gap-1", className),
+      ...props,
+      children: deliveries.map((delivery, index) => /* @__PURE__ */ jsx(
+        DeliveryIndicator,
+        {
+          status: delivery.status,
+          size,
+          label: delivery.label,
+          showTooltip: showTooltips
+        },
+        index
+      ))
+    }
+  );
+}
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }
@@ -3919,7 +4095,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React15.forwardRef(
+var SearchTrigger = React22.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -3955,7 +4131,7 @@ var SearchTrigger = React15.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React15.useEffect(() => {
+  React22.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -4930,9 +5106,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React15.createContext(null);
+var SidebarContext = React22.createContext(null);
 function useSidebar() {
-  const context = React15.useContext(SidebarContext);
+  const context = React22.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4948,10 +5124,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React15.useState(false);
-  const [_open, _setOpen] = React15.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React22.useState(false);
+  const [_open, _setOpen] = React22.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React15.useCallback(
+  const setOpen = React22.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4963,10 +5139,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React15.useCallback(() => {
+  const toggleSidebar = React22.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React15.useEffect(() => {
+  React22.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4977,7 +5153,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React15.useMemo(
+  const contextValue = React22.useMemo(
     () => ({
       state,
       open,
@@ -5435,7 +5611,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React15.useMemo(() => {
+  const width = React22.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5578,7 +5754,7 @@ var sectionVariants = cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React15.forwardRef(
+var Section = React22.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "section",
     {
@@ -5590,7 +5766,7 @@ var Section = React15.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React15.forwardRef(
+var SectionHeader = React22.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5605,7 +5781,7 @@ var SectionHeader = React15.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React15.forwardRef(
+var SectionTitle = React22.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h2",
     {
@@ -5619,7 +5795,7 @@ var SectionTitle = React15.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React15.forwardRef(
+var SectionDescription = React22.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -5633,7 +5809,7 @@ var SectionDescription = React15.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React15.forwardRef(
+var SectionContent = React22.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5647,7 +5823,7 @@ var SectionContent = React15.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React15.forwardRef(
+var SectionFooter = React22.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5663,6 +5839,180 @@ var SectionFooter = React15.forwardRef(
   )
 );
 SectionFooter.displayName = "SectionFooter";
+function DataTableColumnHeader({
+  column,
+  title,
+  className
+}) {
+  if (!column.getCanSort()) {
+    return /* @__PURE__ */ jsx("div", { className: cn(className), children: title });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "data-[state=open]:bg-accent -ml-3 h-8",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: title }),
+          column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, {}) : column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ChevronsUpDown, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [
+        /* @__PURE__ */ jsx(ArrowUp, {}),
+        "Asc"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [
+        /* @__PURE__ */ jsx(ArrowDown, {}),
+        "Desc"
+      ] }),
+      column.getCanHide() && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [
+          /* @__PURE__ */ jsx(EyeOff, {}),
+          "Hide"
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function DataTablePagination({
+  table,
+  showRowSelection = true,
+  pageSizeOptions = [10, 20, 25, 30, 40, 50]
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
+    showRowSelection && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+      table.getFilteredSelectedRowModel().rows.length,
+      " of",
+      " ",
+      table.getFilteredRowModel().rows.length,
+      " row(s) selected."
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: `${table.getState().pagination.pageSize}`,
+            onValueChange: (value) => {
+              table.setPageSize(Number(value));
+            },
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }),
+              /* @__PURE__ */ jsx(SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => /* @__PURE__ */ jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden size-8 lg:flex",
+            onClick: () => table.setPageIndex(0),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ jsx(ChevronsLeft, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "size-8",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ jsx(ChevronLeft, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "size-8",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ jsx(ChevronRight, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "hidden size-8 lg:flex",
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            disabled: !table.getCanNextPage(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ jsx(ChevronsRight, {})
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DataTableViewOptions({
+  table
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "ml-auto hidden h-8 lg:flex",
+        children: [
+          /* @__PURE__ */ jsx(Settings2, {}),
+          "View"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-[150px]", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      table.getAllColumns().filter(
+        (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
+      ).map((column) => {
+        return /* @__PURE__ */ jsx(
+          DropdownMenuCheckboxItem,
+          {
+            className: "capitalize",
+            checked: column.getIsVisible(),
+            onCheckedChange: (value) => column.toggleVisibility(!!value),
+            children: column.id
+          },
+          column.id
+        );
+      })
+    ] })
+  ] });
+}
 function SearchForm({ ...props }) {
   return /* @__PURE__ */ jsx("form", { ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(Label2, { htmlFor: "search", className: "sr-only", children: "Search" }),
@@ -5698,7 +6048,7 @@ function SiteHeader({
       children: /* @__PURE__ */ 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__ */ jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
+        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -5847,116 +6197,3038 @@ function NavUser({ user }) {
     )
   ] }) }) });
 }
-
-// src/components/event-calendar/types.ts
-var DEFAULT_WORKING_HOURS = {
-  0: { from: 0, to: 0 },
-  // Sunday - closed
-  1: { from: 9, to: 17 },
-  // Monday
-  2: { from: 9, to: 17 },
-  // Tuesday
-  3: { from: 9, to: 17 },
-  // Wednesday
-  4: { from: 9, to: 17 },
-  // Thursday
-  5: { from: 9, to: 17 },
-  // Friday
-  6: { from: 0, to: 0 }
-  // Saturday - closed
-};
-var DEFAULT_VISIBLE_HOURS = { from: 0, to: 24 };
-var EVENT_COLORS = {
-  blue: {
-    bg: "bg-blue-500/20",
-    text: "text-blue-700 dark:text-blue-300",
-    border: "border-blue-500"
-  },
-  green: {
-    bg: "bg-green-500/20",
-    text: "text-green-700 dark:text-green-300",
-    border: "border-green-500"
+function PlanningTableToolbar({
+  className,
+  table,
+  ...props
+}) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "planning-table-toolbar",
+      className: cn("flex items-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Filter suppliers...",
+            value: table.getColumn("supplier")?.getFilterValue() ?? "",
+            onChange: (event) => table.getColumn("supplier")?.setFilterValue(event.target.value),
+            className: "h-8 w-[150px] lg:w-[250px]"
+          }
+        ),
+        isFiltered && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => table.resetColumnFilters(),
+            className: "h-8 px-2 lg:px-3",
+            children: [
+              "Reset",
+              /* @__PURE__ */ jsx(X, { className: "ml-2 h-4 w-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function getBadgeVariant(badgeType) {
+  return "outline";
+}
+function SupplierCell({
+  className,
+  supplier,
+  ...props
+}) {
+  const spacingClasses = "px-[var(--j3m-spacing-xs)] pt-[var(--j3m-spacing-s)] pb-2";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "supplier-cell",
+      className: cn(
+        // Same height as WeekCell (80px) for row alignment
+        "flex flex-col justify-center gap-1.5 min-w-[200px] h-[80px]",
+        // White background for Y-axis legend cells
+        "bg-background",
+        spacingClasses,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: supplier.name }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: supplier.scope })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: getBadgeVariant(supplier.badgeType),
+            className: "text-[10px] px-2 py-0.5 h-[19px] font-medium shrink-0 gap-1 bg-background border-border",
+            children: [
+              /* @__PURE__ */ jsx(Flag, { className: "h-2.5 w-2.5" }),
+              supplier.badgeType
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function getCombinedRiskLevel(data) {
+  const productionStatus = data.production?.status || "on-time";
+  const hasDeliveryCritical = data.deliveries?.some((d) => d.status === "critical");
+  const hasDeliveryDelayed = data.deliveries?.some((d) => d.status === "delayed");
+  if (productionStatus === "critical" || hasDeliveryCritical) {
+    return "critical";
+  }
+  if (productionStatus === "delayed" || hasDeliveryDelayed || data.hasWarning) {
+    return "warning";
+  }
+  return "normal";
+}
+function getRowStatus(status) {
+  if (status === "critical") return "critical";
+  if (status === "delayed") return "warning";
+  return "normal";
+}
+var statusFillClasses = {
+  normal: {
+    border: "border-l-[3px] border-l-green-500",
+    bg: "bg-green-50/50 dark:bg-green-950/30"
   },
-  red: {
-    bg: "bg-red-500/20",
-    text: "text-red-700 dark:text-red-300",
-    border: "border-red-500"
+  warning: {
+    border: "border-l-[3px] border-l-amber-500",
+    bg: "bg-amber-50/50 dark:bg-amber-950/30"
   },
-  yellow: {
-    bg: "bg-yellow-500/20",
-    text: "text-yellow-700 dark:text-yellow-300",
-    border: "border-yellow-500"
+  critical: {
+    border: "border-l-[3px] border-l-red-500",
+    bg: "bg-red-50/50 dark:bg-red-950/30"
+  }
+};
+var statusColors = {
+  normal: {
+    icon: "text-green-600 dark:text-green-400",
+    progress: "bg-green-500",
+    text: "text-green-700 dark:text-green-300"
   },
-  purple: {
-    bg: "bg-purple-500/20",
-    text: "text-purple-700 dark:text-purple-300",
-    border: "border-purple-500"
+  warning: {
+    icon: "text-amber-600 dark:text-amber-400",
+    progress: "bg-amber-500",
+    text: "text-amber-700 dark:text-amber-300"
   },
-  orange: {
-    bg: "bg-primary/20",
-    text: "text-primary dark:text-orange-300",
-    border: "border-primary"
+  critical: {
+    icon: "text-red-600 dark:text-red-400",
+    progress: "bg-red-500",
+    text: "text-red-700 dark:text-red-300"
   }
 };
-var VIEW_LABELS = {
-  month: "Month",
-  week: "Week",
-  day: "Day",
-  year: "Year",
-  agenda: "Agenda"
-};
-var BADGE_VARIANT_LABELS = {
-  dot: "Dot",
-  colored: "Colored",
-  mixed: "Mixed"
-};
-var CalendarContext = React15.createContext(null);
-function EventCalendarProvider({
-  children,
-  events: initialEvents = [],
-  users: initialUsers = [],
-  defaultDate = /* @__PURE__ */ new Date(),
-  defaultView = "month",
-  defaultBadgeVariant = "colored",
-  defaultUserId = null,
+function WeekCell({
+  className,
+  data,
+  week,
+  supplier,
+  isCurrentWeek,
+  onCellClick,
+  ...props
+}) {
+  const combinedRisk = data.type === "data" ? getCombinedRiskLevel(data) : "normal";
+  const statusClasses = statusFillClasses[combinedRisk];
+  const productionProgress = data.production?.progress ?? data.progress ?? 0;
+  const productionStatus = getRowStatus(data.production?.status);
+  const productionColors = statusColors[productionStatus];
+  const deliveryCount = data.deliveries?.length ?? 0;
+  const worstDeliveryStatus = data.deliveries?.some((d) => d.status === "critical") ? "critical" : data.deliveries?.some((d) => d.status === "delayed") ? "warning" : "normal";
+  const deliveryColors = statusColors[worstDeliveryStatus];
+  const getDeliveryStatusColor = (status) => {
+    switch (status) {
+      case "critical":
+        return "bg-red-500";
+      case "delayed":
+        return "bg-amber-500";
+      default:
+        return "bg-green-500";
+    }
+  };
+  const handleClick = () => {
+    if (onCellClick && data.type !== "empty") {
+      onCellClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && onCellClick && data.type !== "empty") {
+      e.preventDefault();
+      onCellClick();
+    }
+  };
+  const spacingClasses = "px-[var(--j3m-spacing-xs)] pt-[var(--j3m-spacing-s)] pb-2";
+  if (data.type === "empty") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "week-cell",
+        "data-state": "empty",
+        "data-current-week": isCurrentWeek,
+        className: cn(
+          "flex h-[80px] items-center justify-center cursor-default",
+          "bg-background",
+          spacingClasses,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/30 text-xl", children: "\xB7" })
+      }
+    );
+  }
+  if (data.type === "no-logistics") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "week-cell",
+        "data-state": "no-logistics",
+        "data-current-week": isCurrentWeek,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        className: cn(
+          "flex flex-col h-[80px] justify-center gap-2",
+          "cursor-pointer bg-background",
+          "border-l-[3px] border-l-muted-foreground/30",
+          spacingClasses,
+          // Hover lift effect
+          "transition-all duration-200 ease-out",
+          "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Factory, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-1.5 bg-muted-foreground/20 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground/40 rounded-full",
+                style: { width: `${productionProgress}%` }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Truck, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "No logistics" })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "week-cell",
+      "data-state": "data",
+      "data-risk": combinedRisk,
+      "data-current-week": isCurrentWeek,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      className: cn(
+        "flex flex-col h-[80px] justify-center gap-2",
+        "cursor-pointer",
+        // Edge-to-edge status fill (no inset card)
+        statusClasses.border,
+        statusClasses.bg,
+        spacingClasses,
+        // Hover lift effect
+        "transition-all duration-200 ease-out",
+        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Factory, { className: cn("h-3.5 w-3.5 shrink-0", productionColors.icon) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("h-full rounded-full transition-all", productionColors.progress),
+              style: { width: `${productionProgress}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Truck, { className: cn("h-3.5 w-3.5 shrink-0", deliveryColors.icon) }),
+          deliveryCount > 0 ? /* @__PURE__ */ jsxs("span", { className: cn("text-[10px] font-medium", deliveryColors.text), children: [
+            deliveryCount,
+            "x delivery"
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2014" })
+        ] }),
+        deliveryCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          data.deliveries?.slice(0, 5).map((delivery, index) => {
+            const deliveryProgress = delivery.progress ?? (delivery.status === "on-time" ? 100 : delivery.status === "delayed" ? 50 : 25);
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 max-w-[24px]",
+                title: delivery.label || `Delivery ${index + 1}`,
+                children: /* @__PURE__ */ jsx("div", { className: "h-1 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn("h-full rounded-full transition-all", getDeliveryStatusColor(delivery.status)),
+                    style: { width: `${deliveryProgress}%` }
+                  }
+                ) })
+              },
+              delivery.id || index
+            );
+          }),
+          deliveryCount > 5 && /* @__PURE__ */ jsxs("span", { className: "text-[8px] text-muted-foreground", children: [
+            "+",
+            deliveryCount - 5
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CommentButton({
+  className,
+  commentCount = 0,
+  size = "default",
+  ...props
+}) {
+  const hasComments = commentCount > 0;
+  const sizeClasses = size === "sm" ? "h-6 w-6" : "h-7 w-7";
+  const iconSize = size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "icon",
+      className: cn(
+        sizeClasses,
+        "rounded-full shrink-0 relative",
+        "border-border bg-background hover:bg-muted",
+        "shadow-[var(--j3m-shadow-sm)]",
+        hasComments && "border-primary/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: cn(iconSize, hasComments && "text-primary") }),
+        hasComments && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute -top-0.5 -right-0.5",
+              "h-2.5 w-2.5 rounded-full",
+              "bg-primary",
+              "border border-background"
+              // Subtle outline for contrast
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: hasComments ? `${commentCount} comment${commentCount > 1 ? "s" : ""}` : "Add comment" })
+      ]
+    }
+  );
+}
+
+// src/blocks/planning-table/types.ts
+function getCommentLocationLabel(location) {
+  if (location.type === "production") {
+    return location.supplierName ? `Production - ${location.supplierName}` : "Production";
+  }
+  if (location.type === "delivery") {
+    return location.deliveryLabel || `Delivery ${location.deliveryId || ""}`;
+  }
+  return "Unknown";
+}
+function getElementShipmentStatus(element, currentDeliveryId) {
+  if (element.shipmentStatus) {
+    return element.shipmentStatus;
+  }
+  if (element.isProduced) {
+    if (element.actualDeliveryId && element.actualDeliveryId !== currentDeliveryId) {
+      return "moved";
+    }
+    return "sent";
+  }
+  if (element.originalDeliveryId && element.originalDeliveryId !== currentDeliveryId) {
+    return "addon";
+  }
+  return "not-sent";
+}
+function getShipmentStatusLabel(status) {
+  switch (status) {
+    case "sent":
+      return "Sent";
+    case "not-sent":
+      return "Missing";
+    // Neutral tone, not "Not sent"
+    case "moved":
+      return "Moved to another delivery";
+    case "addon":
+      return "Add-on";
+    case "planned":
+      return "Planned";
+    default:
+      return status;
+  }
+}
+function getWeekKey(date) {
+  const year = date.getFullYear();
+  const weekNumber = getISOWeek(date);
+  return `${year}-W${weekNumber.toString().padStart(2, "0")}`;
+}
+function getISOWeek(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function generateWeeks(startDate, count) {
+  const weeks = [];
+  const current = new Date(startDate);
+  const today = /* @__PURE__ */ new Date();
+  const currentWeekKey = getWeekKey(today);
+  const dayOfWeek = current.getDay();
+  const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+  current.setDate(current.getDate() + daysToMonday);
+  for (let i = 0; i < count; i++) {
+    const weekStart = new Date(current);
+    const weekEnd = new Date(current);
+    weekEnd.setDate(weekEnd.getDate() + 6);
+    const weekNumber = getISOWeek(weekStart);
+    const year = weekStart.getFullYear();
+    const weekKey = `${year}-W${weekNumber.toString().padStart(2, "0")}`;
+    weeks.push({
+      weekNumber,
+      year,
+      startDate: weekStart,
+      endDate: weekEnd,
+      label: `W${weekNumber.toString().padStart(2, "0")}`,
+      dateRange: formatDateRange(weekStart, weekEnd),
+      isCurrentWeek: weekKey === currentWeekKey
+    });
+    current.setDate(current.getDate() + 7);
+  }
+  return weeks;
+}
+function formatDateRange(start, end) {
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const startMonth = months[start.getMonth()];
+  const endMonth = months[end.getMonth()];
+  if (startMonth === endMonth) {
+    return `${startMonth} ${start.getDate()} - ${end.getDate()}`;
+  }
+  return `${startMonth} ${start.getDate()} - ${endMonth} ${end.getDate()}`;
+}
+function formatProductionUnit(unit) {
+  const unitLabels = {
+    quantity: "pcs",
+    kvm: "m\xB2",
+    ton: "ton",
+    kg: "kg",
+    m: "m",
+    pcs: "pcs"
+  };
+  return unitLabels[unit] || unit;
+}
+function LocationIcon({ type }) {
+  if (type === "production") {
+    return /* @__PURE__ */ jsx(Factory, { className: "h-3 w-3" });
+  }
+  return /* @__PURE__ */ jsx(Truck, { className: "h-3 w-3" });
+}
+function PlanningWeekCommentPopover({
+  comments,
+  weekLabel,
+  weekKey,
+  locationOptions,
+  onAddComment,
+  onCommentClick,
+  open,
+  onOpenChange
+}) {
+  const [newCommentText, setNewCommentText] = React22.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React22.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22.useState(true);
+  const [showAddForm, setShowAddForm] = React22.useState(false);
+  const selectedLocation = React22.useMemo(() => {
+    return locationOptions.find((opt) => opt.id === selectedLocationId);
+  }, [locationOptions, selectedLocationId]);
+  const handleSubmit = () => {
+    if (newCommentText.trim() && selectedLocation && onAddComment) {
+      const location = {
+        type: selectedLocation.type,
+        weekKey,
+        supplierId: selectedLocation.supplierId,
+        supplierName: selectedLocation.supplierName,
+        deliveryId: selectedLocation.deliveryId,
+        deliveryLabel: selectedLocation.deliveryLabel
+      };
+      onAddComment(newCommentText.trim(), location);
+      setNewCommentText("");
+      setSelectedLocationId("");
+      setShowAddForm(false);
+      setViewCommentsOpen(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      setShowAddForm(false);
+      setSelectedLocationId("");
+      setNewCommentText("");
+    }
+  };
+  const handleCommentClick = (comment) => {
+    if (comment.location && onCommentClick) {
+      onCommentClick(comment);
+    }
+  };
+  const formatDate2 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  const prevOpenRef = React22.useRef(open);
+  React22.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+      setSelectedLocationId("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CommentButton, { size: "sm", commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+                  "Comments ",
+                  comments.length > 0 && `(${comments.length})`
+                ] }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                  "h-4 w-4 transition-transform duration-200",
+                  viewCommentsOpen && "rotate-180"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => {
+                const hasLocation = !!comment.location;
+                const locationLabel = comment.location ? getCommentLocationLabel(comment.location) : null;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "rounded-lg bg-muted/50 p-3 space-y-2",
+                      hasLocation && "cursor-pointer hover:bg-muted/70 transition-colors"
+                    ),
+                    onClick: () => handleCommentClick(comment),
+                    role: hasLocation ? "button" : void 0,
+                    tabIndex: hasLocation ? 0 : void 0,
+                    onKeyDown: hasLocation ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleCommentClick(comment);
+                      }
+                    } : void 0,
+                    children: [
+                      locationLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxs(
+                          Badge,
+                          {
+                            variant: "outline",
+                            className: "text-[10px] px-2 py-0 h-5 font-medium bg-background gap-1",
+                            children: [
+                              /* @__PURE__ */ jsx(LocationIcon, { type: comment.location.type }),
+                              locationLabel
+                            ]
+                          }
+                        ),
+                        hasLocation && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+                    ]
+                  },
+                  comment.id
+                );
+              }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+            !showAddForm ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full justify-center gap-2 h-8",
+                onClick: () => setShowAddForm(true),
+                disabled: locationOptions.length === 0,
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                  locationOptions.length === 0 ? "No suppliers available" : "Add comment"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: cn(
+              "space-y-3 p-3 rounded-lg border border-border bg-muted/30",
+              "animate-in fade-in-0 slide-in-from-top-2 duration-200"
+            ), children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxs(Label2, { htmlFor: "supplier-prefix-select", className: "text-xs font-medium", children: [
+                  "Supplier / Prefix ",
+                  /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsxs(Select, { value: selectedLocationId, onValueChange: setSelectedLocationId, children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { id: "supplier-prefix-select", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select supplier / prefix..." }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: locationOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(LocationIcon, { type: option.type }),
+                    /* @__PURE__ */ jsx("span", { children: option.label })
+                  ] }) }, option.id)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsx(Label2, { htmlFor: "comment-text", className: "text-xs font-medium", children: "Comment" }),
+                /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    id: "comment-text",
+                    placeholder: "Type your comment...",
+                    value: newCommentText,
+                    onChange: (e) => setNewCommentText(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    className: "min-h-[80px] text-sm resize-none",
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-7",
+                      onClick: () => {
+                        setShowAddForm(false);
+                        setNewCommentText("");
+                        setSelectedLocationId("");
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 gap-1",
+                      onClick: handleSubmit,
+                      disabled: !newCommentText.trim() || !selectedLocationId,
+                      children: [
+                        /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                        "Save"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function generateLocationOptions(suppliers, weekKey) {
+  const options = [];
+  for (const supplier of suppliers) {
+    const weekData = supplier.weeks[weekKey];
+    options.push({
+      id: `${supplier.id}-production`,
+      label: `${supplier.name} - Production`,
+      type: "production",
+      supplierId: supplier.id,
+      supplierName: supplier.name
+    });
+    if (weekData?.deliveries) {
+      for (const delivery of weekData.deliveries) {
+        options.push({
+          id: `${supplier.id}-delivery-${delivery.id}`,
+          label: `${supplier.name} - ${delivery.label || `Delivery ${delivery.id}`}`,
+          type: "delivery",
+          supplierId: supplier.id,
+          supplierName: supplier.name,
+          deliveryId: delivery.id,
+          deliveryLabel: delivery.label || `Delivery ${delivery.id}`
+        });
+      }
+    }
+  }
+  return options;
+}
+function WeekHeader({
+  className,
+  week,
+  weekKey,
+  comments = [],
+  showCommentButton = true,
+  locationOptions = [],
+  onAddComment,
+  onCommentClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "week-header",
+      "data-current-week": week.isCurrentWeek,
+      className: cn(
+        "flex items-center justify-between gap-2 min-w-[140px] text-left",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(
+              "text-sm font-semibold tracking-tight",
+              week.isCurrentWeek ? "text-primary" : "text-foreground"
+            ), children: week.label }),
+            week.isCurrentWeek && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal text-muted-foreground/60 whitespace-nowrap", children: week.dateRange })
+        ] }),
+        showCommentButton && weekKey && /* @__PURE__ */ jsx(
+          PlanningWeekCommentPopover,
+          {
+            comments,
+            weekLabel: week.label,
+            weekKey,
+            locationOptions,
+            onAddComment,
+            onCommentClick
+          }
+        )
+      ]
+    }
+  );
+}
+function SupplierColumnHeader({
+  column
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: "-ml-3 h-8 data-[state=open]:bg-accent",
+      onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Supplier / Scope" }),
+        /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })
+      ]
+    }
+  );
+}
+function getSupplierColumn() {
+  return {
+    id: "supplier",
+    accessorKey: "name",
+    header: ({ column }) => /* @__PURE__ */ jsx(SupplierColumnHeader, { column }),
+    cell: ({ row }) => /* @__PURE__ */ jsx(SupplierCell, { supplier: row.original }),
+    enableSorting: true,
+    enableHiding: false
+  };
+}
+function WeekHeaderWithComments({
+  week,
+  weekKey,
+  config,
+  suppliers
+}) {
+  const weekComments = config?.weekComments?.[weekKey] ?? [];
+  let filteredSuppliers = suppliers;
+  if (config?.userRole === "supplier" && config?.currentSupplierId) {
+    filteredSuppliers = suppliers.filter((s) => s.id === config.currentSupplierId);
+  }
+  const locationOptions = generateLocationOptions(filteredSuppliers, weekKey);
+  const handleAddComment = config?.onAddWeekComment ? (text, location) => {
+    config.onAddWeekComment?.(weekKey, text, location);
+  } : void 0;
+  const handleCommentClick = config?.onCommentClick;
+  return /* @__PURE__ */ jsx(
+    WeekHeader,
+    {
+      week,
+      weekKey,
+      comments: weekComments,
+      showCommentButton: true,
+      locationOptions,
+      onAddComment: handleAddComment,
+      onCommentClick: handleCommentClick
+    }
+  );
+}
+function generateWeekColumns(weeks, config, suppliers) {
+  return weeks.map((week) => {
+    const weekKey = getWeekKey(week.startDate);
+    return {
+      id: weekKey,
+      accessorFn: (supplier) => supplier.weeks[weekKey],
+      header: () => /* @__PURE__ */ jsx(
+        WeekHeaderWithComments,
+        {
+          week,
+          weekKey,
+          config,
+          suppliers: suppliers ?? []
+        }
+      ),
+      cell: ({ row }) => {
+        const supplier = row.original;
+        const data = supplier.weeks[weekKey] || { type: "empty" };
+        return /* @__PURE__ */ jsx(
+          WeekCell,
+          {
+            data,
+            week,
+            supplier,
+            isCurrentWeek: week.isCurrentWeek,
+            onCellClick: config?.onCellClick ? () => config.onCellClick?.(supplier, week, data) : void 0
+          }
+        );
+      },
+      enableSorting: false,
+      enableHiding: true
+    };
+  });
+}
+function generateColumns(weeks, config, suppliers) {
+  return [
+    getSupplierColumn(),
+    ...generateWeekColumns(weeks, config, suppliers)
+  ];
+}
+function PlanningTable({
+  className,
+  suppliers,
+  config = {}
+}) {
+  const {
+    weekCount = 12,
+    startDate = /* @__PURE__ */ new Date(),
+    highlightCurrentWeek = true,
+    showToolbar = true,
+    showPagination = true,
+    pageSizeOptions = [10, 20, 30, 50],
+    defaultPageSize = 10,
+    stickySupplierColumn = true,
+    maxHeight = "600px"
+  } = config;
+  const weeks = React22.useMemo(
+    () => generateWeeks(startDate, weekCount),
+    [startDate, weekCount]
+  );
+  const currentWeekKey = React22.useMemo(() => {
+    const currentWeek = weeks.find((w) => w.isCurrentWeek);
+    return currentWeek ? getWeekKey(currentWeek.startDate) : null;
+  }, [weeks]);
+  const columns = React22.useMemo(
+    () => generateColumns(weeks, config, suppliers),
+    [weeks, config, suppliers]
+  );
+  const [sorting, setSorting] = React22.useState([]);
+  const [columnFilters, setColumnFilters] = React22.useState([]);
+  const [columnVisibility, setColumnVisibility] = React22.useState({});
+  const [rowSelection, setRowSelection] = React22.useState({});
+  const table = useReactTable({
+    data: suppliers,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection
+    },
+    initialState: {
+      pagination: {
+        pageSize: defaultPageSize
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "planning-table",
+      className: cn("flex flex-col gap-4", className),
+      children: [
+        showToolbar && /* @__PURE__ */ jsx(PlanningTableToolbar, { table }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-background shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxs(
+          ScrollArea,
+          {
+            className: "w-full",
+            style: { maxHeight },
+            children: [
+              /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+                /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-20", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    children: headerGroup.headers.map((header, index) => {
+                      const isCurrentWeekColumn = header.id === currentWeekKey;
+                      return /* @__PURE__ */ 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 : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        },
+                        header.id
+                      );
+                    })
+                  },
+                  headerGroup.id
+                )) }),
+                /* @__PURE__ */ jsx("tbody", { className: "bg-background", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    "data-state": row.getIsSelected() && "selected",
+                    className: "border-b border-border last:border-b-0",
+                    children: row.getVisibleCells().map((cell, index) => {
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          className: cn(
+                            "p-0 align-top border-r border-border last:border-r-0 bg-background",
+                            // First column: sticky WHITE with right-edge shadow (Quantum token)
+                            index === 0 && stickySupplierColumn && [
+                              "sticky left-0 z-10 min-w-[200px]",
+                              "shadow-[var(--j3m-shadow-sticky-edge)]"
+                            ],
+                            index > 0 && "min-w-[140px]"
+                          ),
+                          children: flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )
+                        },
+                        cell.id
+                      );
+                    })
+                  },
+                  row.id
+                )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: columns.length,
+                    className: "h-24 text-center text-muted-foreground bg-background",
+                    children: "No suppliers found."
+                  }
+                ) }) })
+              ] }),
+              /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+              /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
+            ]
+          }
+        ) }),
+        showPagination && /* @__PURE__ */ jsx(
+          DataTablePagination,
+          {
+            table,
+            showRowSelection: false,
+            pageSizeOptions
+          }
+        )
+      ]
+    }
+  );
+}
+function getStatusBadgeVariant(status) {
+  switch (status) {
+    case "on-time":
+      return "outline";
+    case "delayed":
+      return "secondary";
+    case "critical":
+      return "destructive";
+    default:
+      return "outline";
+  }
+}
+function getStatusBadgeClasses(status) {
+  switch (status) {
+    case "on-time":
+      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+    case "delayed":
+      return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
+    case "critical":
+      return "";
+    default:
+      return "";
+  }
+}
+function getStatusLabel(status) {
+  switch (status) {
+    case "on-time":
+      return "On Track";
+    case "delayed":
+      return "At Risk";
+    case "critical":
+      return "Critical";
+    case "pending":
+      return "Pending";
+    default:
+      return status;
+  }
+}
+function getProgressVariant(status) {
+  switch (status) {
+    case "on-time":
+      return "success";
+    case "delayed":
+      return "warning";
+    case "critical":
+      return "destructive";
+    default:
+      return "default";
+  }
+}
+function getShipmentStatusBadgeClasses(status) {
+  switch (status) {
+    case "sent":
+      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+    case "not-sent":
+      return "border-muted-foreground/50 text-muted-foreground bg-muted/50";
+    case "moved":
+      return "border-blue-500 text-blue-600 bg-blue-50 dark:bg-blue-950/50";
+    case "addon":
+      return "border-purple-500 text-purple-600 bg-purple-50 dark:bg-purple-950/50";
+    case "planned":
+    default:
+      return "border-muted-foreground/50 text-muted-foreground";
+  }
+}
+function getShipmentStatusRowBg(status) {
+  switch (status) {
+    case "sent":
+      return "bg-green-50/30 dark:bg-green-950/10";
+    case "not-sent":
+      return "bg-muted/30";
+    case "moved":
+      return "bg-blue-50/30 dark:bg-blue-950/10";
+    case "addon":
+      return "bg-purple-50/30 dark:bg-purple-950/10";
+    default:
+      return "";
+  }
+}
+function DeliveryCommentPopover({
+  comments = [],
+  onAddComment,
+  deliveryLabel
+}) {
+  const [open, setOpen] = React22.useState(false);
+  const [newCommentText, setNewCommentText] = React22.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22.useState(true);
+  const [showAddForm, setShowAddForm] = React22.useState(false);
+  const handleSubmit = () => {
+    if (newCommentText.trim() && onAddComment) {
+      onAddComment(newCommentText.trim());
+      setNewCommentText("");
+      setShowAddForm(false);
+      setViewCommentsOpen(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      setShowAddForm(false);
+      setNewCommentText("");
+    }
+  };
+  const formatDate2 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  const prevOpenRef = React22.useRef(open);
+  React22.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CommentButton, { size: "sm", commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: deliveryLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+                  "Comments ",
+                  comments.length > 0 && `(${comments.length})`
+                ] }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                  "h-4 w-4 transition-transform duration-200",
+                  viewCommentsOpen && "rotate-180"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+              ] }, comment.id)) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+            !showAddForm ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full justify-center gap-2 h-8",
+                onClick: () => setShowAddForm(true),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                  "Add comment"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: cn(
+              "space-y-3 p-3 rounded-lg border border-border bg-muted/30",
+              "animate-in fade-in-0 slide-in-from-top-2 duration-200"
+            ), children: [
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  placeholder: "Type your comment...",
+                  value: newCommentText,
+                  onChange: (e) => setNewCommentText(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  className: "min-h-[80px] text-sm resize-none",
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-7",
+                      onClick: () => {
+                        setShowAddForm(false);
+                        setNewCommentText("");
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 gap-1",
+                      onClick: handleSubmit,
+                      disabled: !newCommentText.trim(),
+                      children: [
+                        /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                        "Save"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ProductionCommentSection({
+  comments = [],
+  onAddComment
+}) {
+  const [showAddForm, setShowAddForm] = React22.useState(false);
+  const [newComment, setNewComment] = React22.useState("");
+  const handleSubmit = () => {
+    if (newComment.trim() && onAddComment) {
+      onAddComment(newComment.trim());
+      setNewComment("");
+      setShowAddForm(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      setShowAddForm(false);
+      setNewComment("");
+    }
+  };
+  const formatDate2 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    comments.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-2.5 space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+    ] }, comment.id)) }),
+    !showAddForm ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start gap-2 h-8 text-muted-foreground",
+        onClick: () => setShowAddForm(true),
+        children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5" }),
+          comments.length > 0 ? "Add another comment" : "Add a comment..."
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-200", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          placeholder: "Add a comment...",
+          value: newComment,
+          onChange: (e) => setNewComment(e.target.value),
+          onKeyDown: handleKeyDown,
+          className: "min-h-[60px] text-sm resize-none",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7",
+              onClick: () => {
+                setShowAddForm(false);
+                setNewComment("");
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "h-7 gap-1",
+              onClick: handleSubmit,
+              disabled: !newComment.trim(),
+              children: [
+                /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                "Save"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DeliveryListItem({
+  delivery,
+  index,
+  onClick
+}) {
+  const hasComments = (delivery.comments?.length ?? 0) > 0;
+  return /* @__PURE__ */ 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"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-lg",
+            delivery.status === "on-time" && "bg-green-100 dark:bg-green-950/50",
+            delivery.status === "delayed" && "bg-amber-100 dark:bg-amber-950/50",
+            delivery.status === "critical" && "bg-red-100 dark:bg-red-950/50"
+          ), children: /* @__PURE__ */ jsx(Truck, { className: cn(
+            "h-4 w-4",
+            delivery.status === "on-time" && "text-green-600 dark:text-green-400",
+            delivery.status === "delayed" && "text-amber-600 dark:text-amber-400",
+            delivery.status === "critical" && "text-red-600 dark:text-red-400"
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              hasComments && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "h-3 w-3 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" })
+              ] })
+            ] }),
+            delivery.destination && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              "\u2192 ",
+              delivery.destination
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(delivery.status),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
+              children: getStatusLabel(delivery.status)
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function DeliveryDetailsView({
+  delivery,
+  week,
+  onBack,
+  onAddComment
+}) {
+  const elements = delivery.elements ?? [];
+  const categorizedElements = React22.useMemo(() => {
+    const sent = [];
+    const notSent = [];
+    const moved = [];
+    const addons = [];
+    elements.forEach((element) => {
+      const status = getElementShipmentStatus(element, delivery.id);
+      switch (status) {
+        case "sent":
+          sent.push(element);
+          break;
+        case "not-sent":
+          notSent.push(element);
+          break;
+        case "moved":
+          moved.push(element);
+          break;
+        case "addon":
+          addons.push(element);
+          break;
+        default:
+          notSent.push(element);
+      }
+    });
+    return { sent, notSent, moved, addons };
+  }, [elements, delivery.id]);
+  const totalCount = elements.length;
+  const sentCount = categorizedElements.sent.length;
+  (delivery.comments?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full animate-in slide-in-from-right-4 duration-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-6 py-3 border-b", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "gap-1 -ml-2",
+        onClick: onBack,
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: delivery.label || "Delivery Details" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            DeliveryCommentPopover,
+            {
+              comments: delivery.comments,
+              onAddComment,
+              deliveryLabel: delivery.label || "Delivery"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(delivery.status),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
+              children: getStatusLabel(delivery.status)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Calendar$1, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            week.label,
+            " \u2022 ",
+            week.dateRange
+          ] })
+        ] }),
+        delivery.destination && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Truck, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "\u2192 ",
+            delivery.destination
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      totalCount > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Shipment Progress" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold tabular-nums", children: [
+            "Shipped ",
+            sentCount,
+            " / ",
+            totalCount
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-full transition-all",
+              sentCount === totalCount ? "bg-green-500" : "bg-primary"
+            ),
+            style: { width: `${totalCount > 0 ? sentCount / totalCount * 100 : 0}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-3 flex-wrap", children: [
+          categorizedElements.sent.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-green-700 dark:text-green-300", children: [
+              categorizedElements.sent.length,
+              " Sent"
+            ] })
+          ] }),
+          categorizedElements.notSent.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-amber-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-amber-700 dark:text-amber-300", children: [
+              categorizedElements.notSent.length,
+              " Not sent"
+            ] })
+          ] }),
+          categorizedElements.moved.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3 text-blue-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-blue-700 dark:text-blue-300", children: [
+              categorizedElements.moved.length,
+              " Moved"
+            ] })
+          ] }),
+          categorizedElements.addons.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 text-purple-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-purple-700 dark:text-purple-300", children: [
+              categorizedElements.addons.length,
+              " Add-on"
+            ] })
+          ] })
+        ] })
+      ] }),
+      elements.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Elements" }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "bg-sidebar hover:bg-sidebar", children: [
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: elements.map((element) => {
+            const shipmentStatus = getElementShipmentStatus(element, delivery.id);
+            const statusLabel = getShipmentStatusLabel(shipmentStatus);
+            return /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                className: getShipmentStatusRowBg(shipmentStatus),
+                children: [
+                  /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: element.prefix || "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { children: element.type || element.name || "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? /* @__PURE__ */ jsxs("span", { children: [
+                    element.weight,
+                    " ",
+                    element.weightUnit || "kg"
+                  ] }) : "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: element.sizeSqm ? /* @__PURE__ */ jsx("span", { children: element.sizeSqm }) : "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "text-[10px] h-5",
+                          getShipmentStatusBadgeClasses(shipmentStatus)
+                        ),
+                        children: statusLabel
+                      }
+                    ),
+                    shipmentStatus === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
+                      "\u2192 ",
+                      element.actualDeliveryLabel
+                    ] }),
+                    shipmentStatus === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
+                      "from ",
+                      element.originalDeliveryLabel
+                    ] })
+                  ] }) })
+                ]
+              },
+              element.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      elements.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Package, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No elements in this delivery" })
+      ] })
+    ] }) })
+  ] });
+}
+function MainView({
+  supplier,
+  week,
+  data,
+  producedValue,
+  hasChanges,
+  onProducedChange,
+  onSave,
+  onSelectDelivery,
+  onAddProductionComment
+}) {
+  const production = data?.production;
+  const productionProgress = production ? Math.min(100, Math.round(production.produced / production.target * 100)) : data?.progress ?? 0;
+  const productionStatus = production?.status ?? "on-time";
+  const isComplete = productionProgress >= 100;
+  const hasProductionComments = (production?.comments?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-200", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "px-6 pt-6 pb-4", children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        supplier.name,
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs font-normal", children: supplier.badgeType })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogDescription, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
+        week.label,
+        " \u2022 ",
+        week.dateRange
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+      data.type !== "empty" && /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Factory, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Production" }),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(productionStatus),
+              className: cn("text-xs ml-auto", getStatusBadgeClasses(productionStatus)),
+              children: getStatusLabel(productionStatus)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+          /* @__PURE__ */ jsx(
+            CircularProgress,
+            {
+              value: productionProgress,
+              size: 100,
+              strokeWidth: 10,
+              variant: getProgressVariant(productionStatus),
+              showCheckmark: isComplete,
+              children: isComplete ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx(Check, { className: "h-6 w-6 text-green-600" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-green-600", children: [
+                  production?.produced ?? 0,
+                  " ",
+                  production ? formatProductionUnit(production.unit) : ""
+                ] })
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg font-bold tabular-nums", children: production?.produced ?? 0 }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+                  "/ ",
+                  production?.target ?? 0,
+                  " ",
+                  production ? formatProductionUnit(production.unit) : ""
+                ] })
+              ] })
+            }
+          ),
+          production && /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs(Label2, { htmlFor: "produced", className: "text-xs", children: [
+                "Produced Amount (",
+                formatProductionUnit(production.unit),
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "produced",
+                  type: "number",
+                  min: "0",
+                  max: production.target * 2,
+                  value: producedValue,
+                  onChange: onProducedChange,
+                  className: "h-9"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+                "Target: ",
+                production.target,
+                " ",
+                formatProductionUnit(production.unit)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                className: "w-full",
+                disabled: !hasChanges,
+                onClick: onSave,
+                children: hasChanges ? "Save Progress" : "No Changes"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Comments" }),
+            hasProductionComments && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+              "(",
+              production?.comments?.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ProductionCommentSection,
+            {
+              comments: production?.comments,
+              onAddComment: onAddProductionComment
+            }
+          )
+        ] })
+      ] }),
+      data.deliveries && data.deliveries.length > 0 && /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Deliveries" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            data.deliveries.length,
+            " scheduled"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: data.deliveries.map((delivery, index) => /* @__PURE__ */ jsx(
+          DeliveryListItem,
+          {
+            delivery,
+            index,
+            onClick: () => onSelectDelivery(delivery)
+          },
+          delivery.id
+        )) })
+      ] }),
+      data.type === "no-logistics" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground p-3 bg-muted/50 rounded-lg", children: [
+        /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: "No logistics scheduled for this week" })
+      ] }),
+      data.hasWarning && data.warningMessage && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-lg bg-amber-50 dark:bg-amber-950/50 p-3 text-amber-700 dark:text-amber-300", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm", children: data.warningMessage })
+      ] }),
+      data.notes && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Notes" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: data.notes })
+      ] })
+    ] }) })
+  ] });
+}
+function WeekDetailDialog({
+  open,
+  onOpenChange,
+  supplier,
+  week,
+  data,
+  onProgressUpdate,
+  onAddProductionComment,
+  onAddDeliveryComment
+}) {
+  const production = data?.production;
+  const initialProduced = production?.produced ?? 0;
+  const [producedValue, setProducedValue] = React22.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React22.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React22.useState(null);
+  React22.useEffect(() => {
+    const newProduced = data?.production?.produced ?? 0;
+    setProducedValue(newProduced.toString());
+    setHasChanges(false);
+  }, [data]);
+  React22.useEffect(() => {
+    if (!open) {
+      setSelectedDelivery(null);
+    }
+  }, [open]);
+  const handleProducedChange = (e) => {
+    const value = e.target.value;
+    setProducedValue(value);
+    setHasChanges(true);
+  };
+  const handleSave = () => {
+    if (!supplier || !week || !onProgressUpdate) return;
+    const newProduced = parseFloat(producedValue) || 0;
+    const target = production?.target || 100;
+    const newProgress = Math.min(100, Math.round(newProduced / target * 100));
+    const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
+    onProgressUpdate(supplier.id, weekKey, newProgress, newProduced);
+    setHasChanges(false);
+  };
+  if (!supplier || !week || !data) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-lg max-h-[85vh] p-0 gap-0 overflow-hidden", children: selectedDelivery ? /* @__PURE__ */ jsx(
+    DeliveryDetailsView,
+    {
+      delivery: selectedDelivery,
+      week,
+      onBack: () => setSelectedDelivery(null),
+      onAddComment: onAddDeliveryComment ? (text) => {
+        const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
+        onAddDeliveryComment(supplier.id, weekKey, selectedDelivery.id, text);
+      } : void 0
+    }
+  ) : /* @__PURE__ */ jsx(
+    MainView,
+    {
+      supplier,
+      week,
+      data,
+      producedValue,
+      hasChanges,
+      onProducedChange: handleProducedChange,
+      onSave: handleSave,
+      onSelectDelivery: setSelectedDelivery,
+      onAddProductionComment: onAddProductionComment ? (text) => {
+        const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
+        onAddProductionComment(supplier.id, weekKey, text);
+      } : void 0
+    }
+  ) }) });
+}
+function RowHeaderCell({
+  className,
+  data,
+  showProgress = true,
+  ...props
+}) {
+  const progressPercent = data.totalRequired > 0 ? Math.min(data.totalBooked / data.totalRequired * 100, 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "row-header-cell",
+      className: cn(
+        "flex flex-col justify-center gap-1.5 py-2 px-3 min-w-[200px] h-[100px] bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: data.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: data.typeCode })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: "outline",
+              className: "text-[10px] px-2 py-0.5 h-[19px] font-medium shrink-0 gap-1 bg-background border-border",
+              children: [
+                /* @__PURE__ */ jsx(Flag, { className: "h-2.5 w-2.5" }),
+                "Paint"
+              ]
+            }
+          )
+        ] }),
+        showProgress && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-primary rounded-full transition-all",
+              style: { width: `${progressPercent}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-primary", children: [
+            data.totalBooked.toLocaleString(),
+            " / ",
+            data.totalRequired.toLocaleString(),
+            " Booked"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function NetBadge({
+  className,
+  net,
+  status,
+  compact = false,
+  ...props
+}) {
+  const statusStyles = {
+    pending: {
+      container: "bg-muted border-border/50",
+      text: "text-muted-foreground",
+      icon: "text-muted-foreground"
+    },
+    valid: {
+      container: "bg-green-100/50 border-green-500 dark:bg-green-950/30 dark:border-green-400",
+      text: "text-green-700 dark:text-green-400",
+      icon: "text-green-600 dark:text-green-400"
+    },
+    shortfall: {
+      container: "bg-red-100/30 border-red-400/50 dark:bg-red-950/30 dark:border-red-400/50",
+      text: "text-red-700 dark:text-red-400",
+      icon: "text-red-600 dark:text-red-400"
+    }
+  };
+  const styles = statusStyles[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "net-badge",
+      "data-status": status,
+      className: cn(
+        "inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full border",
+        styles.container,
+        className
+      ),
+      ...props,
+      children: [
+        status === "valid" && /* @__PURE__ */ jsx(Check, { className: cn("h-3 w-3", styles.icon) }),
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "text-xs font-bold leading-none",
+          styles.text
+        ), children: net >= 0 ? net : net }),
+        !compact && /* @__PURE__ */ jsx("span", { className: cn(
+          "text-[10px] font-light opacity-80",
+          styles.text
+        ), children: "net" })
+      ]
+    }
+  );
+}
+
+// src/blocks/calibration-table/types.ts
+function formatCalibrationUnit(unit) {
+  const unitLabels = {
+    ton: "tons",
+    pcs: "pcs",
+    m2: "m\xB2",
+    kg: "kg",
+    m: "m"
+  };
+  return unitLabels[unit] || unit;
+}
+function calculateCalibrationCells(weeks) {
+  const result = {};
+  let accumulatedPlanned = 0;
+  let accumulatedEntered = 0;
+  for (const week of weeks) {
+    accumulatedPlanned += week.planned;
+    accumulatedEntered += week.entered ?? 0;
+    const net = accumulatedEntered - accumulatedPlanned;
+    let status = "pending";
+    if (week.entered !== null) {
+      status = net >= 0 ? "valid" : "shortfall";
+    }
+    result[week.weekKey] = {
+      planned: week.planned,
+      entered: week.entered,
+      accumulatedPlanned,
+      accumulatedEntered,
+      net,
+      status,
+      isEditable: true
+    };
+  }
+  return result;
+}
+function canSubmitCalibration(prefixes) {
+  let shortfallCount = 0;
+  let pendingCount = 0;
+  for (const prefix of prefixes) {
+    for (const weekKey in prefix.weeks) {
+      const cell = prefix.weeks[weekKey];
+      if (cell.status === "shortfall") shortfallCount++;
+      if (cell.status === "pending") pendingCount++;
+    }
+  }
+  const canSubmit = shortfallCount === 0 && pendingCount === 0;
+  let message = "";
+  if (shortfallCount > 0) {
+    message = `Resolve ${shortfallCount} shortfall${shortfallCount > 1 ? "s" : ""} to submit`;
+  } else if (pendingCount > 0) {
+    message = `Enter production amounts for ${pendingCount} week${pendingCount > 1 ? "s" : ""}`;
+  } else {
+    message = "Ready to submit";
+  }
+  return { canSubmit, shortfallCount, pendingCount, message };
+}
+function CalibrationWeekCell({
+  className,
+  data,
+  unit,
+  onValueChange,
+  isFocused,
+  forcedRed = false,
+  isEmpty = false,
+  onAddClick,
+  ...props
+}) {
+  const inputRef = React22.useRef(null);
+  const [localValue, setLocalValue] = React22.useState(
+    data.entered !== null ? String(data.entered) : ""
+  );
+  const [isHovered, setIsHovered] = React22.useState(false);
+  const [isEditing, setIsEditing] = React22.useState(false);
+  React22.useEffect(() => {
+    setLocalValue(data.entered !== null ? String(data.entered) : "");
+  }, [data.entered]);
+  const unitLabel = formatCalibrationUnit(unit);
+  const effectiveStatus = forcedRed ? "forcedRed" : data.status;
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (val === "" || val === "-") {
+      onValueChange?.(null);
+    } else {
+      const numVal = parseFloat(val);
+      if (!isNaN(numVal)) {
+        onValueChange?.(numVal);
+      }
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (localValue === "" || localValue === "-") {
+      setLocalValue("");
+      onValueChange?.(null);
+    } else {
+      const numVal = parseFloat(localValue);
+      if (!isNaN(numVal)) {
+        setLocalValue(String(numVal));
+        onValueChange?.(numVal);
+      }
+    }
+  };
+  const handleAddClick = () => {
+    setIsEditing(true);
+    onAddClick?.();
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  };
+  const getContainerStyles = () => {
+    switch (effectiveStatus) {
+      case "valid":
+        return "border-l-2 border-l-green-500 bg-green-50/50 dark:bg-green-950/30";
+      case "shortfall":
+      case "forcedRed":
+        return "border-l-2 border-l-red-500 bg-red-50/50 dark:bg-red-950/30";
+      case "pending":
+      default:
+        return cn(
+          "bg-background",
+          isHovered ? "border-l-2 border-l-border" : "border-l-2 border-l-transparent"
+        );
+    }
+  };
+  const getInputStyles = () => {
+    switch (effectiveStatus) {
+      case "valid":
+        return "text-green-700 dark:text-green-400";
+      case "shortfall":
+      case "forcedRed":
+        return "text-red-700 dark:text-red-400 font-semibold";
+      default:
+        return "text-foreground";
+    }
+  };
+  const showAddButton = isEmpty && effectiveStatus === "pending" && !isEditing && data.entered === null;
+  if (showAddButton) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "calibration-week-cell",
+        "data-status": "empty",
+        className: cn(
+          "flex items-center justify-center h-[100px]",
+          "transition-all duration-200 ease-out",
+          "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+          "bg-background",
+          isHovered ? "border-l-2 border-l-border" : "border-l-2 border-l-transparent",
+          className
+        ),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: cn(
+              "h-10 w-10 rounded-full",
+              "text-muted-foreground/40 hover:text-muted-foreground hover:bg-muted/50",
+              "transition-all duration-200",
+              "shadow-[var(--j3m-shadow-sm)]"
+            ),
+            onClick: handleAddClick,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add production amount" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (isEmpty && forcedRed) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "calibration-week-cell",
+        "data-status": "forcedRed",
+        className: cn(
+          "flex flex-col items-center justify-center gap-2 h-[100px] px-3 py-2",
+          "transition-all duration-200 ease-out",
+          "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+          "border-l-2 border-l-red-500 bg-red-50/50 dark:bg-red-950/30",
+          className
+        ),
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-red-600 dark:text-red-400 text-center", children: "Behind schedule" }),
+          /* @__PURE__ */ jsx(NetBadge, { net: data.net, status: "shortfall" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calibration-week-cell",
+      "data-status": effectiveStatus,
+      className: cn(
+        "flex flex-col gap-2 px-3 py-2 h-[100px]",
+        // Hover lift effect with shadow (like planning table)
+        "transition-all duration-200 ease-out",
+        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+        getContainerStyles(),
+        className
+      ),
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground tracking-wide", children: "Accumulated" }),
+          /* @__PURE__ */ jsx(NetBadge, { net: data.net, status: forcedRed ? "shortfall" : data.status })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground tracking-wide", children: "Planned" }),
+          /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center px-2 py-0 bg-card border border-border rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: data.planned }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "text",
+              inputMode: "decimal",
+              value: localValue,
+              onChange: handleInputChange,
+              onBlur: handleBlur,
+              onFocus: () => setIsEditing(true),
+              disabled: !data.isEditable,
+              placeholder: "Enter amount",
+              className: cn(
+                "h-8 pl-3 pr-12 rounded-full text-sm font-semibold bg-background border-border",
+                // Placeholder: smaller, lighter, lower contrast
+                "placeholder:text-xs placeholder:font-normal placeholder:text-muted-foreground/50",
+                getInputStyles(),
+                !data.isEditable && "opacity-50 cursor-not-allowed"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground/70 pointer-events-none", children: unitLabel })
+        ] })
+      ]
+    }
+  );
+}
+function CommentPopover({
+  comments,
+  weekLabel,
+  availablePrefixes,
+  onAddComment,
+  open,
+  onOpenChange
+}) {
+  const [newCommentText, setNewCommentText] = React22.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React22.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22.useState(true);
+  const [showAddForm, setShowAddForm] = React22.useState(false);
+  const selectedPrefixName = React22.useMemo(() => {
+    const prefix = availablePrefixes.find((p) => p.id === selectedPrefixId);
+    return prefix?.name ?? "";
+  }, [availablePrefixes, selectedPrefixId]);
+  const handleSubmit = () => {
+    if (newCommentText.trim() && selectedPrefixId) {
+      onAddComment?.(newCommentText.trim(), selectedPrefixId, selectedPrefixName);
+      setNewCommentText("");
+      setSelectedPrefixId("");
+      setShowAddForm(false);
+      setViewCommentsOpen(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      setShowAddForm(false);
+      setSelectedPrefixId("");
+      setNewCommentText("");
+    }
+  };
+  const formatDate2 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  const prevOpenRef = React22.useRef(open);
+  React22.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+      setSelectedPrefixId("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CommentButton, { commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "w-full justify-between h-8 px-2",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+                      "Comments ",
+                      comments.length > 0 && `(${comments.length})`
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                      "h-4 w-4 transition-transform duration-200",
+                      viewCommentsOpen && "rotate-180"
+                    ) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "rounded-lg bg-muted/50 p-3 space-y-2",
+                  "aria-label": `Comment by ${comment.author} about ${comment.prefixName}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "text-[10px] px-2 py-0 h-5 font-medium bg-background",
+                        children: comment.prefixName
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+                  ]
+                },
+                comment.id
+              )) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+            /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: !showAddForm ? (
+              /* Add comment Button */
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "w-full justify-center gap-2 h-8",
+                  onClick: () => setShowAddForm(true),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                    "Add comment"
+                  ]
+                }
+              )
+            ) : (
+              /* Comment input form with smooth expand animation */
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "space-y-3 p-3 rounded-lg border border-border bg-muted/30",
+                    "animate-in fade-in-0 slide-in-from-top-2 duration-200"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxs(Label2, { htmlFor: "prefix-select", className: "text-xs font-medium", children: [
+                        "Applies to ",
+                        /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsxs(Select, { value: selectedPrefixId, onValueChange: setSelectedPrefixId, children: [
+                        /* @__PURE__ */ jsx(SelectTrigger, { id: "prefix-select", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select row/type..." }) }),
+                        /* @__PURE__ */ jsx(SelectContent, { children: availablePrefixes.map((prefix) => /* @__PURE__ */ jsx(SelectItem, { value: prefix.id, children: prefix.name }, prefix.id)) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsx(Label2, { htmlFor: "comment-text", className: "text-xs font-medium", children: "Comment" }),
+                      /* @__PURE__ */ jsx(
+                        Textarea,
+                        {
+                          id: "comment-text",
+                          placeholder: "Type your comment...",
+                          value: newCommentText,
+                          onChange: (e) => setNewCommentText(e.target.value),
+                          onKeyDown: handleKeyDown,
+                          className: "min-h-[80px] text-sm resize-none",
+                          autoFocus: true
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7",
+                            onClick: () => {
+                              setShowAddForm(false);
+                              setNewCommentText("");
+                              setSelectedPrefixId("");
+                            },
+                            children: "Cancel"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Button,
+                          {
+                            size: "sm",
+                            className: "h-7 gap-1",
+                            onClick: handleSubmit,
+                            disabled: !newCommentText.trim() || !selectedPrefixId,
+                            children: [
+                              /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                              "Save"
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function CalibrationWeekHeader({
+  className,
+  week,
+  comments = [],
+  showCommentButton = true,
+  availablePrefixes = [],
+  onAddComment,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calibration-week-header",
+      "data-current-week": week.isCurrentWeek,
+      className: cn(
+        "flex items-center justify-between gap-2 px-2 py-2 min-w-[200px]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(
+              "text-sm font-semibold tracking-tight",
+              week.isCurrentWeek ? "text-primary" : "text-foreground"
+            ), children: week.label }),
+            week.isCurrentWeek && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal text-muted-foreground/60", children: week.dateRange })
+        ] }),
+        showCommentButton && availablePrefixes.length > 0 && /* @__PURE__ */ jsx(
+          CommentPopover,
+          {
+            comments,
+            weekLabel: week.label,
+            availablePrefixes,
+            onAddComment
+          }
+        )
+      ]
+    }
+  );
+}
+function CalibrationTable({
+  className,
+  prefixes,
+  supplierName,
+  status = "draft",
+  config = {}
+}) {
+  const {
+    weekCount = 8,
+    startDate,
+    allowTimelineExtension = true,
+    maxEarlierWeeks = 4,
+    showToolbar = true,
+    showPagination = true,
+    pageSizeOptions = [10, 20, 30],
+    defaultPageSize = 10,
+    stickyRowHeader = true,
+    maxHeight = "500px",
+    onCellChange,
+    onSubmit,
+    onAddComment,
+    onAddEarlierWeek
+  } = config;
+  const calculatedStartDate = React22.useMemo(() => {
+    if (startDate) return startDate;
+    let earliest = null;
+    for (const prefix of prefixes) {
+      for (const weekKey in prefix.weeks) {
+        const cell = prefix.weeks[weekKey];
+        if (cell.planned > 0) {
+          const match = weekKey.match(/(\d{4})-W(\d{2})/);
+          if (match) {
+            const year = parseInt(match[1]);
+            const week = parseInt(match[2]);
+            const date = new Date(year, 0, 1 + (week - 1) * 7);
+            if (earliest === null || date < earliest) {
+              earliest = date;
+            }
+          }
+        }
+      }
+    }
+    return earliest ?? /* @__PURE__ */ new Date();
+  }, [startDate, prefixes]);
+  const [additionalWeeks, setAdditionalWeeks] = React22.useState(0);
+  const weeks = React22.useMemo(() => {
+    const start = new Date(calculatedStartDate);
+    start.setDate(start.getDate() - additionalWeeks * 7);
+    return generateWeeks(start, weekCount + additionalWeeks);
+  }, [calculatedStartDate, weekCount, additionalWeeks]);
+  React22.useMemo(() => {
+    const currentWeek = weeks.find((w) => w.isCurrentWeek);
+    return currentWeek ? getWeekKey(currentWeek.startDate) : null;
+  }, [weeks]);
+  const [currentPage, setCurrentPage] = React22.useState(0);
+  const [pageSize, setPageSize] = React22.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React22.useState("");
+  const filteredPrefixes = React22.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 = React22.useMemo(() => {
+    const start = currentPage * pageSize;
+    return filteredPrefixes.slice(start, start + pageSize);
+  }, [filteredPrefixes, currentPage, pageSize]);
+  React22.useMemo(
+    () => canSubmitCalibration(prefixes),
+    [prefixes]
+  );
+  const handleAddEarlierWeek = () => {
+    if (additionalWeeks < maxEarlierWeeks) {
+      setAdditionalWeeks((prev) => prev + 1);
+      onAddEarlierWeek?.();
+    }
+  };
+  const handleCellChange = (prefixId, weekKey, value) => {
+    onCellChange?.(prefixId, weekKey, value);
+  };
+  const handleAddWeekComment = (weekKey, text, prefixId, prefixName) => {
+    onAddComment?.(prefixId, weekKey, text);
+  };
+  const getWeekComments = (weekKey) => {
+    const allComments = [];
+    for (const prefix of prefixes) {
+      const weekComments = prefix.comments?.filter((c) => c.weekKey === weekKey) ?? [];
+      allComments.push(...weekComments);
+    }
+    return allComments;
+  };
+  const availablePrefixes = React22.useMemo(
+    () => prefixes.map((p) => ({ id: p.id, name: p.name })),
+    [prefixes]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calibration-table",
+      className: cn("flex flex-col gap-4", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "Weekly Production Calibration" }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Review required weekly production and confirm achievable output at the selected checkpoint." })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                placeholder: "Search prefixes...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "h-8 w-[200px] lg:w-[300px]"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: allowTimelineExtension && additionalWeeks < maxEarlierWeeks && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "gap-2",
+                onClick: handleAddEarlierWeek,
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+                  "Add earlier week"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-background shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxs(
+            ScrollArea,
+            {
+              className: "w-full",
+              style: { maxHeight },
+              children: [
+                /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+                  /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-20", children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                            CalibrationWeekHeader,
+                            {
+                              week,
+                              comments: weekComments,
+                              showCommentButton: true,
+                              availablePrefixes,
+                              onAddComment: (text, prefixId, prefixName) => handleAddWeekComment(weekKey, text, prefixId)
+                            }
+                          )
+                        },
+                        weekKey
+                      );
+                    })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { className: "bg-background", children: paginatedPrefixes.length > 0 ? paginatedPrefixes.map((prefix) => {
+                    const sortedWeekKeys = weeks.map((w) => getWeekKey(w.startDate));
+                    let hasDeficit = false;
+                    const forcedRedMap = {};
+                    for (const weekKey of sortedWeekKeys) {
+                      const cellData = prefix.weeks[weekKey];
+                      if (hasDeficit) {
+                        forcedRedMap[weekKey] = true;
+                      } else if (cellData && cellData.status === "shortfall") {
+                        hasDeficit = true;
+                        forcedRedMap[weekKey] = false;
+                      } else {
+                        forcedRedMap[weekKey] = false;
+                      }
+                    }
+                    return /* @__PURE__ */ jsxs("tr", { className: "border-b border-border last:border-b-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          className: cn(
+                            "p-0 align-top border-r border-border bg-background",
+                            stickyRowHeader && "sticky left-0 z-10 min-w-[200px]",
+                            // Right shadow using Quantum token
+                            stickyRowHeader && "shadow-[var(--j3m-shadow-sticky-edge)]"
+                          ),
+                          children: /* @__PURE__ */ jsx(RowHeaderCell, { data: prefix, showProgress: true })
+                        }
+                      ),
+                      weeks.map((week) => {
+                        const weekKey = getWeekKey(week.startDate);
+                        const cellData = prefix.weeks[weekKey];
+                        const isForcedRed = forcedRedMap[weekKey] ?? false;
+                        const isEmpty = !cellData || cellData.planned === 0;
+                        const effectiveCellData = cellData ?? {
+                          planned: 0,
+                          entered: null,
+                          accumulatedPlanned: 0,
+                          accumulatedEntered: 0,
+                          net: 0,
+                          status: "pending",
+                          isEditable: true
+                        };
+                        return /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            className: "p-0 align-top border-r border-border last:border-r-0 min-w-[220px] bg-background",
+                            children: /* @__PURE__ */ jsx(
+                              CalibrationWeekCell,
+                              {
+                                data: effectiveCellData,
+                                unit: prefix.unit,
+                                onValueChange: (value) => handleCellChange(prefix.id, weekKey, value),
+                                forcedRed: isForcedRed,
+                                isEmpty,
+                                onAddClick: () => {
+                                }
+                              }
+                            )
+                          },
+                          weekKey
+                        );
+                      })
+                    ] }, prefix.id);
+                  }) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      colSpan: weeks.length + 1,
+                      className: "h-24 text-center text-muted-foreground bg-background",
+                      children: "No prefixes found."
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+                /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" })
+              ]
+            }
+          ) })
+        ] }),
+        showPagination && filteredPrefixes.length > pageSize && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: pageSize,
+                onChange: (e) => {
+                  setPageSize(Number(e.target.value));
+                  setCurrentPage(0);
+                },
+                className: "h-8 w-16 rounded-md border bg-background px-2 text-sm",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Page ",
+              currentPage + 1,
+              " of ",
+              Math.ceil(filteredPrefixes.length / pageSize)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage === 0,
+                  onClick: () => setCurrentPage(0),
+                  children: "\xAB\xAB"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage === 0,
+                  onClick: () => setCurrentPage((prev) => prev - 1),
+                  children: "\xAB"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage >= Math.ceil(filteredPrefixes.length / pageSize) - 1,
+                  onClick: () => setCurrentPage((prev) => prev + 1),
+                  children: "\xBB"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage >= Math.ceil(filteredPrefixes.length / pageSize) - 1,
+                  onClick: () => setCurrentPage(Math.ceil(filteredPrefixes.length / pageSize) - 1),
+                  children: "\xBB\xBB"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CommentDialog({
+  prefixes,
+  weeks,
+  onAddComment,
+  triggerVariant = "outline",
+  open,
+  onOpenChange
+}) {
+  const [selectedPrefixId, setSelectedPrefixId] = React22.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React22.useState("");
+  const [commentText, setCommentText] = React22.useState("");
+  const currentWeek = React22.useMemo(
+    () => weeks.find((w) => w.isCurrentWeek),
+    [weeks]
+  );
+  React22.useEffect(() => {
+    if (open) {
+      setSelectedPrefixId(prefixes[0]?.id ?? "");
+      setSelectedWeekKey(currentWeek ? getWeekKey(currentWeek.startDate) : weeks[0] ? getWeekKey(weeks[0].startDate) : "");
+      setCommentText("");
+    }
+  }, [open, prefixes, weeks, currentWeek]);
+  const handleSave = () => {
+    if (selectedPrefixId && selectedWeekKey && commentText.trim()) {
+      onAddComment?.(selectedPrefixId, selectedWeekKey, commentText.trim());
+      onOpenChange?.(false);
+    }
+  };
+  const isValid = selectedPrefixId && selectedWeekKey && commentText.trim();
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: triggerVariant, size: "sm", className: "gap-2", children: [
+      /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-4 w-4" }),
+      "Add comment"
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Add Comment" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Add a comment to a specific prefix and week. Comments help communicate production updates and issues." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "prefix-select", children: "Prefix / Element Type" }),
+          /* @__PURE__ */ jsxs(Select, { value: selectedPrefixId, onValueChange: setSelectedPrefixId, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "prefix-select", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select prefix..." }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: prefixes.map((prefix) => /* @__PURE__ */ jsx(SelectItem, { value: prefix.id, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: prefix.name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+                "(",
+                prefix.typeCode,
+                ")"
+              ] })
+            ] }) }, prefix.id)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "week-select", children: "Week" }),
+          /* @__PURE__ */ jsxs(Select, { value: selectedWeekKey, onValueChange: setSelectedWeekKey, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "week-select", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select week..." }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: weeks.map((week) => {
+              const weekKey = getWeekKey(week.startDate);
+              return /* @__PURE__ */ jsx(SelectItem, { value: weekKey, children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: cn(
+                  "font-medium",
+                  week.isCurrentWeek && "text-primary"
+                ), children: week.label }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: week.dateRange }),
+                week.isCurrentWeek && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-primary font-medium", children: "(Current)" })
+              ] }) }, weekKey);
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "comment-text", children: "Comment" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "comment-text",
+              placeholder: "Enter your comment...",
+              value: commentText,
+              onChange: (e) => setCommentText(e.target.value),
+              className: "min-h-[100px] resize-none"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange?.(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: !isValid, children: "Save comment" })
+      ] })
+    ] })
+  ] });
+}
+function getStatusBadge(status) {
+  switch (status) {
+    case "draft":
+      return { variant: "secondary", label: "DRAFT", color: "bg-blue-500" };
+    case "submitted":
+      return { variant: "secondary", label: "SUBMITTED", color: "bg-amber-500" };
+    case "approved":
+      return { variant: "secondary", label: "APPROVED", color: "bg-green-500" };
+    case "rejected":
+      return { variant: "destructive", label: "REJECTED", color: "bg-red-500" };
+  }
+}
+function formatDate(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric"
+  });
+}
+function SubmitCalibrationBar({
+  className,
+  status,
+  lastSaved,
+  canSubmit,
+  shortfallCount,
+  pendingCount,
+  message,
+  onSubmit,
+  onSaveDraft,
+  ...props
+}) {
+  const statusBadge = getStatusBadge(status);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "submit-calibration-bar",
+      className: cn(
+        "flex items-center justify-between gap-4 px-4 py-4",
+        "bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          !canSubmit && (shortfallCount > 0 || pendingCount > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: message })
+          ] }),
+          canSubmit && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: statusBadge.variant,
+              className: "flex items-center gap-2 px-3 py-1 rounded-full",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 rounded-full", statusBadge.color) }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: statusBadge.label })
+              ]
+            }
+          ),
+          lastSaved && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "gap-2 rounded-full",
+              disabled: true,
+              children: [
+                /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: formatDate(lastSaved) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              className: "rounded-full px-4 min-w-[140px]",
+              disabled: !canSubmit || status === "submitted" || status === "approved",
+              onClick: onSubmit,
+              children: status === "submitted" ? "Submitted" : status === "approved" ? "Approved" : "Submit calibration"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/event-calendar/types.ts
+var DEFAULT_WORKING_HOURS = {
+  0: { from: 0, to: 0 },
+  // Sunday - closed
+  1: { from: 9, to: 17 },
+  // Monday
+  2: { from: 9, to: 17 },
+  // Tuesday
+  3: { from: 9, to: 17 },
+  // Wednesday
+  4: { from: 9, to: 17 },
+  // Thursday
+  5: { from: 9, to: 17 },
+  // Friday
+  6: { from: 0, to: 0 }
+  // Saturday - closed
+};
+var DEFAULT_VISIBLE_HOURS = { from: 0, to: 24 };
+var EVENT_COLORS = {
+  blue: {
+    bg: "bg-blue-500/20",
+    text: "text-blue-700 dark:text-blue-300",
+    border: "border-blue-500"
+  },
+  green: {
+    bg: "bg-green-500/20",
+    text: "text-green-700 dark:text-green-300",
+    border: "border-green-500"
+  },
+  red: {
+    bg: "bg-red-500/20",
+    text: "text-red-700 dark:text-red-300",
+    border: "border-red-500"
+  },
+  yellow: {
+    bg: "bg-yellow-500/20",
+    text: "text-yellow-700 dark:text-yellow-300",
+    border: "border-yellow-500"
+  },
+  purple: {
+    bg: "bg-purple-500/20",
+    text: "text-purple-700 dark:text-purple-300",
+    border: "border-purple-500"
+  },
+  orange: {
+    bg: "bg-primary/20",
+    text: "text-primary dark:text-orange-300",
+    border: "border-primary"
+  }
+};
+var VIEW_LABELS = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  year: "Year",
+  agenda: "Agenda"
+};
+var BADGE_VARIANT_LABELS = {
+  dot: "Dot",
+  colored: "Colored",
+  mixed: "Mixed"
+};
+var CalendarContext = React22.createContext(null);
+function EventCalendarProvider({
+  children,
+  events: initialEvents = [],
+  users: initialUsers = [],
+  defaultDate = /* @__PURE__ */ new Date(),
+  defaultView = "month",
+  defaultBadgeVariant = "colored",
+  defaultUserId = null,
   defaultWorkingHours = DEFAULT_WORKING_HOURS,
   defaultVisibleHours = DEFAULT_VISIBLE_HOURS,
   onEventAdd,
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React15.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React15.useState(defaultUserId);
-  const [events, setEventsState] = React15.useState(initialEvents);
-  const [users] = React15.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React15.useState(defaultBadgeVariant);
-  const [view, setView] = React15.useState(defaultView);
-  const [workingHours, setWorkingHours] = React15.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React15.useState(defaultVisibleHours);
-  React15.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React22.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React22.useState(defaultUserId);
+  const [events, setEventsState] = React22.useState(initialEvents);
+  const [users] = React22.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React22.useState(defaultBadgeVariant);
+  const [view, setView] = React22.useState(defaultView);
+  const [workingHours, setWorkingHours] = React22.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React22.useState(defaultVisibleHours);
+  React22.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React15.useCallback((newEvents) => {
+  const setEvents = React22.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React15.useCallback((event) => {
+  const addEvent = React22.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React15.useCallback((event) => {
+  const updateEvent = React22.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React15.useCallback((eventId) => {
+  const deleteEvent = React22.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React15.useCallback(() => {
+  const goToToday = React22.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React15.useCallback(() => {
+  const goToPrevious = React22.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5974,7 +9246,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React15.useCallback(() => {
+  const goToNext = React22.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -5992,7 +9264,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React15.useMemo(
+  const contextValue = React22.useMemo(
     () => ({
       // State
       selectedDate,
@@ -6039,7 +9311,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React15.useContext(CalendarContext);
+  const context = React22.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -6047,14 +9319,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React15.useMemo(() => {
+  return React22.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React15.useMemo(() => {
+  return React22.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -6428,7 +9700,7 @@ function getViewDateRange(date, view) {
       return { start: startOfMonth(date), end: endOfMonth(date) };
   }
 }
-function formatDateRange(start, end) {
+function formatDateRange2(start, end) {
   if (isSameDay(start, end)) {
     return format(start, "MMM d, yyyy");
   }
@@ -6612,8 +9884,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React15.useState(/* @__PURE__ */ new Date());
-  React15.useEffect(() => {
+  const [now, setNow] = React22.useState(/* @__PURE__ */ new Date());
+  React22.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -6650,24 +9922,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React15.createContext(null);
+var DragContext = React22.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React15.useState(null);
-  const [isDragging, setIsDragging] = React15.useState(false);
+  const [draggedEvent, setDraggedEventState] = React22.useState(null);
+  const [isDragging, setIsDragging] = React22.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React15.useCallback((event) => {
+  const setDraggedEvent = React22.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React15.useCallback((newStartDate) => {
+  const handleDrop = React22.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -6680,7 +9952,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React15.useMemo(
+  const contextValue = React22.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -6691,7 +9963,7 @@ function DragProvider({
   return /* @__PURE__ */ jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React15.useContext(DragContext);
+  const context = React22.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -6736,7 +10008,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React15.useState(false);
+  const [isOver, setIsOver] = React22.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -6774,23 +10046,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React15.useState(false);
-  const dropTargetDate = React15.useMemo(() => {
+  const [isOver, setIsOver] = React22.useState(false);
+  const dropTargetDate = React22.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React15.useCallback((e) => {
+  const handleDragOver = React22.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React15.useCallback(() => {
+  const handleDragLeave = React22.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React15.useCallback((e) => {
+  const handleDrop = React22.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -6817,13 +10089,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 = React15.useCallback((e) => {
+  const handleDragStart = React22.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React15.useCallback(() => {
+  const handleDragEnd = React22.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -6864,15 +10136,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React15.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React15.useMemo(
+  const cells = React22.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React15.useMemo(
+  const eventPositions = React22.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -7054,7 +10326,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React15.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7260,8 +10532,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React15.useState(/* @__PURE__ */ new Date());
-  React15.useEffect(() => {
+  const [currentTime, setCurrentTime] = React22.useState(/* @__PURE__ */ new Date());
+  React22.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7344,7 +10616,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React15.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -7352,7 +10624,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React15.useMemo(() => {
+  const currentEvents = React22.useMemo(() => {
     if (!isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -7576,8 +10848,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React15.useState(/* @__PURE__ */ new Date());
-  React15.useEffect(() => {
+  const [currentTime, setCurrentTime] = React22.useState(/* @__PURE__ */ new Date());
+  React22.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -7611,7 +10883,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React15.useMemo(() => {
+  const months = React22.useMemo(() => {
     const yearStart = startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => addMonths(yearStart, i));
   }, [selectedDate]);
@@ -7734,11 +11006,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React15.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React15.useMemo(() => {
+  const eventsByDay = React22.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = parseISO(event.startDate);
@@ -7931,7 +11203,7 @@ function CalendarHeader({
   const filteredEvents = useFilteredEvents();
   const eventCount = filteredEvents.length;
   const { start: rangeStart, end: rangeEnd } = getViewDateRange(selectedDate, view);
-  const dateRangeLabel = formatDateRange(rangeStart, rangeEnd);
+  const dateRangeLabel = formatDateRange2(rangeStart, rangeEnd);
   const getInitials = (name) => {
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
   };
@@ -8203,16 +11475,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React15.useState("");
-  const [description, setDescription] = React15.useState("");
-  const [startDate, setStartDate] = React15.useState("");
-  const [startTime, setStartTime] = React15.useState("");
-  const [endDate, setEndDate] = React15.useState("");
-  const [endTime, setEndTime] = React15.useState("");
-  const [color, setColor] = React15.useState("blue");
-  const [userId, setUserId] = React15.useState("");
-  const [isSubmitting, setIsSubmitting] = React15.useState(false);
-  React15.useEffect(() => {
+  const [title, setTitle] = React22.useState("");
+  const [description, setDescription] = React22.useState("");
+  const [startDate, setStartDate] = React22.useState("");
+  const [startTime, setStartTime] = React22.useState("");
+  const [endDate, setEndDate] = React22.useState("");
+  const [endTime, setEndTime] = React22.useState("");
+  const [color, setColor] = React22.useState("blue");
+  const [userId, setUserId] = React22.useState("");
+  const [isSubmitting, setIsSubmitting] = React22.useState(false);
+  React22.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = parseISO(event.startDate);
@@ -8435,7 +11707,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React15.useState("");
+  const [title, setTitle] = React22.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -8502,8 +11774,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React15.useState(visibleHours.from);
-  const [to, setTo] = React15.useState(visibleHours.to);
+  const [from, setFrom] = React22.useState(visibleHours.from);
+  const [to, setTo] = React22.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -8549,7 +11821,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React15.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React22.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -8698,8 +11970,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React15.useState(false);
-  React15.useEffect(() => {
+  const [matches, setMatches] = React22.useState(false);
+  React22.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -8751,11 +12023,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React15.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React15.useState(false);
-  const [selectedEvent, setSelectedEvent] = React15.useState(null);
-  const [dialogMode, setDialogMode] = React15.useState("add");
-  const [defaultDate, setDefaultDate] = React15.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React22.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React22.useState(false);
+  const [selectedEvent, setSelectedEvent] = React22.useState(null);
+  const [dialogMode, setDialogMode] = React22.useState("add");
+  const [defaultDate, setDefaultDate] = React22.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -8914,6 +12186,6 @@ function CalendarView({
   }
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DateBadge, DayView, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateDropDates, calculateMonthEventPositions, cardVariants, createDefaultEvent, formatDateRange, formatTime, generateEventId, getCalendarCells, getCurrentEvents, getDayHours, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getMonthCellEvents, getMonthDays, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getYearMonths, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useIsMobile, useSearchShortcut, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, CalibrationTable, CalibrationWeekCell, CalibrationWeekHeader, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommentButton, CommentDialog, CommentPopover, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DateBadge, DayView, DeliveryIndicator, DeliveryIndicators, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetBadge, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlanningTable, PlanningTableToolbar, PlanningWeekCommentPopover, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowHeaderCell, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, SubmitCalibrationBar, SupplierCell, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekCell, WeekDetailDialog, WeekHeader, WeekView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateCalibrationCells, calculateDropDates, calculateMonthEventPositions, canSubmitCalibration, cardVariants, createDefaultEvent, deliveryIndicatorVariants, formatCalibrationUnit, formatDateRange2 as formatDateRange, formatProductionUnit, formatTime, generateColumns, generateEventId, generateLocationOptions, generateWeekColumns, generateWeeks, getCalendarCells, getCommentLocationLabel, getCurrentEvents, getDayHours, getElementShipmentStatus, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getISOWeek, getMonthCellEvents, getMonthDays, getShipmentStatusLabel, getSupplierColumn, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getWeekKey, getYearMonths, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useIsMobile, useSearchShortcut, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map