@j3m-quantum/ui 1.6.1 → 1.7.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React17 = require('react');
+var React22 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -63,7 +63,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -96,8 +96,8 @@ var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrim
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React17__namespace.useState(void 0);
-  React17__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React22__namespace.useState(void 0);
+  React22__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -138,7 +138,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React17__namespace.forwardRef(
+var Button = React22__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -502,7 +502,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React17__namespace.useMemo(
+  const _values = React22__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -788,7 +788,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React17__namespace.createContext({
+var ToggleGroupContext = React22__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -825,7 +825,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React17__namespace.useContext(ToggleGroupContext);
+  const context = React22__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -855,7 +855,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React17__namespace.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React22__namespace.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1275,7 +1275,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React17__namespace.createContext(
+var FormFieldContext = React22__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1284,8 +1284,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React17__namespace.useContext(FormFieldContext);
-  const itemContext = React17__namespace.useContext(FormItemContext);
+  const fieldContext = React22__namespace.useContext(FormFieldContext);
+  const itemContext = React22__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1302,11 +1302,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React17__namespace.createContext(
+var FormItemContext = React22__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React17__namespace.useId();
+  const id = React22__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1554,7 +1554,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React17.useMemo(() => {
+  const content = React22.useMemo(() => {
     if (children) {
       return children;
     }
@@ -2408,8 +2408,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React17__namespace.useRef(null);
-  React17__namespace.useEffect(() => {
+  const ref = React22__namespace.useRef(null);
+  React22__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2430,9 +2430,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React17__namespace.createContext(null);
+var CarouselContext = React22__namespace.createContext(null);
 function useCarousel() {
-  const context = React17__namespace.useContext(CarouselContext);
+  const context = React22__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2454,20 +2454,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React17__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React17__namespace.useState(false);
-  const onSelect = React17__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React22__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React22__namespace.useState(false);
+  const onSelect = React22__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React17__namespace.useCallback(() => {
+  const scrollPrev = React22__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React17__namespace.useCallback(() => {
+  const scrollNext = React22__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React17__namespace.useCallback(
+  const handleKeyDown = React22__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2479,11 +2479,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React17__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React17__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2616,9 +2616,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React17__namespace.createContext(null);
+var ChartContext = React22__namespace.createContext(null);
 function useChart() {
-  const context = React17__namespace.useContext(ChartContext);
+  const context = React22__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2631,7 +2631,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React17__namespace.useId();
+  const uniqueId = React22__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2692,7 +2692,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React17__namespace.useMemo(() => {
+  const tooltipLabel = React22__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3348,6 +3348,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "transform -rotate-90",
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: cn("transition-all", colors.track),
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: children ? children : isComplete && showCheckmark ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-6 w-6", colors.text) }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-sm font-semibold tabular-nums", colors.text), children: [
+          Math.round(clampedValue),
+          "%"
+        ] }) })
+      ]
+    }
+  );
+}
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -3395,8 +3494,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React17__namespace.useState("light");
-  React17__namespace.useEffect(() => {
+  const [theme, setTheme] = React22__namespace.useState("light");
+  React22__namespace.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -4045,7 +4144,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React17__namespace.forwardRef(
+var SearchTrigger = React22__namespace.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -4081,7 +4180,7 @@ var SearchTrigger = React17__namespace.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React17__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -5056,9 +5155,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React17__namespace.createContext(null);
+var SidebarContext = React22__namespace.createContext(null);
 function useSidebar() {
-  const context = React17__namespace.useContext(SidebarContext);
+  const context = React22__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5074,10 +5173,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React17__namespace.useState(false);
-  const [_open, _setOpen] = React17__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React22__namespace.useState(false);
+  const [_open, _setOpen] = React22__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React17__namespace.useCallback(
+  const setOpen = React22__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5089,10 +5188,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React17__namespace.useCallback(() => {
+  const toggleSidebar = React22__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React17__namespace.useEffect(() => {
+  React22__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5103,7 +5202,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React17__namespace.useMemo(
+  const contextValue = React22__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5561,7 +5660,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React17__namespace.useMemo(() => {
+  const width = React22__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5704,7 +5803,7 @@ var sectionVariants = classVarianceAuthority.cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React17__namespace.forwardRef(
+var Section = React22__namespace.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
@@ -5716,7 +5815,7 @@ var Section = React17__namespace.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React17__namespace.forwardRef(
+var SectionHeader = React22__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5731,7 +5830,7 @@ var SectionHeader = React17__namespace.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React17__namespace.forwardRef(
+var SectionTitle = React22__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h2",
     {
@@ -5745,7 +5844,7 @@ var SectionTitle = React17__namespace.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React17__namespace.forwardRef(
+var SectionDescription = React22__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
@@ -5759,7 +5858,7 @@ var SectionDescription = React17__namespace.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React17__namespace.forwardRef(
+var SectionContent = React22__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5773,7 +5872,7 @@ var SectionContent = React17__namespace.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React17__namespace.forwardRef(
+var SectionFooter = React22__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5998,7 +6097,7 @@ function SiteHeader({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--header-height,3.5rem)] w-full items-center gap-[var(--j3m-spacing-s)] px-[var(--j3m-spacing-m)]", children: [
         trigger,
         trigger && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React17__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -6186,46 +6285,44 @@ function PlanningTableToolbar({
   );
 }
 function getBadgeVariant(badgeType) {
-  const variantMap = {
-    Welded: "secondary",
-    Painted: "secondary",
-    Glazed: "secondary",
-    Delivered: "secondary",
-    Cured: "secondary",
-    Assembled: "secondary",
-    Tested: "secondary",
-    Sealed: "secondary"
-  };
-  return variantMap[badgeType] || "secondary";
+  return "outline";
 }
 function SupplierCell({
   className,
   supplier,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const spacingClasses = "px-[var(--j3m-spacing-xs)] pt-[var(--j3m-spacing-s)] pb-2";
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-slot": "supplier-cell",
       className: cn(
-        "flex flex-col justify-center gap-1 py-3 px-4 w-[200px] h-[72px]",
+        // 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__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold leading-tight text-foreground", children: supplier.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Badge,
-            {
-              variant: getBadgeVariant(supplier.badgeType),
-              className: "text-[10px] px-1.5 py-0 h-5 font-normal",
-              children: supplier.badgeType
-            }
-          ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: supplier.name }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: supplier.scope })
-        ] })
-      ]
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Flag, { className: "h-2.5 w-2.5" }),
+              supplier.badgeType
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -6246,18 +6343,18 @@ function getRowStatus(status) {
   if (status === "delayed") return "warning";
   return "normal";
 }
-var riskColorClasses = {
+var statusFillClasses = {
   normal: {
-    border: "border-l-green-500",
-    bg: "bg-green-50 dark:bg-green-950/50"
+    border: "border-l-[3px] border-l-green-500",
+    bg: "bg-green-50/50 dark:bg-green-950/30"
   },
   warning: {
-    border: "border-l-amber-500",
-    bg: "bg-amber-50 dark:bg-amber-950/50"
+    border: "border-l-[3px] border-l-amber-500",
+    bg: "bg-amber-50/50 dark:bg-amber-950/30"
   },
   critical: {
-    border: "border-l-red-500",
-    bg: "bg-red-50 dark:bg-red-950/50"
+    border: "border-l-[3px] border-l-red-500",
+    bg: "bg-red-50/50 dark:bg-red-950/30"
   }
 };
 var statusColors = {
@@ -6286,6 +6383,24 @@ function WeekCell({
   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();
@@ -6297,14 +6412,7 @@ function WeekCell({
       onCellClick();
     }
   };
-  const combinedRisk = data.type === "data" ? getCombinedRiskLevel(data) : "normal";
-  const cardColors = riskColorClasses[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 spacingClasses = "px-[var(--j3m-spacing-xs)] pt-[var(--j3m-spacing-s)] pb-2";
   if (data.type === "empty") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -6313,8 +6421,9 @@ function WeekCell({
         "data-state": "empty",
         "data-current-week": isCurrentWeek,
         className: cn(
-          "flex w-[120px] h-[72px] items-center justify-center cursor-default",
-          isCurrentWeek && "bg-primary/5",
+          "flex h-[80px] items-center justify-center cursor-default",
+          "bg-background",
+          spacingClasses,
           className
         ),
         ...props,
@@ -6323,7 +6432,7 @@ function WeekCell({
     );
   }
   if (data.type === "no-logistics") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         "data-slot": "week-cell",
@@ -6334,44 +6443,36 @@ function WeekCell({
         role: "button",
         tabIndex: 0,
         className: cn(
-          "flex flex-col w-[120px] h-[72px] justify-center p-1",
-          "cursor-pointer",
-          isCurrentWeek && "bg-primary/5",
+          "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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-col w-full h-full justify-center gap-1.5 rounded-md border-l-[3px] px-2 py-1.5",
-              "border-l-muted-foreground/30 bg-muted/50",
-              // Hover lift effect with shadow
-              "transition-all duration-200 ease-out",
-              "hover:-translate-y-0.5 hover:shadow-md hover:bg-muted/70"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-muted-foreground/20 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "h-full bg-muted-foreground/40 rounded-full",
-                    style: { width: `${productionProgress}%` }
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3.5 w-3.5 shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: "No logistics" })
-              ] })
-            ]
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-muted-foreground/20 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground/40 rounded-full",
+                style: { width: `${productionProgress}%` }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: "No logistics" })
+          ] })
+        ]
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "week-cell",
@@ -6383,80 +6484,150 @@ function WeekCell({
       role: "button",
       tabIndex: 0,
       className: cn(
-        "flex flex-col w-[120px] h-[72px] justify-center p-1",
+        "flex flex-col h-[80px] justify-center gap-2",
         "cursor-pointer",
-        isCurrentWeek && "bg-primary/5",
+        // 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__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col w-full h-full justify-center gap-1.5 rounded-md border-l-[3px] px-2 py-1.5",
-            cardColors.border,
-            cardColors.bg,
-            // Hover lift effect with shadow
-            "transition-all duration-200 ease-out",
-            "hover:-translate-y-0.5 hover:shadow-md"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3.5 w-3.5 shrink-0", productionColors.icon) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn("h-full rounded-full transition-all", productionColors.progress),
-                  style: { width: `${productionProgress}%` }
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-3.5 w-3.5 shrink-0", deliveryColors.icon) }),
-              deliveryCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-[10px] font-medium", deliveryColors.text), children: [
-                deliveryCount,
-                "x delivery"
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2014" })
-            ] })
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3.5 w-3.5 shrink-0", productionColors.icon) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("h-full rounded-full transition-all", productionColors.progress),
+              style: { width: `${productionProgress}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-3.5 w-3.5 shrink-0", deliveryColors.icon) }),
+          deliveryCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-[10px] font-medium", deliveryColors.text), children: [
+            deliveryCount,
+            "x delivery"
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2014" })
+        ] }),
+        deliveryCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "flex-1 max-w-[24px]",
+                title: delivery.label || `Delivery ${index + 1}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("h-full rounded-full transition-all", getDeliveryStatusColor(delivery.status)),
+                    style: { width: `${deliveryProgress}%` }
+                  }
+                ) })
+              },
+              delivery.id || index
+            );
+          }),
+          deliveryCount > 5 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[8px] text-muted-foreground", children: [
+            "+",
+            deliveryCount - 5
+          ] })
+        ] })
+      ]
     }
   );
 }
-function WeekHeader({
+function CommentButton({
   className,
-  week,
+  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__ */ jsxRuntime.jsxs(
-    "div",
+    Button,
     {
-      "data-slot": "week-header",
-      "data-current-week": week.isCurrentWeek,
+      variant: "outline",
+      size: "icon",
       className: cn(
-        "flex flex-col justify-center gap-0.5 w-[120px] text-left",
+        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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-            "text-sm font-medium",
-            week.isCurrentWeek ? "text-primary" : "text-foreground"
-          ), children: week.label }),
-          week.isCurrentWeek && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground whitespace-nowrap", children: week.dateRange })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: cn(iconSize, hasComments && "text-primary") }),
+        hasComments && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -6517,18 +6688,325 @@ function formatProductionUnit(unit) {
   };
   return unitLabels[unit] || unit;
 }
-function SupplierColumnHeader({
-  column
+function LocationIcon({ type }) {
+  if (type === "production") {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-3 w-3" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3 w-3" });
+}
+function PlanningWeekCommentPopover({
+  comments,
+  weekLabel,
+  weekKey,
+  locationOptions,
+  onAddComment,
+  onCommentClick,
+  open,
+  onOpenChange
+}) {
+  const [newCommentText, setNewCommentText] = React22__namespace.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React22__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
+  const selectedLocation = React22__namespace.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__namespace.useRef(open);
+  React22__namespace.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+      setSelectedLocationId("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CommentButton, { size: "sm", commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
+                  "Comments ",
+                  comments.length > 0 && `(${comments.length})`
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+                  "h-4 w-4 transition-transform duration-200",
+                  viewCommentsOpen && "rotate-180"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          Badge,
+                          {
+                            variant: "outline",
+                            className: "text-[10px] px-2 py-0 h-5 font-medium bg-background gap-1",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, { type: comment.location.type }),
+                              locationLabel
+                            ]
+                          }
+                        ),
+                        hasLocation && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
+                    ]
+                  },
+                  comment.id
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-2" }),
+            !showAddForm ? /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full justify-center gap-2 h-8",
+                onClick: () => setShowAddForm(true),
+                disabled: locationOptions.length === 0,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+                  locationOptions.length === 0 ? "No suppliers available" : "Add comment"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: "supplier-prefix-select", className: "text-xs font-medium", children: [
+                  "Supplier / Prefix ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedLocationId, onValueChange: setSelectedLocationId, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "supplier-prefix-select", size: "sm", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select supplier / prefix..." }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: locationOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, { type: option.type }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                  ] }) }, option.id)) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "comment-text", className: "text-xs font-medium", children: "Comment" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-7",
+                      onClick: () => {
+                        setShowAddForm(false);
+                        setNewCommentText("");
+                        setSelectedLocationId("");
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 gap-1",
+                      onClick: handleSubmit,
+                      disabled: !newCommentText.trim() || !selectedLocationId,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs(
-    Button,
+    "div",
     {
-      variant: "ghost",
-      size: "sm",
-      className: "-ml-3 h-8 data-[state=open]:bg-accent",
-      onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Supplier / Scope" }),
+      "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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "text-sm font-semibold tracking-tight",
+              week.isCurrentWeek ? "text-primary" : "text-foreground"
+            ), children: week.label }),
+            week.isCurrentWeek && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-normal text-muted-foreground/60 whitespace-nowrap", children: week.dateRange })
+        ] }),
+        showCommentButton && weekKey && /* @__PURE__ */ jsxRuntime.jsx(
+          PlanningWeekCommentPopover,
+          {
+            comments,
+            weekLabel: week.label,
+            weekKey,
+            locationOptions,
+            onAddComment,
+            onCommentClick
+          }
+        )
+      ]
+    }
+  );
+}
+function SupplierColumnHeader({
+  column
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: "-ml-3 h-8 data-[state=open]:bg-accent",
+      onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Supplier / Scope" }),
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })
       ]
     }
@@ -6544,13 +7022,50 @@ function getSupplierColumn() {
     enableHiding: false
   };
 }
-function generateWeekColumns(weeks, config) {
+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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(WeekHeader, { week }),
+      header: () => /* @__PURE__ */ jsxRuntime.jsx(
+        WeekHeaderWithComments,
+        {
+          week,
+          weekKey,
+          config,
+          suppliers: suppliers ?? []
+        }
+      ),
       cell: ({ row }) => {
         const supplier = row.original;
         const data = supplier.weeks[weekKey] || { type: "empty" };
@@ -6570,10 +7085,10 @@ function generateWeekColumns(weeks, config) {
     };
   });
 }
-function generateColumns(weeks, config) {
+function generateColumns(weeks, config, suppliers) {
   return [
     getSupplierColumn(),
-    ...generateWeekColumns(weeks, config)
+    ...generateWeekColumns(weeks, config, suppliers)
   ];
 }
 function PlanningTable({
@@ -6592,22 +7107,22 @@ function PlanningTable({
     stickySupplierColumn = true,
     maxHeight = "600px"
   } = config;
-  const weeks = React17__namespace.useMemo(
+  const weeks = React22__namespace.useMemo(
     () => generateWeeks(startDate, weekCount),
     [startDate, weekCount]
   );
-  const currentWeekKey = React17__namespace.useMemo(() => {
+  const currentWeekKey = React22__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const columns = React17__namespace.useMemo(
-    () => generateColumns(weeks, config),
-    [weeks, config]
-  );
-  const [sorting, setSorting] = React17__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React17__namespace.useState([]);
-  const [columnVisibility, setColumnVisibility] = React17__namespace.useState({});
-  const [rowSelection, setRowSelection] = React17__namespace.useState({});
+  const columns = React22__namespace.useMemo(
+    () => generateColumns(weeks, config, suppliers),
+    [weeks, config, suppliers]
+  );
+  const [sorting, setSorting] = React22__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React22__namespace.useState([]);
+  const [columnVisibility, setColumnVisibility] = React22__namespace.useState({});
+  const [rowSelection, setRowSelection] = React22__namespace.useState({});
   const table = reactTable.useReactTable({
     data: suppliers,
     columns,
@@ -6638,29 +7153,32 @@ function PlanningTable({
       className: cn("flex flex-col gap-4", className),
       children: [
         showToolbar && /* @__PURE__ */ jsxRuntime.jsx(PlanningTableToolbar, { table }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-card shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border bg-background shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
           ScrollArea,
           {
             className: "w-full",
             style: { maxHeight },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full caption-bottom text-sm border-collapse", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "[&_tr]:border-b bg-sidebar sticky top-0 z-20", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(
                   "tr",
                   {
-                    className: "border-b transition-colors",
                     children: headerGroup.headers.map((header, index) => {
                       const isCurrentWeekColumn = header.id === currentWeekKey;
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "th",
                         {
                           className: cn(
-                            "h-14 px-4 text-left align-middle font-medium text-muted-foreground border-r border-border last:border-r-0",
+                            "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 bg-sidebar min-w-[200px]"
+                              "sticky left-0 z-30 min-w-[200px]",
+                              "shadow-[var(--j3m-shadow-sticky-edge)]"
                             ],
-                            index > 0 && "min-w-[120px] w-[120px]",
-                            isCurrentWeekColumn && "bg-primary/10 border-t-2 border-t-primary"
+                            index > 0 && "min-w-[140px]",
+                            // Current week: only highlight text/dot, not full background
+                            isCurrentWeekColumn && highlightCurrentWeek && "text-primary"
                           ),
                           children: header.isPlaceholder ? null : reactTable.flexRender(
                             header.column.columnDef.header,
@@ -6673,23 +7191,23 @@ function PlanningTable({
                   },
                   headerGroup.id
                 )) }),
-                /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "[&_tr:last-child]:border-0 bg-background", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-background", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
                   "tr",
                   {
                     "data-state": row.getIsSelected() && "selected",
-                    className: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+                    className: "border-b border-border last:border-b-0",
                     children: row.getVisibleCells().map((cell, index) => {
-                      const isCurrentWeekColumn = cell.column.id === currentWeekKey;
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "td",
                         {
                           className: cn(
-                            "p-0 align-middle border-r border-border last:border-r-0",
+                            "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 bg-background min-w-[200px]"
+                              "sticky left-0 z-10 min-w-[200px]",
+                              "shadow-[var(--j3m-shadow-sticky-edge)]"
                             ],
-                            index > 0 && "min-w-[120px] w-[120px]",
-                            isCurrentWeekColumn && "bg-primary/5"
+                            index > 0 && "min-w-[140px]"
                           ),
                           children: reactTable.flexRender(
                             cell.column.columnDef.cell,
@@ -6705,7 +7223,7 @@ function PlanningTable({
                   "td",
                   {
                     colSpan: columns.length,
-                    className: "h-24 text-center",
+                    className: "h-24 text-center text-muted-foreground bg-background",
                     children: "No suppliers found."
                   }
                 ) }) })
@@ -6731,7 +7249,6 @@ function getStatusBadgeVariant(status) {
   switch (status) {
     case "on-time":
       return "outline";
-    // Green text with outline
     case "delayed":
       return "secondary";
     case "critical":
@@ -6748,7 +7265,6 @@ function getStatusBadgeClasses(status) {
       return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
     case "critical":
       return "";
-    // Use default destructive
     default:
       return "";
   }
@@ -6767,134 +7283,566 @@ function getStatusLabel(status) {
       return status;
   }
 }
-function DeliveryCard({ delivery, index }) {
-  const [isOpen, setIsOpen] = React17__namespace.useState(false);
-  const hasElements = delivery.elements && delivery.elements.length > 0;
-  const elementsAtRisk = delivery.elementsAtRisk ?? delivery.elements?.filter((e) => !e.isProduced).length ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border overflow-hidden bg-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+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__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React22__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React22__namespace.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__namespace.useRef(open);
+  React22__namespace.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CommentButton, { size: "sm", commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
       {
-        className: cn(
-          "w-full flex items-center justify-between p-3 text-left",
-          "hover:bg-muted/50 transition-colors",
-          hasElements && "cursor-pointer"
-        ),
-        disabled: !hasElements,
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
-              delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
-                "\u2192 ",
-                delivery.destination
-              ] })
-            ] })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: deliveryLabel })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
+                  "Comments ",
+                  comments.length > 0 && `(${comments.length})`
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+                  "h-4 w-4 transition-transform duration-200",
+                  viewCommentsOpen && "rotate-180"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
+              ] }, comment.id)) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-2" }),
+            !showAddForm ? /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
               {
-                variant: getStatusBadgeVariant(delivery.status),
-                className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
-                children: getStatusLabel(delivery.status)
+                variant: "outline",
+                size: "sm",
+                className: "w-full justify-center gap-2 h-8",
+                onClick: () => setShowAddForm(true),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+                  "Add comment"
+                ]
               }
-            ),
-            hasElements && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
-              "h-4 w-4 text-muted-foreground transition-transform",
-              isOpen && "rotate-180"
-            ) })
+            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-7",
+                      onClick: () => {
+                        setShowAddForm(false);
+                        setNewCommentText("");
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 gap-1",
+                      onClick: handleSubmit,
+                      disabled: !newCommentText.trim(),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3 w-3" }),
+                        "Save"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ProductionCommentSection({
+  comments = [],
+  onAddComment
+}) {
+  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
+  const [newComment, setNewComment] = React22__namespace.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-2.5 space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
+    ] }, comment.id)) }),
+    !showAddForm ? /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start gap-2 h-8 text-muted-foreground",
+        onClick: () => setShowAddForm(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5" }),
+          comments.length > 0 ? "Add another comment" : "Add a comment..."
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-200", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7",
+              onClick: () => {
+                setShowAddForm(false);
+                setNewComment("");
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "h-7 gap-1",
+              onClick: handleSubmit,
+              disabled: !newComment.trim(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3 w-3" }),
+                "Save"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DeliveryListItem({
+  delivery,
+  index,
+  onClick
+}) {
+  const hasComments = (delivery.comments?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "w-full flex items-center justify-between p-3 rounded-lg",
+        "bg-card border hover:bg-muted/50 transition-colors cursor-pointer",
+        "text-left"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-lg",
+            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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3 w-3 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" })
+              ] })
+            ] }),
+            delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              "\u2192 ",
+              delivery.destination
+            ] })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(delivery.status),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
+              children: getStatusLabel(delivery.status)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function DeliveryDetailsView({
+  delivery,
+  week,
+  onBack,
+  onAddComment
+}) {
+  const elements = delivery.elements ?? [];
+  const categorizedElements = React22__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full animate-in slide-in-from-right-4 duration-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-6 py-3 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "gap-1 -ml-2",
+        onClick: onBack,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+          "Back"
         ]
       }
     ) }),
-    hasElements && /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleContent2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2", children: [
-        elementsAtRisk > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400 mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: delivery.label || "Delivery Details" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DeliveryCommentPopover,
+            {
+              comments: delivery.comments,
+              onAddComment,
+              deliveryLabel: delivery.label || "Delivery"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(delivery.status),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
+              children: getStatusLabel(delivery.status)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            week.label,
+            " \u2022 ",
+            week.dateRange
+          ] })
+        ] }),
+        delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            elementsAtRisk,
-            " element(s) probably not all produced"
+            "\u2192 ",
+            delivery.destination
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      totalCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Shipment Progress" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold tabular-nums", children: [
+            "Shipped ",
+            sentCount,
+            " / ",
+            totalCount
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: delivery.elements?.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "flex items-center justify-between text-xs p-2 rounded",
-              element.isProduced ? "bg-muted/30" : "bg-amber-50/50 dark:bg-amber-950/30"
+              "h-full rounded-full transition-all",
+              sentCount === totalCount ? "bg-green-500" : "bg-primary"
             ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                element.isProduced ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3.5 w-3.5 text-amber-600" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: element.isProduced ? "text-foreground" : "text-amber-700 dark:text-amber-300", children: element.name })
-              ] }),
-              element.quantity && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-                element.quantity,
-                " ",
-                element.unit ? formatProductionUnit(element.unit) : "pcs"
-              ] })
-            ]
-          },
-          element.id
-        )) })
+            style: { width: `${totalCount > 0 ? sentCount / totalCount * 100 : 0}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mt-3 flex-wrap", children: [
+          categorizedElements.sent.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-700 dark:text-green-300", children: [
+              categorizedElements.sent.length,
+              " Sent"
+            ] })
+          ] }),
+          categorizedElements.notSent.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3 w-3 text-amber-600" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-amber-700 dark:text-amber-300", children: [
+              categorizedElements.notSent.length,
+              " Not sent"
+            ] })
+          ] }),
+          categorizedElements.moved.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "h-3 w-3 text-blue-600" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-blue-700 dark:text-blue-300", children: [
+              categorizedElements.moved.length,
+              " Moved"
+            ] })
+          ] }),
+          categorizedElements.addons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 text-purple-600" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-purple-700 dark:text-purple-300", children: [
+              categorizedElements.addons.length,
+              " Add-on"
+            ] })
+          ] })
+        ] })
+      ] }),
+      elements.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Elements" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "bg-sidebar hover:bg-sidebar", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: elements.map((element) => {
+            const shipmentStatus = getElementShipmentStatus(element, delivery.id);
+            const statusLabel = getShipmentStatusLabel(shipmentStatus);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              TableRow,
+              {
+                className: getShipmentStatusRowBg(shipmentStatus),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-medium", children: element.prefix || "\u2014" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: element.type || element.name || "\u2014" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    element.weight,
+                    " ",
+                    element.weightUnit || "kg"
+                  ] }) : "\u2014" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.sizeSqm ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: element.sizeSqm }) : "\u2014" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "text-[10px] h-5",
+                          getShipmentStatusBadgeClasses(shipmentStatus)
+                        ),
+                        children: statusLabel
+                      }
+                    ),
+                    shipmentStatus === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
+                      "\u2192 ",
+                      element.actualDeliveryLabel
+                    ] }),
+                    shipmentStatus === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
+                      "from ",
+                      element.originalDeliveryLabel
+                    ] })
+                  ] }) })
+                ]
+              },
+              element.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      elements.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No elements in this delivery" })
       ] })
-    ] })
-  ] }) });
+    ] }) })
+  ] });
 }
-function WeekDetailDialog({
-  open,
-  onOpenChange,
+function MainView({
   supplier,
   week,
   data,
-  onProgressUpdate
+  producedValue,
+  hasChanges,
+  onProducedChange,
+  onSave,
+  onSelectDelivery,
+  onAddProductionComment
 }) {
   const production = data?.production;
-  const initialProgress = production?.progress ?? data?.progress ?? 0;
-  const initialProduced = production?.produced ?? 0;
-  const [progressValue, setProgressValue] = React17__namespace.useState(initialProgress.toString());
-  const [producedValue, setProducedValue] = React17__namespace.useState(initialProduced.toString());
-  const [hasChanges, setHasChanges] = React17__namespace.useState(false);
-  React17__namespace.useEffect(() => {
-    const newProgress = data?.production?.progress ?? data?.progress ?? 0;
-    const newProduced = data?.production?.produced ?? 0;
-    setProgressValue(newProgress.toString());
-    setProducedValue(newProduced.toString());
-    setHasChanges(false);
-  }, [data]);
-  const handleProgressChange = (e) => {
-    const value = e.target.value;
-    setProgressValue(value);
-    setHasChanges(true);
-  };
-  const handleProducedChange = (e) => {
-    const value = e.target.value;
-    setProducedValue(value);
-    if (production?.target) {
-      const produced = parseFloat(value) || 0;
-      const calculatedProgress = Math.round(produced / production.target * 100);
-      setProgressValue(Math.min(100, calculatedProgress).toString());
-    }
-    setHasChanges(true);
-  };
-  const handleSave = () => {
-    if (!supplier || !week || !onProgressUpdate) return;
-    const newProgress = Math.min(100, Math.max(0, parseFloat(progressValue) || 0));
-    const newProduced = parseFloat(producedValue) || 0;
-    const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
-    onProgressUpdate(supplier.id, weekKey, newProgress, production ? newProduced : void 0);
-    setHasChanges(false);
-  };
-  if (!supplier || !week || !data) {
-    return null;
-  }
-  const productionProgress = parseFloat(progressValue) || 0;
+  const productionProgress = production ? Math.min(100, Math.round(production.produced / production.target * 100)) : data?.progress ?? 0;
   const productionStatus = production?.status ?? "on-time";
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-lg max-h-[80vh] overflow-y-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+  const isComplete = productionProgress >= 100;
+  const hasProductionComments = (production?.comments?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-in fade-in-0 duration-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "px-6 pt-6 pb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
         supplier.name,
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-xs font-normal", children: supplier.badgeType })
@@ -6906,174 +7854,1319 @@ function WeekDetailDialog({
         week.dateRange
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 mt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
-        "Scope: ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: supplier.scope })
-      ] }),
-      data.type !== "empty" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Production Progress" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: getStatusBadgeVariant(productionStatus),
-                className: cn("text-xs ml-auto", getStatusBadgeClasses(productionStatus)),
-                children: getStatusLabel(productionStatus)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Progress" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                Math.round(productionProgress),
-                "%"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "h-full rounded-full transition-all",
-                  productionStatus === "critical" ? "bg-red-500" : productionStatus === "delayed" ? "bg-amber-500" : "bg-green-500"
-                ),
-                style: { width: `${productionProgress}%` }
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-            "p-3 rounded-lg border bg-card space-y-3"
-          ), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Update Progress" }),
-            production ? (
-              // If we have production data, show produced amount input
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: "produced", className: "text-xs", children: [
-                    "Produced (",
-                    formatProductionUnit(production.unit),
-                    ")"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Input,
-                      {
-                        id: "produced",
-                        type: "number",
-                        min: "0",
-                        max: production.target,
-                        value: producedValue,
-                        onChange: handleProducedChange,
-                        className: "h-8 text-sm"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
-                      "/ ",
-                      production.target,
-                      " ",
-                      formatProductionUnit(production.unit)
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "progress", className: "text-xs", children: "Progress (%)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Input,
-                    {
-                      id: "progress",
-                      type: "number",
-                      min: "0",
-                      max: "100",
-                      value: progressValue,
-                      onChange: handleProgressChange,
-                      className: "h-8 text-sm"
-                    }
-                  )
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1 px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+      data.type !== "empty" && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Production" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant(productionStatus),
+              className: cn("text-xs ml-auto", getStatusBadgeClasses(productionStatus)),
+              children: getStatusLabel(productionStatus)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CircularProgress,
+            {
+              value: productionProgress,
+              size: 100,
+              strokeWidth: 10,
+              variant: getProgressVariant(productionStatus),
+              showCheckmark: isComplete,
+              children: isComplete ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-6 w-6 text-green-600" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-green-600", children: [
+                  production?.produced ?? 0,
+                  " ",
+                  production ? formatProductionUnit(production.unit) : ""
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-bold tabular-nums", children: production?.produced ?? 0 }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+                  "/ ",
+                  production?.target ?? 0,
+                  " ",
+                  production ? formatProductionUnit(production.unit) : ""
                 ] })
               ] })
-            ) : (
-              // Simple progress input if no production data
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "progress", className: "text-xs", children: "Progress (%)" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Input,
-                  {
-                    id: "progress",
-                    type: "number",
-                    min: "0",
-                    max: "100",
-                    value: progressValue,
-                    onChange: handleProgressChange,
-                    className: "h-8 text-sm"
-                  }
-                )
+            }
+          ),
+          production && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: "produced", className: "text-xs", children: [
+                "Produced Amount (",
+                formatProductionUnit(production.unit),
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "produced",
+                  type: "number",
+                  min: "0",
+                  max: production.target * 2,
+                  value: producedValue,
+                  onChange: onProducedChange,
+                  className: "h-9"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+                "Target: ",
+                production.target,
+                " ",
+                formatProductionUnit(production.unit)
               ] })
-            ),
-            onProgressUpdate && /* @__PURE__ */ jsxRuntime.jsx(
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 size: "sm",
                 className: "w-full",
                 disabled: !hasChanges,
-                onClick: handleSave,
+                onClick: onSave,
                 children: hasChanges ? "Save Progress" : "No Changes"
               }
             )
-          ] }),
-          production && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg border bg-muted/30", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-4 w-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Target" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
-              production.target,
-              " ",
-              formatProductionUnit(production.unit)
-            ] })
           ] })
-        ] })
-      ] }),
-      data.deliveries && data.deliveries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Deliveries" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
-              data.deliveries.length,
-              " scheduled"
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Comments" }),
+            hasProductionComments && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+              "(",
+              production?.comments?.length,
+              ")"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data.deliveries.map((delivery, index) => /* @__PURE__ */ jsxRuntime.jsx(DeliveryCard, { delivery, index }, delivery.id)) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ProductionCommentSection,
+            {
+              comments: production?.comments,
+              onAddComment: onAddProductionComment
+            }
+          )
         ] })
       ] }),
-      data.type === "no-logistics" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground p-3 bg-muted/50 rounded-lg", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "No logistics scheduled for this week" })
-        ] })
+      data.deliveries && data.deliveries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Deliveries" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            data.deliveries.length,
+            " scheduled"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data.deliveries.map((delivery, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          DeliveryListItem,
+          {
+            delivery,
+            index,
+            onClick: () => onSelectDelivery(delivery)
+          },
+          delivery.id
+        )) })
       ] }),
-      data.hasWarning && data.warningMessage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: data.warningMessage })
-        ] })
+      data.type === "no-logistics" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground p-3 bg-muted/50 rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "No logistics scheduled for this week" })
       ] }),
-      data.notes && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Notes" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: data.notes })
-        ] })
+      data.hasWarning && data.warningMessage && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: data.warningMessage })
+      ] }),
+      data.notes && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Notes" }),
+        /* @__PURE__ */ jsxRuntime.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__namespace.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React22__namespace.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React22__namespace.useState(null);
+  React22__namespace.useEffect(() => {
+    const newProduced = data?.production?.produced ?? 0;
+    setProducedValue(newProduced.toString());
+    setHasChanges(false);
+  }, [data]);
+  React22__namespace.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__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "max-w-lg max-h-[85vh] p-0 gap-0 overflow-hidden", children: selectedDelivery ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: data.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: data.typeCode })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Flag, { className: "h-2.5 w-2.5" }),
+                "Paint"
+              ]
+            }
+          )
+        ] }),
+        showProgress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "h-full bg-primary rounded-full transition-all",
+              style: { width: `${progressPercent}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3 w-3", styles.icon) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "text-xs font-bold leading-none",
+          styles.text
+        ), children: net >= 0 ? net : net }),
+        !compact && /* @__PURE__ */ jsxRuntime.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__namespace.useRef(null);
+  const [localValue, setLocalValue] = React22__namespace.useState(
+    data.entered !== null ? String(data.entered) : ""
+  );
+  const [isHovered, setIsHovered] = React22__namespace.useState(false);
+  const [isEditing, setIsEditing] = React22__namespace.useState(false);
+  React22__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-5 w-5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add production amount" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (isEmpty && forcedRed) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-red-600 dark:text-red-400 text-center", children: "Behind schedule" }),
+          /* @__PURE__ */ jsxRuntime.jsx(NetBadge, { net: data.net, status: "shortfall" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground tracking-wide", children: "Accumulated" }),
+          /* @__PURE__ */ jsxRuntime.jsx(NetBadge, { net: data.net, status: forcedRed ? "shortfall" : data.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground tracking-wide", children: "Planned" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center px-2 py-0 bg-card border border-border rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: data.planned }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React22__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
+  const selectedPrefixName = React22__namespace.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__namespace.useRef(open);
+  React22__namespace.useEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+    if (wasOpen && !open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+      setSelectedPrefixId("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CommentButton, { commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "w-full justify-between h-8 px-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
+                      "Comments ",
+                      comments.length > 0 && `(${comments.length})`
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+                      "h-4 w-4 transition-transform duration-200",
+                      viewCommentsOpen && "rotate-180"
+                    ) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "rounded-lg bg-muted/50 p-3 space-y-2",
+                  "aria-label": `Comment by ${comment.author} about ${comment.prefixName}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: "text-[10px] px-2 py-0 h-5 font-medium bg-background",
+                        children: comment.prefixName
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: comment.text })
+                  ]
+                },
+                comment.id
+              )) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: !showAddForm ? (
+              /* Add comment Button */
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  className: "w-full justify-center gap-2 h-8",
+                  onClick: () => setShowAddForm(true),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+                    "Add comment"
+                  ]
+                }
+              )
+            ) : (
+              /* Comment input form with smooth expand animation */
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: "prefix-select", className: "text-xs font-medium", children: [
+                        "Applies to ",
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedPrefixId, onValueChange: setSelectedPrefixId, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "prefix-select", size: "sm", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select row/type..." }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: availablePrefixes.map((prefix) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: prefix.id, children: prefix.name }, prefix.id)) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "comment-text", className: "text-xs font-medium", children: "Comment" }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            className: "h-7",
+                            onClick: () => {
+                              setShowAddForm(false);
+                              setNewCommentText("");
+                              setSelectedPrefixId("");
+                            },
+                            children: "Cancel"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          Button,
+                          {
+                            size: "sm",
+                            className: "h-7 gap-1",
+                            onClick: handleSubmit,
+                            disabled: !newCommentText.trim() || !selectedPrefixId,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3 w-3" }),
+                              "Save"
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function CalibrationWeekHeader({
+  className,
+  week,
+  comments = [],
+  showCommentButton = true,
+  availablePrefixes = [],
+  onAddComment,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "text-sm font-semibold tracking-tight",
+              week.isCurrentWeek ? "text-primary" : "text-foreground"
+            ), children: week.label }),
+            week.isCurrentWeek && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-primary" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-normal text-muted-foreground/60", children: week.dateRange })
+        ] }),
+        showCommentButton && availablePrefixes.length > 0 && /* @__PURE__ */ jsxRuntime.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__namespace.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__namespace.useState(0);
+  const weeks = React22__namespace.useMemo(() => {
+    const start = new Date(calculatedStartDate);
+    start.setDate(start.getDate() - additionalWeeks * 7);
+    return generateWeeks(start, weekCount + additionalWeeks);
+  }, [calculatedStartDate, weekCount, additionalWeeks]);
+  React22__namespace.useMemo(() => {
+    const currentWeek = weeks.find((w) => w.isCurrentWeek);
+    return currentWeek ? getWeekKey(currentWeek.startDate) : null;
+  }, [weeks]);
+  const [currentPage, setCurrentPage] = React22__namespace.useState(0);
+  const [pageSize, setPageSize] = React22__namespace.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React22__namespace.useState("");
+  const filteredPrefixes = React22__namespace.useMemo(() => {
+    if (!searchQuery) return prefixes;
+    const query = searchQuery.toLowerCase();
+    return prefixes.filter(
+      (p) => p.name.toLowerCase().includes(query) || p.typeCode.toLowerCase().includes(query)
+    );
+  }, [prefixes, searchQuery]);
+  const paginatedPrefixes = React22__namespace.useMemo(() => {
+    const start = currentPage * pageSize;
+    return filteredPrefixes.slice(start, start + pageSize);
+  }, [filteredPrefixes, currentPage, pageSize]);
+  React22__namespace.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__namespace.useMemo(
+    () => prefixes.map((p) => ({ id: p.id, name: p.name })),
+    [prefixes]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "calibration-table",
+      className: cn("flex flex-col gap-4", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "Weekly Production Calibration" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Review required weekly production and confirm achievable output at the selected checkpoint." })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          showToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                placeholder: "Search prefixes...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "h-8 w-[200px] lg:w-[300px]"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: allowTimelineExtension && additionalWeeks < maxEarlierWeeks && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "gap-2",
+                onClick: handleAddEarlierWeek,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+                  "Add earlier week"
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border bg-background shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ScrollArea,
+            {
+              className: "w-full",
+              style: { maxHeight },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(
+                      "h-14 px-3 text-left align-middle font-semibold text-xs text-muted-foreground uppercase tracking-wide",
+                      "border-r border-b border-border bg-sidebar",
+                      stickyRowHeader && "sticky left-0 z-30 min-w-[200px]",
+                      // Right shadow using Quantum token
+                      stickyRowHeader && "shadow-[var(--j3m-shadow-sticky-edge)]"
+                    ), children: "Supplier / Scope" }),
+                    weeks.map((week) => {
+                      const weekKey = getWeekKey(week.startDate);
+                      const weekComments = getWeekComments(weekKey);
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "th",
+                        {
+                          className: "h-14 px-2 text-left align-middle border-r border-b border-border last:border-r-0 min-w-[220px] bg-sidebar",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            CalibrationWeekHeader,
+                            {
+                              week,
+                              comments: weekComments,
+                              showCommentButton: true,
+                              availablePrefixes,
+                              onAddComment: (text, prefixId, prefixName) => handleAddWeekComment(weekKey, text, prefixId)
+                            }
+                          )
+                        },
+                        weekKey
+                      );
+                    })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { className: "border-b border-border last:border-b-0", children: [
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            className: "p-0 align-top border-r border-border last:border-r-0 min-w-[220px] bg-background",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              CalibrationWeekCell,
+                              {
+                                data: effectiveCellData,
+                                unit: prefix.unit,
+                                onValueChange: (value) => handleCellChange(prefix.id, weekKey, value),
+                                forcedRed: isForcedRed,
+                                isEmpty,
+                                onAddClick: () => {
+                                }
+                              }
+                            )
+                          },
+                          weekKey
+                        );
+                      })
+                    ] }, prefix.id);
+                  }) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "td",
+                    {
+                      colSpan: weeks.length + 1,
+                      className: "h-24 text-center text-muted-foreground bg-background",
+                      children: "No prefixes found."
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" })
+              ]
+            }
+          ) })
+        ] }),
+        showPagination && filteredPrefixes.length > pageSize && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Page ",
+              currentPage + 1,
+              " of ",
+              Math.ceil(filteredPrefixes.length / pageSize)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage === 0,
+                  onClick: () => setCurrentPage(0),
+                  children: "\xAB\xAB"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  disabled: currentPage === 0,
+                  onClick: () => setCurrentPage((prev) => prev - 1),
+                  children: "\xAB"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React22__namespace.useState("");
+  const [commentText, setCommentText] = React22__namespace.useState("");
+  const currentWeek = React22__namespace.useMemo(
+    () => weeks.find((w) => w.isCurrentWeek),
+    [weeks]
+  );
+  React22__namespace.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__ */ jsxRuntime.jsxs(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: triggerVariant, size: "sm", className: "gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { className: "h-4 w-4" }),
+      "Add comment"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add Comment" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Add a comment to a specific prefix and week. Comments help communicate production updates and issues." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "prefix-select", children: "Prefix / Element Type" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedPrefixId, onValueChange: setSelectedPrefixId, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "prefix-select", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select prefix..." }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: prefixes.map((prefix) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: prefix.id, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: prefix.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground text-xs", children: [
+                "(",
+                prefix.typeCode,
+                ")"
+              ] })
+            ] }) }, prefix.id)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "week-select", children: "Week" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedWeekKey, onValueChange: setSelectedWeekKey, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "week-select", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select week..." }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: weeks.map((week) => {
+              const weekKey = getWeekKey(week.startDate);
+              return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: weekKey, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "font-medium",
+                  week.isCurrentWeek && "text-primary"
+                ), children: week.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: week.dateRange }),
+                week.isCurrentWeek && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-primary font-medium", children: "(Current)" })
+              ] }) }, weekKey);
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "comment-text", children: "Comment" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Textarea,
+            {
+              id: "comment-text",
+              placeholder: "Enter your comment...",
+              value: commentText,
+              onChange: (e) => setCommentText(e.target.value),
+              className: "min-h-[100px] resize-none"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: () => onOpenChange?.(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          !canSubmit && (shortfallCount > 0 || pendingCount > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-amber-500" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: message })
+          ] }),
+          canSubmit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4 text-green-500" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Badge,
+            {
+              variant: statusBadge.variant,
+              className: "flex items-center gap-2 px-3 py-1 rounded-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("h-2 w-2 rounded-full", statusBadge.color) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: statusBadge.label })
+              ]
+            }
+          ),
+          lastSaved && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "gap-2 rounded-full",
+              disabled: true,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDate(lastSaved) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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
@@ -7138,7 +9231,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React17__namespace.createContext(null);
+var CalendarContext = React22__namespace.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -7153,38 +9246,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React17__namespace.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React17__namespace.useState(defaultUserId);
-  const [events, setEventsState] = React17__namespace.useState(initialEvents);
-  const [users] = React17__namespace.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React17__namespace.useState(defaultBadgeVariant);
-  const [view, setView] = React17__namespace.useState(defaultView);
-  const [workingHours, setWorkingHours] = React17__namespace.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React17__namespace.useState(defaultVisibleHours);
-  React17__namespace.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React22__namespace.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React22__namespace.useState(defaultUserId);
+  const [events, setEventsState] = React22__namespace.useState(initialEvents);
+  const [users] = React22__namespace.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React22__namespace.useState(defaultBadgeVariant);
+  const [view, setView] = React22__namespace.useState(defaultView);
+  const [workingHours, setWorkingHours] = React22__namespace.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React22__namespace.useState(defaultVisibleHours);
+  React22__namespace.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React17__namespace.useCallback((newEvents) => {
+  const setEvents = React22__namespace.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React17__namespace.useCallback((event) => {
+  const addEvent = React22__namespace.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React17__namespace.useCallback((event) => {
+  const updateEvent = React22__namespace.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React17__namespace.useCallback((eventId) => {
+  const deleteEvent = React22__namespace.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React17__namespace.useCallback(() => {
+  const goToToday = React22__namespace.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React17__namespace.useCallback(() => {
+  const goToPrevious = React22__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -7202,7 +9295,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React17__namespace.useCallback(() => {
+  const goToNext = React22__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -7220,7 +9313,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React17__namespace.useMemo(
+  const contextValue = React22__namespace.useMemo(
     () => ({
       // State
       selectedDate,
@@ -7267,7 +9360,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React17__namespace.useContext(CalendarContext);
+  const context = React22__namespace.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -7275,14 +9368,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React17__namespace.useMemo(() => {
+  return React22__namespace.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React17__namespace.useMemo(() => {
+  return React22__namespace.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -7840,8 +9933,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React17__namespace.useState(/* @__PURE__ */ new Date());
-  React17__namespace.useEffect(() => {
+  const [now, setNow] = React22__namespace.useState(/* @__PURE__ */ new Date());
+  React22__namespace.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -7878,24 +9971,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React17__namespace.createContext(null);
+var DragContext = React22__namespace.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React17__namespace.useState(null);
-  const [isDragging, setIsDragging] = React17__namespace.useState(false);
+  const [draggedEvent, setDraggedEventState] = React22__namespace.useState(null);
+  const [isDragging, setIsDragging] = React22__namespace.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React17__namespace.useCallback((event) => {
+  const setDraggedEvent = React22__namespace.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React17__namespace.useCallback((newStartDate) => {
+  const handleDrop = React22__namespace.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -7908,7 +10001,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React17__namespace.useMemo(
+  const contextValue = React22__namespace.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -7919,7 +10012,7 @@ function DragProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React17__namespace.useContext(DragContext);
+  const context = React22__namespace.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -7964,7 +10057,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React17__namespace.useState(false);
+  const [isOver, setIsOver] = React22__namespace.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -8002,23 +10095,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React17__namespace.useState(false);
-  const dropTargetDate = React17__namespace.useMemo(() => {
+  const [isOver, setIsOver] = React22__namespace.useState(false);
+  const dropTargetDate = React22__namespace.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React17__namespace.useCallback((e) => {
+  const handleDragOver = React22__namespace.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React17__namespace.useCallback(() => {
+  const handleDragLeave = React22__namespace.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React17__namespace.useCallback((e) => {
+  const handleDrop = React22__namespace.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -8045,13 +10138,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 = React17__namespace.useCallback((e) => {
+  const handleDragStart = React22__namespace.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React17__namespace.useCallback(() => {
+  const handleDragEnd = React22__namespace.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -8092,15 +10185,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React17__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React17__namespace.useMemo(
+  const cells = React22__namespace.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React17__namespace.useMemo(
+  const eventPositions = React22__namespace.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -8282,7 +10375,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React17__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -8488,8 +10581,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React17__namespace.useState(/* @__PURE__ */ new Date());
-  React17__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React22__namespace.useState(/* @__PURE__ */ new Date());
+  React22__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -8572,7 +10665,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React17__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -8580,7 +10673,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React17__namespace.useMemo(() => {
+  const currentEvents = React22__namespace.useMemo(() => {
     if (!dateFns.isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -8804,8 +10897,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React17__namespace.useState(/* @__PURE__ */ new Date());
-  React17__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React22__namespace.useState(/* @__PURE__ */ new Date());
+  React22__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -8839,7 +10932,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React17__namespace.useMemo(() => {
+  const months = React22__namespace.useMemo(() => {
     const yearStart = dateFns.startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => dateFns.addMonths(yearStart, i));
   }, [selectedDate]);
@@ -8962,11 +11055,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React17__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React17__namespace.useMemo(() => {
+  const eventsByDay = React22__namespace.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = dateFns.parseISO(event.startDate);
@@ -9431,16 +11524,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React17__namespace.useState("");
-  const [description, setDescription] = React17__namespace.useState("");
-  const [startDate, setStartDate] = React17__namespace.useState("");
-  const [startTime, setStartTime] = React17__namespace.useState("");
-  const [endDate, setEndDate] = React17__namespace.useState("");
-  const [endTime, setEndTime] = React17__namespace.useState("");
-  const [color, setColor] = React17__namespace.useState("blue");
-  const [userId, setUserId] = React17__namespace.useState("");
-  const [isSubmitting, setIsSubmitting] = React17__namespace.useState(false);
-  React17__namespace.useEffect(() => {
+  const [title, setTitle] = React22__namespace.useState("");
+  const [description, setDescription] = React22__namespace.useState("");
+  const [startDate, setStartDate] = React22__namespace.useState("");
+  const [startTime, setStartTime] = React22__namespace.useState("");
+  const [endDate, setEndDate] = React22__namespace.useState("");
+  const [endTime, setEndTime] = React22__namespace.useState("");
+  const [color, setColor] = React22__namespace.useState("blue");
+  const [userId, setUserId] = React22__namespace.useState("");
+  const [isSubmitting, setIsSubmitting] = React22__namespace.useState(false);
+  React22__namespace.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = dateFns.parseISO(event.startDate);
@@ -9663,7 +11756,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React17__namespace.useState("");
+  const [title, setTitle] = React22__namespace.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -9730,8 +11823,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React17__namespace.useState(visibleHours.from);
-  const [to, setTo] = React17__namespace.useState(visibleHours.to);
+  const [from, setFrom] = React22__namespace.useState(visibleHours.from);
+  const [to, setTo] = React22__namespace.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -9777,7 +11870,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React17__namespace.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React22__namespace.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -9926,8 +12019,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React17__namespace.useState(false);
-  React17__namespace.useEffect(() => {
+  const [matches, setMatches] = React22__namespace.useState(false);
+  React22__namespace.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -9979,11 +12072,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React17__namespace.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React17__namespace.useState(false);
-  const [selectedEvent, setSelectedEvent] = React17__namespace.useState(null);
-  const [dialogMode, setDialogMode] = React17__namespace.useState("add");
-  const [defaultDate, setDefaultDate] = React17__namespace.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React22__namespace.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React22__namespace.useState(false);
+  const [selectedEvent, setSelectedEvent] = React22__namespace.useState(null);
+  const [dialogMode, setDialogMode] = React22__namespace.useState("add");
+  const [defaultDate, setDefaultDate] = React22__namespace.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -10239,6 +12332,9 @@ exports.CalendarHeaderCompact = CalendarHeaderCompact;
 exports.CalendarSettingsButton = CalendarSettingsButton;
 exports.CalendarSettingsContent = CalendarSettingsContent;
 exports.CalendarSettingsDialog = CalendarSettingsDialog;
+exports.CalibrationTable = CalibrationTable;
+exports.CalibrationWeekCell = CalibrationWeekCell;
+exports.CalibrationWeekHeader = CalibrationWeekHeader;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -10260,6 +12356,7 @@ exports.ChartStyle = ChartStyle;
 exports.ChartTooltip = ChartTooltip;
 exports.ChartTooltipContent = ChartTooltipContent;
 exports.Checkbox = Checkbox;
+exports.CircularProgress = CircularProgress;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
@@ -10272,6 +12369,9 @@ exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
+exports.CommentButton = CommentButton;
+exports.CommentDialog = CommentDialog;
+exports.CommentPopover = CommentPopover;
 exports.ContextMenu = ContextMenu;
 exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
 exports.ContextMenuContent = ContextMenuContent;
@@ -10418,6 +12518,7 @@ exports.NavigationMenuLink = NavigationMenuLink;
 exports.NavigationMenuList = NavigationMenuList;
 exports.NavigationMenuTrigger = NavigationMenuTrigger;
 exports.NavigationMenuViewport = NavigationMenuViewport;
+exports.NetBadge = NetBadge;
 exports.Pagination = Pagination;
 exports.PaginationContent = PaginationContent;
 exports.PaginationEllipsis = PaginationEllipsis;
@@ -10427,6 +12528,7 @@ exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
 exports.PlanningTable = PlanningTable;
 exports.PlanningTableToolbar = PlanningTableToolbar;
+exports.PlanningWeekCommentPopover = PlanningWeekCommentPopover;
 exports.PlayerCanvas = PlayerCanvas;
 exports.PlayerCanvasActionButton = PlayerCanvasActionButton;
 exports.PlayerCanvasControls = PlayerCanvasControls;
@@ -10448,6 +12550,7 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.ResizableHandle = ResizableHandle;
 exports.ResizablePanel = ResizablePanel;
 exports.ResizablePanelGroup = ResizablePanelGroup;
+exports.RowHeaderCell = RowHeaderCell;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
 exports.SearchForm = SearchForm;
@@ -10505,6 +12608,7 @@ exports.SiteHeader = SiteHeader;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
+exports.SubmitCalibrationBar = SubmitCalibrationBar;
 exports.SupplierCell = SupplierCell;
 exports.Switch = Switch;
 exports.Table = Table;
@@ -10544,21 +12648,27 @@ exports.YearView = YearView;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
+exports.calculateCalibrationCells = calculateCalibrationCells;
 exports.calculateDropDates = calculateDropDates;
 exports.calculateMonthEventPositions = calculateMonthEventPositions;
+exports.canSubmitCalibration = canSubmitCalibration;
 exports.cardVariants = cardVariants;
 exports.createDefaultEvent = createDefaultEvent;
 exports.deliveryIndicatorVariants = deliveryIndicatorVariants;
+exports.formatCalibrationUnit = formatCalibrationUnit;
 exports.formatDateRange = formatDateRange2;
 exports.formatProductionUnit = formatProductionUnit;
 exports.formatTime = formatTime;
 exports.generateColumns = generateColumns;
 exports.generateEventId = generateEventId;
+exports.generateLocationOptions = generateLocationOptions;
 exports.generateWeekColumns = generateWeekColumns;
 exports.generateWeeks = generateWeeks;
 exports.getCalendarCells = getCalendarCells;
+exports.getCommentLocationLabel = getCommentLocationLabel;
 exports.getCurrentEvents = getCurrentEvents;
 exports.getDayHours = getDayHours;
+exports.getElementShipmentStatus = getElementShipmentStatus;
 exports.getEventBlockStyle = getEventBlockStyle;
 exports.getEventDuration = getEventDuration;
 exports.getEventDurationMinutes = getEventDurationMinutes;
@@ -10569,6 +12679,7 @@ exports.getHeaderLabel = getHeaderLabel;
 exports.getISOWeek = getISOWeek;
 exports.getMonthCellEvents = getMonthCellEvents;
 exports.getMonthDays = getMonthDays;
+exports.getShipmentStatusLabel = getShipmentStatusLabel;
 exports.getSupplierColumn = getSupplierColumn;
 exports.getTimeHeight = getTimeHeight;
 exports.getTimePosition = getTimePosition;