@j3m-quantum/ui 1.11.2 → 1.12.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React27 = require('react');
+var React29 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -73,7 +73,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
+var React29__namespace = /*#__PURE__*/_interopNamespace(React29);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -108,8 +108,8 @@ var tunnel__default = /*#__PURE__*/_interopDefault(tunnel);
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React27__namespace.useState(void 0);
-  React27__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React29__namespace.useState(void 0);
+  React29__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -150,7 +150,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React27__namespace.forwardRef(
+var Button = React29__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -514,7 +514,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React27__namespace.useMemo(
+  const _values = React29__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -800,7 +800,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React27__namespace.createContext({
+var ToggleGroupContext = React29__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -837,7 +837,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React27__namespace.useContext(ToggleGroupContext);
+  const context = React29__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -867,7 +867,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React27__namespace.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React29__namespace.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1287,7 +1287,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React27__namespace.createContext(
+var FormFieldContext = React29__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1296,8 +1296,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React27__namespace.useContext(FormFieldContext);
-  const itemContext = React27__namespace.useContext(FormItemContext);
+  const fieldContext = React29__namespace.useContext(FormFieldContext);
+  const itemContext = React29__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1314,11 +1314,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React27__namespace.createContext(
+var FormItemContext = React29__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React27__namespace.useId();
+  const id = React29__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1566,7 +1566,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React27.useMemo(() => {
+  const content = React29.useMemo(() => {
     if (children) {
       return children;
     }
@@ -2420,8 +2420,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React27__namespace.useRef(null);
-  React27__namespace.useEffect(() => {
+  const ref = React29__namespace.useRef(null);
+  React29__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2442,9 +2442,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React27__namespace.createContext(null);
+var CarouselContext = React29__namespace.createContext(null);
 function useCarousel() {
-  const context = React27__namespace.useContext(CarouselContext);
+  const context = React29__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2466,20 +2466,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React27__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React27__namespace.useState(false);
-  const onSelect = React27__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React29__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React29__namespace.useState(false);
+  const onSelect = React29__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React27__namespace.useCallback(() => {
+  const scrollPrev = React29__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React27__namespace.useCallback(() => {
+  const scrollNext = React29__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React27__namespace.useCallback(
+  const handleKeyDown = React29__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2491,11 +2491,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2628,9 +2628,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React27__namespace.createContext(null);
+var ChartContext = React29__namespace.createContext(null);
 function useChart() {
-  const context = React27__namespace.useContext(ChartContext);
+  const context = React29__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2643,7 +2643,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React27__namespace.useId();
+  const uniqueId = React29__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2704,7 +2704,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React27__namespace.useMemo(() => {
+  const tooltipLabel = React29__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3459,6 +3459,144 @@ function CircularProgress({
     }
   );
 }
+function getVariantFromProgress(value) {
+  if (value >= 100) return "complete";
+  if (value >= 50) return "normal";
+  if (value > 0) return "warning";
+  return "critical";
+}
+function getStatusColors(variant) {
+  switch (variant) {
+    case "complete":
+      return {
+        track: "bg-green-500/20 dark:bg-green-500/10",
+        fill: "bg-green-500",
+        text: "text-green-600 dark:text-green-400",
+        icon: "text-green-600 dark:text-green-400"
+      };
+    case "normal":
+      return {
+        track: "bg-green-500/20 dark:bg-green-500/10",
+        fill: "bg-green-500",
+        text: "text-green-600 dark:text-green-400",
+        icon: "text-green-600 dark:text-green-400"
+      };
+    case "warning":
+      return {
+        track: "bg-amber-500/20 dark:bg-amber-500/10",
+        fill: "bg-amber-500",
+        text: "text-amber-600 dark:text-amber-400",
+        icon: "text-amber-600 dark:text-amber-400"
+      };
+    case "critical":
+      return {
+        track: "bg-red-500/20 dark:bg-red-500/10",
+        fill: "bg-red-500",
+        text: "text-red-600 dark:text-red-400",
+        icon: "text-red-600 dark:text-red-400"
+      };
+  }
+}
+function getSizeClasses(size) {
+  switch (size) {
+    case "sm":
+      return {
+        bar: "h-1",
+        text: "text-[10px]",
+        icon: "h-3 w-3",
+        gap: "gap-1"
+      };
+    case "lg":
+      return {
+        bar: "h-3",
+        text: "text-sm",
+        icon: "h-5 w-5",
+        gap: "gap-3"
+      };
+    default:
+      return {
+        bar: "h-2",
+        text: "text-xs",
+        icon: "h-4 w-4",
+        gap: "gap-2"
+      };
+  }
+}
+function StatusProgress({
+  className,
+  value,
+  currentCount,
+  totalCount,
+  unitLabel = "elements",
+  showLabel = false,
+  showCheckmark = true,
+  size = "md",
+  variant,
+  ...props
+}) {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const isComplete = clampedValue >= 100;
+  const resolvedVariant = variant ?? getVariantFromProgress(clampedValue);
+  const colors = getStatusColors(resolvedVariant);
+  const sizes = getSizeClasses(size);
+  const labelText = React29__namespace.useMemo(() => {
+    if (currentCount !== void 0 && totalCount !== void 0) {
+      return `${currentCount} / ${totalCount} ${unitLabel}`;
+    }
+    return `${Math.round(clampedValue)}%`;
+  }, [currentCount, totalCount, unitLabel, clampedValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "status-progress",
+      "data-value": clampedValue,
+      "data-variant": resolvedVariant,
+      "data-complete": isComplete,
+      className: cn("flex flex-col w-full", sizes.gap, className),
+      ...props,
+      children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between", sizes.gap), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", sizes.text, colors.text), children: isComplete && showCheckmark ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn(sizes.icon, colors.icon) }),
+            "Complete"
+          ] }) : labelText }),
+          !isComplete && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("tabular-nums text-muted-foreground", sizes.text), children: [
+            Math.round(clampedValue),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "w-full rounded-full overflow-hidden",
+              colors.track,
+              sizes.bar
+            ),
+            role: "progressbar",
+            "aria-valuenow": clampedValue,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full transition-all duration-300 ease-out",
+                  colors.fill
+                ),
+                style: { width: `${clampedValue}%` }
+              }
+            )
+          }
+        ),
+        !showLabel && isComplete && showCheckmark && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", sizes.gap), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn(sizes.icon, colors.icon) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", sizes.text, colors.text), children: "Complete" })
+        ] })
+      ]
+    }
+  );
+}
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -3506,8 +3644,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React27__namespace.useState("light");
-  React27__namespace.useEffect(() => {
+  const [theme, setTheme] = React29__namespace.useState("light");
+  React29__namespace.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -4156,7 +4294,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React27__namespace.forwardRef(
+var SearchTrigger = React29__namespace.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -4192,7 +4330,7 @@ var SearchTrigger = React27__namespace.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -5167,9 +5305,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React27__namespace.createContext(null);
+var SidebarContext = React29__namespace.createContext(null);
 function useSidebar() {
-  const context = React27__namespace.useContext(SidebarContext);
+  const context = React29__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5185,10 +5323,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React27__namespace.useState(false);
-  const [_open, _setOpen] = React27__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React29__namespace.useState(false);
+  const [_open, _setOpen] = React29__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React27__namespace.useCallback(
+  const setOpen = React29__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5200,10 +5338,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React27__namespace.useCallback(() => {
+  const toggleSidebar = React29__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5214,7 +5352,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React27__namespace.useMemo(
+  const contextValue = React29__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5672,7 +5810,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React27__namespace.useMemo(() => {
+  const width = React29__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5815,7 +5953,7 @@ var sectionVariants = classVarianceAuthority.cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React27__namespace.forwardRef(
+var Section = React29__namespace.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
@@ -5827,7 +5965,7 @@ var Section = React27__namespace.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React27__namespace.forwardRef(
+var SectionHeader = React29__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5842,7 +5980,7 @@ var SectionHeader = React27__namespace.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React27__namespace.forwardRef(
+var SectionTitle = React29__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h2",
     {
@@ -5856,7 +5994,7 @@ var SectionTitle = React27__namespace.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React27__namespace.forwardRef(
+var SectionDescription = React29__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
@@ -5870,7 +6008,7 @@ var SectionDescription = React27__namespace.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React27__namespace.forwardRef(
+var SectionContent = React29__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5884,7 +6022,7 @@ var SectionContent = React27__namespace.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React27__namespace.forwardRef(
+var SectionFooter = React29__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -6192,7 +6330,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(React27__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React29__namespace.Fragment, { children: [
           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)) }) }),
@@ -6431,15 +6569,27 @@ function getCombinedRiskLevel(data) {
   if (productionStatus === "delayed" || hasDeliveryDelayed || data.hasWarning) {
     return "warning";
   }
+  const productionProgress = data.production?.progress ?? data.progress ?? 0;
+  const isProductionComplete = productionProgress >= 100;
+  if (isProductionComplete) {
+    return "complete";
+  }
   return "normal";
 }
-function getRowStatus(status) {
+function getRowStatus(status, progress) {
   if (status === "critical") return "critical";
   if (status === "delayed") return "warning";
+  if (progress !== void 0 && progress >= 100) return "complete";
   return "normal";
 }
 var statusFillClasses = {
   normal: {
+    // Grey/muted for "on track but not complete" - reduces visual noise
+    border: "border-l-[3px] border-l-muted-foreground/40",
+    bg: "bg-muted/30 dark:bg-muted/20"
+  },
+  complete: {
+    // Green for "done/complete" - clear success signal
     border: "border-l-[3px] border-l-green-500",
     bg: "bg-green-50/50 dark:bg-green-950/30"
   },
@@ -6454,6 +6604,13 @@ var statusFillClasses = {
 };
 var statusColors = {
   normal: {
+    // Grey/muted for "on track but not complete"
+    icon: "text-muted-foreground",
+    progress: "bg-muted-foreground/60",
+    text: "text-muted-foreground"
+  },
+  complete: {
+    // Green for "done/complete"
     icon: "text-green-600 dark:text-green-400",
     progress: "bg-green-500",
     text: "text-green-700 dark:text-green-300"
@@ -6481,19 +6638,20 @@ function WeekCell({
   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 productionStatus = getRowStatus(data.production?.status, productionProgress);
   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 allDeliveriesComplete = data.deliveries?.every((d) => (d.progress ?? 0) >= 100) ?? false;
+  const worstDeliveryStatus = data.deliveries?.some((d) => d.status === "critical") ? "critical" : data.deliveries?.some((d) => d.status === "delayed") ? "warning" : allDeliveriesComplete && deliveryCount > 0 ? "complete" : "normal";
   const deliveryColors = statusColors[worstDeliveryStatus];
-  const getDeliveryStatusColor = (status) => {
-    switch (status) {
+  const getDeliveryStatusColor = (delivery) => {
+    switch (delivery.status) {
       case "critical":
         return "bg-red-500";
       case "delayed":
         return "bg-amber-500";
       default:
-        return "bg-green-500";
+        return (delivery.progress ?? 0) >= 100 ? "bg-green-500" : "bg-muted-foreground/60";
     }
   };
   const handleClick = () => {
@@ -6610,24 +6768,18 @@ function WeekCell({
           ] }) : /* @__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
-            );
-          }),
+          data.deliveries?.slice(0, 5).map((delivery, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 max-w-[24px] h-1.5 rounded-full",
+                // Solid status color - grey=on-track, green=complete, amber=at-risk, red=critical
+                getDeliveryStatusColor(delivery)
+              ),
+              title: delivery.label || `Delivery ${index + 1}`
+            },
+            delivery.id || index
+          )),
           deliveryCount > 5 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[8px] text-muted-foreground", children: [
             "+",
             deliveryCount - 5
@@ -6799,11 +6951,11 @@ function PlanningWeekCommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
-  const [selectedLocationId, setSelectedLocationId] = React27__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
-  const selectedLocation = React27__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React29__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const selectedLocation = React29__namespace.useMemo(() => {
     return locationOptions.find((opt) => opt.id === selectedLocationId);
   }, [locationOptions, selectedLocationId]);
   const handleSubmit = () => {
@@ -6847,8 +6999,8 @@ function PlanningWeekCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27__namespace.useRef(open);
-  React27__namespace.useEffect(() => {
+  const prevOpenRef = React29__namespace.useRef(open);
+  React29__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7202,22 +7354,22 @@ function PlanningTable({
     stickySupplierColumn = true,
     maxHeight = "600px"
   } = config;
-  const weeks = React27__namespace.useMemo(
+  const weeks = React29__namespace.useMemo(
     () => generateWeeks(startDate, weekCount),
     [startDate, weekCount]
   );
-  const currentWeekKey = React27__namespace.useMemo(() => {
+  const currentWeekKey = React29__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const columns = React27__namespace.useMemo(
+  const columns = React29__namespace.useMemo(
     () => generateColumns(weeks, config, suppliers),
     [weeks, config, suppliers]
   );
-  const [sorting, setSorting] = React27__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React27__namespace.useState([]);
-  const [columnVisibility, setColumnVisibility] = React27__namespace.useState({});
-  const [rowSelection, setRowSelection] = React27__namespace.useState({});
+  const [sorting, setSorting] = React29__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React29__namespace.useState([]);
+  const [columnVisibility, setColumnVisibility] = React29__namespace.useState({});
+  const [rowSelection, setRowSelection] = React29__namespace.useState({});
   const table = reactTable.useReactTable({
     data: suppliers,
     columns,
@@ -7340,10 +7492,12 @@ function PlanningTable({
     }
   );
 }
-function getStatusBadgeVariant(status) {
+function getStatusBadgeVariant(status, isComplete) {
+  if (isComplete) return "outline";
   switch (status) {
     case "on-time":
       return "outline";
+    // Grey for on-track
     case "delayed":
       return "secondary";
     case "critical":
@@ -7352,19 +7506,24 @@ function getStatusBadgeVariant(status) {
       return "outline";
   }
 }
-function getStatusBadgeClasses(status) {
+function getStatusBadgeClasses(status, isComplete) {
+  if (isComplete) {
+    return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+  }
   switch (status) {
     case "on-time":
-      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+      return "border-muted-foreground/50 text-muted-foreground bg-muted/50";
+    // Grey for on-track
     case "delayed":
       return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
     case "critical":
       return "";
     default:
-      return "";
+      return "border-muted-foreground/50 text-muted-foreground";
   }
 }
-function getStatusLabel(status) {
+function getStatusLabel(status, isComplete) {
+  if (isComplete) return "Complete";
   switch (status) {
     case "on-time":
       return "On Track";
@@ -7378,10 +7537,12 @@ function getStatusLabel(status) {
       return status;
   }
 }
-function getProgressVariant(status) {
+function getProgressVariant(status, isComplete) {
+  if (isComplete) return "success";
   switch (status) {
     case "on-time":
-      return "success";
+      return "default";
+    // Grey/default for on-track
     case "delayed":
       return "warning";
     case "critical":
@@ -7424,10 +7585,10 @@ function DeliveryCommentPopover({
   onAddComment,
   deliveryLabel
 }) {
-  const [open, setOpen] = React27__namespace.useState(false);
-  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const [open, setOpen] = React29__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
   const handleSubmit = () => {
     if (newCommentText.trim() && onAddComment) {
       onAddComment(newCommentText.trim());
@@ -7454,8 +7615,8 @@ function DeliveryCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27__namespace.useRef(open);
-  React27__namespace.useEffect(() => {
+  const prevOpenRef = React29__namespace.useRef(open);
+  React29__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7567,8 +7728,8 @@ function ProductionCommentSection({
   comments = [],
   onAddComment
 }) {
-  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
-  const [newComment, setNewComment] = React27__namespace.useState("");
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const [newComment, setNewComment] = React29__namespace.useState("");
   const handleSubmit = () => {
     if (newComment.trim() && onAddComment) {
       onAddComment(newComment.trim());
@@ -7666,6 +7827,20 @@ function DeliveryListItem({
   onClick
 }) {
   const hasComments = (delivery.comments?.length ?? 0) > 0;
+  const isComplete = (delivery.progress ?? 0) >= 100;
+  const getIconStyles = () => {
+    if (delivery.status === "critical") {
+      return { bg: "bg-red-100 dark:bg-red-950/50", icon: "text-red-600 dark:text-red-400" };
+    }
+    if (delivery.status === "delayed") {
+      return { bg: "bg-amber-100 dark:bg-amber-950/50", icon: "text-amber-600 dark:text-amber-400" };
+    }
+    if (isComplete) {
+      return { bg: "bg-green-100 dark:bg-green-950/50", icon: "text-green-600 dark:text-green-400" };
+    }
+    return { bg: "bg-muted", icon: "text-muted-foreground" };
+  };
+  const iconStyles = getIconStyles();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -7679,15 +7854,8 @@ function DeliveryListItem({
         /* @__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"
-          ) }) }),
+            iconStyles.bg
+          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
@@ -7706,9 +7874,9 @@ function DeliveryListItem({
           /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
-              variant: getStatusBadgeVariant(delivery.status),
-              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
-              children: getStatusLabel(delivery.status)
+              variant: getStatusBadgeVariant(delivery.status, isComplete),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status, isComplete)),
+              children: getStatusLabel(delivery.status, isComplete)
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
@@ -7724,7 +7892,7 @@ function DeliveryDetailsView({
   onAddComment
 }) {
   const elements = delivery.elements ?? [];
-  const categorizedElements = React27__namespace.useMemo(() => {
+  const categorizedElements = React29__namespace.useMemo(() => {
     const sent = [];
     const notSent = [];
     const moved = [];
@@ -7782,9 +7950,9 @@ function DeliveryDetailsView({
           /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
-              variant: getStatusBadgeVariant(delivery.status),
-              className: cn("text-xs", getStatusBadgeClasses(delivery.status)),
-              children: getStatusLabel(delivery.status)
+              variant: getStatusBadgeVariant(delivery.status, sentCount === totalCount && totalCount > 0),
+              className: cn("text-xs", getStatusBadgeClasses(delivery.status, sentCount === totalCount && totalCount > 0)),
+              children: getStatusLabel(delivery.status, sentCount === totalCount && totalCount > 0)
             }
           )
         ] })
@@ -7957,9 +8125,9 @@ function MainView({
           /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
-              variant: getStatusBadgeVariant(productionStatus),
-              className: cn("text-xs ml-auto", getStatusBadgeClasses(productionStatus)),
-              children: getStatusLabel(productionStatus)
+              variant: getStatusBadgeVariant(productionStatus, isComplete),
+              className: cn("text-xs ml-auto", getStatusBadgeClasses(productionStatus, isComplete)),
+              children: getStatusLabel(productionStatus, isComplete)
             }
           )
         ] }),
@@ -7970,7 +8138,7 @@ function MainView({
               value: productionProgress,
               size: 100,
               strokeWidth: 10,
-              variant: getProgressVariant(productionStatus),
+              variant: getProgressVariant(productionStatus, isComplete),
               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" }),
@@ -8092,15 +8260,15 @@ function WeekDetailDialog({
 }) {
   const production = data?.production;
   const initialProduced = production?.produced ?? 0;
-  const [producedValue, setProducedValue] = React27__namespace.useState(initialProduced.toString());
-  const [hasChanges, setHasChanges] = React27__namespace.useState(false);
-  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
-  React27__namespace.useEffect(() => {
+  const [producedValue, setProducedValue] = React29__namespace.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React29__namespace.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
+  React29__namespace.useEffect(() => {
     const newProduced = data?.production?.produced ?? 0;
     setProducedValue(newProduced.toString());
     setHasChanges(false);
   }, [data]);
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     if (!open) {
       setSelectedDelivery(null);
     }
@@ -8151,59 +8319,1074 @@ function WeekDetailDialog({
     }
   ) }) });
 }
-function RowHeaderCell({
-  className,
-  data,
-  showProgress = true,
-  ...props
+function getStatusBadgeVariant2(status, isComplete) {
+  if (isComplete) return "outline";
+  switch (status) {
+    case "on-time":
+      return "outline";
+    // Grey for on-track
+    case "delayed":
+      return "secondary";
+    case "critical":
+      return "destructive";
+    default:
+      return "outline";
+  }
+}
+function getStatusBadgeClasses2(status, isComplete) {
+  if (isComplete) {
+    return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+  }
+  switch (status) {
+    case "on-time":
+      return "border-muted-foreground/50 text-muted-foreground bg-muted/50";
+    // Grey for on-track
+    case "delayed":
+      return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
+    case "critical":
+      return "";
+    default:
+      return "border-muted-foreground/50 text-muted-foreground";
+  }
+}
+function getStatusLabel2(status, isComplete) {
+  if (isComplete) return "Complete";
+  switch (status) {
+    case "on-time":
+      return "On Track";
+    case "delayed":
+      return "At Risk";
+    case "critical":
+      return "Critical";
+    case "pending":
+      return "Pending";
+    default:
+      return status;
+  }
+}
+function getShipmentStatusBadgeClasses2(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 getShipmentStatusRowBg2(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 ElementProductionDialog({
+  open,
+  onOpenChange,
+  elements,
+  onSave
 }) {
-  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,
+  const [searchQuery, setSearchQuery] = React29__namespace.useState("");
+  const [selectedIds, setSelectedIds] = React29__namespace.useState(
+    new Set(elements.filter((e) => e.isProduced).map((e) => e.id))
+  );
+  React29__namespace.useEffect(() => {
+    if (open) {
+      setSelectedIds(new Set(elements.filter((e) => e.isProduced).map((e) => e.id)));
+      setSearchQuery("");
+    }
+  }, [open, elements]);
+  const filteredElements = React29__namespace.useMemo(() => {
+    if (!searchQuery.trim()) return elements;
+    const query = searchQuery.toLowerCase();
+    return elements.filter(
+      (e) => e.name.toLowerCase().includes(query) || e.prefix?.toLowerCase().includes(query) || e.type?.toLowerCase().includes(query)
+    );
+  }, [elements, searchQuery]);
+  React29__namespace.useMemo(() => {
+    const prefixes = /* @__PURE__ */ new Set();
+    elements.forEach((e) => {
+      if (e.prefix) prefixes.add(e.prefix);
+    });
+    return Array.from(prefixes).sort();
+  }, [elements]);
+  const toggleElement = (id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  const selectAll = () => {
+    setSelectedIds(new Set(filteredElements.map((e) => e.id)));
+  };
+  const deselectAll = () => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  };
+  const handleSave = () => {
+    onSave(Array.from(selectedIds));
+    onOpenChange(false);
+  };
+  const selectedCount = selectedIds.size;
+  const totalCount = elements.length;
+  const selectedWeight = elements.filter((e) => selectedIds.has(e.id)).reduce((sum, e) => sum + (e.weight ?? 0), 0);
+  const totalWeight = elements.reduce((sum, e) => sum + (e.weight ?? 0), 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-fit max-w-[950px] w-fit max-h-[85vh] flex flex-col gap-0 p-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "w-full p-6 pb-0 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Enter production progress" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Mark elements as produced (",
+        selectedCount,
+        " / ",
+        totalCount,
+        " selected)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-0 flex flex-col p-6 pt-4 gap-4 overflow-hidden w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-3 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
             {
-              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"
-              ]
+              placeholder: "Search elements...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "pl-9 w-full"
             }
           )
         ] }),
-        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",
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
             {
-              className: "h-full bg-primary rounded-full transition-all",
-              style: { width: `${progressPercent}%` }
+              variant: "outline",
+              size: "sm",
+              onClick: selectAll,
+              children: "Select all"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: deselectAll,
+              children: "Deselect all"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 rounded-lg border bg-card overflow-hidden", children: filteredElements.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full w-fit", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "bg-muted/50 hover:bg-muted/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-[44px] bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: selectedIds.size === filteredElements.length && filteredElements.length > 0,
+              onCheckedChange: (checked) => {
+                if (checked) {
+                  selectAll();
+                } else {
+                  deselectAll();
+                }
+              },
+              "aria-label": "Select all elements"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-medium text-primary", children: [
-            data.totalBooked.toLocaleString(),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-muted/50", children: "Element" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-muted/50 w-[80px]", children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-muted/50 text-right w-[90px]", children: "Weight" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-muted/50 text-right w-[80px]", children: "Size" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "bg-muted/50 text-center w-[100px]", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: filteredElements.map((element) => {
+          const isSelected = selectedIds.has(element.id);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              className: cn(
+                "cursor-pointer transition-colors",
+                isSelected && "bg-green-50/50 dark:bg-green-950/20"
+              ),
+              onClick: () => toggleElement(element.id),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-[44px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleElement(element.id),
+                    onClick: (e) => e.stopPropagation(),
+                    "aria-label": `Mark ${element.name} as produced`
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  element.prefix && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[10px] h-5 shrink-0 font-mono", children: element.prefix }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: element.name })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-muted-foreground w-[80px]", children: element.type || "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums text-muted-foreground w-[90px]", children: element.weight != null ? `${element.weight.toLocaleString()} kg` : "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums text-muted-foreground w-[80px]", children: element.size != null ? `${element.size.toLocaleString()} ${element.sizeUnit || "sqm"}` : "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-center w-[100px]", children: isSelected ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 mr-1" }),
+                      "Produced"
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: "border-muted-foreground/50 text-muted-foreground",
+                    children: "Not produced"
+                  }
+                ) })
+              ]
+            },
+            element.id
+          );
+        }) })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full min-h-[200px] text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-10 w-10 mx-auto mb-3 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "No elements found" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Try adjusting your search" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: "w-full p-6 pt-4 border-t shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          selectedCount,
+          " / ",
+          totalCount,
+          " elements"
+        ] }),
+        totalWeight > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tabular-nums font-medium text-foreground", children: [
+            (selectedWeight / 1e3).toLocaleString(void 0, { maximumFractionDigits: 1 }),
             " / ",
-            data.totalRequired.toLocaleString(),
-            " Booked"
+            (totalWeight / 1e3).toLocaleString(void 0, { maximumFractionDigits: 1 }),
+            " ton"
           ] })
         ] })
-      ]
-    }
-  );
-}
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleSave, children: "Save progress" })
+      ] })
+    ] }) })
+  ] }) });
+}
+function DeliveryCommentPopover2({
+  comments = [],
+  onAddComment,
+  deliveryLabel
+}) {
+  const [open, setOpen] = React29__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const 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 formatDate3 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  React29__namespace.useEffect(() => {
+    if (!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: "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: deliveryLabel })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 h-fit 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: formatDate3(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),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+                  "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.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 ProductionCommentSection2({
+  comments = [],
+  onAddComment
+}) {
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const [newComment, setNewComment] = React29__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 formatDate3 = (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: formatDate3(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 DeliveryListItem2({
+  delivery,
+  index,
+  onClick
+}) {
+  const hasComments = (delivery.comments?.length ?? 0) > 0;
+  const isComplete = (delivery.progress ?? 0) >= 100;
+  const getIconStyles = () => {
+    if (delivery.status === "critical") {
+      return { bg: "bg-red-100 dark:bg-red-950/50", icon: "text-red-600 dark:text-red-400" };
+    }
+    if (delivery.status === "delayed") {
+      return { bg: "bg-amber-100 dark:bg-amber-950/50", icon: "text-amber-600 dark:text-amber-400" };
+    }
+    if (isComplete) {
+      return { bg: "bg-green-100 dark:bg-green-950/50", icon: "text-green-600 dark:text-green-400" };
+    }
+    return { bg: "bg-muted", icon: "text-muted-foreground" };
+  };
+  const iconStyles = getIconStyles();
+  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",
+            iconStyles.bg
+          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              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: getStatusBadgeVariant2(delivery.status, isComplete),
+              className: cn("text-xs", getStatusBadgeClasses2(delivery.status, isComplete)),
+              children: getStatusLabel2(delivery.status, isComplete)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function DeliveryDetailsView2({
+  delivery,
+  week,
+  onBack,
+  onAddComment
+}) {
+  const elements = delivery.elements ?? [];
+  const categorizedElements = React29__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;
+  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-4 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"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 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(
+            DeliveryCommentPopover2,
+            {
+              comments: delivery.comments,
+              onAddComment,
+              deliveryLabel: delivery.label || "Delivery"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant2(delivery.status, sentCount === totalCount && totalCount > 0),
+              className: cn("text-xs", getStatusBadgeClasses2(delivery.status, sentCount === totalCount && totalCount > 0)),
+              children: getStatusLabel2(delivery.status, sentCount === totalCount && totalCount > 0)
+            }
+          )
+        ] })
+      ] }),
+      /* @__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: [
+            "\u2192 ",
+            delivery.destination
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1 px-4 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      totalCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatusProgress,
+          {
+            value: totalCount > 0 ? sentCount / totalCount * 100 : 0,
+            currentCount: sentCount,
+            totalCount,
+            unitLabel: "shipped",
+            showLabel: true,
+            showCheckmark: true,
+            size: "md"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-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-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+              categorizedElements.notSent.length,
+              " Missing"
+            ] })
+          ] }),
+          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-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: getShipmentStatusRowBg2(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 ? `${element.weight} ${element.weightUnit || "kg"}` : "\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", getShipmentStatusBadgeClasses2(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 MainView2({
+  supplier,
+  week,
+  data,
+  productionElements,
+  previousProducedCount,
+  onOpenProductionDialog,
+  onSelectDelivery,
+  onAddProductionComment
+}) {
+  const production = data?.production;
+  const producedCount = productionElements.filter((e) => e.isProduced).length;
+  const totalCount = productionElements.length;
+  const productionProgress = totalCount > 0 ? Math.round(producedCount / totalCount * 100) : 0;
+  const isComplete = productionProgress >= 100;
+  const hasProductionComments = (production?.comments?.length ?? 0) > 0;
+  const showPreviousProgress = !isComplete && previousProducedCount !== void 0 && previousProducedCount !== producedCount;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-in fade-in-0 duration-200", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { className: "px-4 pt-4 pb-3 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
+        supplier.name,
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-xs font-normal", children: supplier.badgeType })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetDescription, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }),
+        week.label,
+        " \u2022 ",
+        week.dateRange
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1 px-4 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", 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" })
+        ] }),
+        totalCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CircularProgress,
+              {
+                value: productionProgress,
+                size: 88,
+                strokeWidth: 8,
+                variant: productionProgress >= 100 ? "success" : productionProgress >= 50 ? "success" : productionProgress > 0 ? "warning" : "destructive",
+                showCheckmark: true,
+                children: productionProgress < 100 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg font-bold tabular-nums", children: [
+                  Math.round(productionProgress),
+                  "%"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-foreground", children: [
+                producedCount,
+                " / ",
+                totalCount,
+                " elements"
+              ] }),
+              showPreviousProgress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [
+                "Previously: ",
+                previousProducedCount,
+                " / ",
+                totalCount
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              className: "w-full",
+              onClick: onOpenProductionDialog,
+              children: "Enter production progress"
+            }
+          )
+        ] }) : (
+          /* No elements - show placeholder with button still available */
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-6 text-muted-foreground bg-muted/30 rounded-lg", 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 to track" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                className: "w-full",
+                variant: "outline",
+                onClick: onOpenProductionDialog,
+                children: "Enter production progress"
+              }
+            )
+          ] })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__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(
+            ProductionCommentSection2,
+            {
+              comments: production?.comments,
+              onAddComment: onAddProductionComment
+            }
+          )
+        ] })
+      ] }),
+      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(
+          DeliveryListItem2,
+          {
+            delivery,
+            index,
+            onClick: () => onSelectDelivery(delivery)
+          },
+          delivery.id
+        )) })
+      ] }),
+      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.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 WeekDetailSheet({
+  open,
+  onOpenChange,
+  supplier,
+  week,
+  data,
+  onProductionUpdate,
+  onAddProductionComment,
+  onAddDeliveryComment
+}) {
+  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
+  const [productionDialogOpen, setProductionDialogOpen] = React29__namespace.useState(false);
+  const [previousProducedCount, setPreviousProducedCount] = React29__namespace.useState(void 0);
+  const productionElements = React29__namespace.useMemo(() => {
+    if (!data?.deliveries) return [];
+    const elements = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    data.deliveries.forEach((delivery) => {
+      delivery.elements?.forEach((element) => {
+        if (!seenIds.has(element.id)) {
+          seenIds.add(element.id);
+          elements.push({
+            id: element.id,
+            name: element.name,
+            prefix: element.prefix,
+            type: element.type,
+            weight: element.weight,
+            size: element.sizeSqm,
+            sizeUnit: "sqm",
+            isProduced: element.isProduced
+          });
+        }
+      });
+    });
+    return elements;
+  }, [data?.deliveries]);
+  const currentProducedCount = productionElements.filter((e) => e.isProduced).length;
+  React29__namespace.useEffect(() => {
+    if (open && data?.deliveries) {
+      setPreviousProducedCount(currentProducedCount);
+    }
+  }, [open]);
+  React29__namespace.useEffect(() => {
+    if (!open) {
+      setSelectedDelivery(null);
+      setProductionDialogOpen(false);
+      setPreviousProducedCount(void 0);
+    }
+  }, [open]);
+  const handleProductionSave = (producedIds) => {
+    if (!supplier || !week || !onProductionUpdate) return;
+    const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
+    onProductionUpdate(supplier.id, weekKey, producedIds);
+    setPreviousProducedCount(producedIds.length);
+  };
+  if (!supplier || !week || !data) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-full sm:max-w-lg p-0 overflow-hidden",
+        children: selectedDelivery ? /* @__PURE__ */ jsxRuntime.jsx(
+          DeliveryDetailsView2,
+          {
+            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(
+          MainView2,
+          {
+            supplier,
+            week,
+            data,
+            productionElements,
+            previousProducedCount,
+            onOpenProductionDialog: () => setProductionDialogOpen(true),
+            onSelectDelivery: setSelectedDelivery,
+            onAddProductionComment: onAddProductionComment ? (text) => {
+              const weekKey = `${week.year}-W${week.weekNumber.toString().padStart(2, "0")}`;
+              onAddProductionComment(supplier.id, weekKey, text);
+            } : void 0
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ElementProductionDialog,
+      {
+        open: productionDialogOpen,
+        onOpenChange: setProductionDialogOpen,
+        elements: productionElements,
+        onSave: handleProductionSave
+      }
+    )
+  ] });
+}
+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,
@@ -8322,13 +9505,13 @@ function CalibrationWeekCell({
   onAddClick,
   ...props
 }) {
-  const inputRef = React27__namespace.useRef(null);
-  const [localValue, setLocalValue] = React27__namespace.useState(
+  const inputRef = React29__namespace.useRef(null);
+  const [localValue, setLocalValue] = React29__namespace.useState(
     data.entered !== null ? String(data.entered) : ""
   );
-  const [isHovered, setIsHovered] = React27__namespace.useState(false);
-  const [isEditing, setIsEditing] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const [isHovered, setIsHovered] = React29__namespace.useState(false);
+  const [isEditing, setIsEditing] = React29__namespace.useState(false);
+  React29__namespace.useEffect(() => {
     setLocalValue(data.entered !== null ? String(data.entered) : "");
   }, [data.entered]);
   const unitLabel = formatCalibrationUnit(unit);
@@ -8514,11 +9697,11 @@ function CommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
-  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
-  const selectedPrefixName = React27__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React29__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const selectedPrefixName = React29__namespace.useMemo(() => {
     const prefix = availablePrefixes.find((p) => p.id === selectedPrefixId);
     return prefix?.name ?? "";
   }, [availablePrefixes, selectedPrefixId]);
@@ -8550,8 +9733,8 @@ function CommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27__namespace.useRef(open);
-  React27__namespace.useEffect(() => {
+  const prevOpenRef = React29__namespace.useRef(open);
+  React29__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -8780,7 +9963,7 @@ function CalibrationTable({
     onAddComment,
     onAddEarlierWeek
   } = config;
-  const calculatedStartDate = React27__namespace.useMemo(() => {
+  const calculatedStartDate = React29__namespace.useMemo(() => {
     if (startDate) return startDate;
     let earliest = null;
     for (const prefix of prefixes) {
@@ -8801,31 +9984,31 @@ function CalibrationTable({
     }
     return earliest ?? /* @__PURE__ */ new Date();
   }, [startDate, prefixes]);
-  const [additionalWeeks, setAdditionalWeeks] = React27__namespace.useState(0);
-  const weeks = React27__namespace.useMemo(() => {
+  const [additionalWeeks, setAdditionalWeeks] = React29__namespace.useState(0);
+  const weeks = React29__namespace.useMemo(() => {
     const start = new Date(calculatedStartDate);
     start.setDate(start.getDate() - additionalWeeks * 7);
     return generateWeeks(start, weekCount + additionalWeeks);
   }, [calculatedStartDate, weekCount, additionalWeeks]);
-  React27__namespace.useMemo(() => {
+  React29__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const [currentPage, setCurrentPage] = React27__namespace.useState(0);
-  const [pageSize, setPageSize] = React27__namespace.useState(defaultPageSize);
-  const [searchQuery, setSearchQuery] = React27__namespace.useState("");
-  const filteredPrefixes = React27__namespace.useMemo(() => {
+  const [currentPage, setCurrentPage] = React29__namespace.useState(0);
+  const [pageSize, setPageSize] = React29__namespace.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React29__namespace.useState("");
+  const filteredPrefixes = React29__namespace.useMemo(() => {
     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 = React27__namespace.useMemo(() => {
+  const paginatedPrefixes = React29__namespace.useMemo(() => {
     const start = currentPage * pageSize;
     return filteredPrefixes.slice(start, start + pageSize);
   }, [filteredPrefixes, currentPage, pageSize]);
-  React27__namespace.useMemo(
+  React29__namespace.useMemo(
     () => canSubmitCalibration(prefixes),
     [prefixes]
   );
@@ -8849,7 +10032,7 @@ function CalibrationTable({
     }
     return allComments;
   };
-  const availablePrefixes = React27__namespace.useMemo(
+  const availablePrefixes = React29__namespace.useMemo(
     () => prefixes.map((p) => ({ id: p.id, name: p.name })),
     [prefixes]
   );
@@ -9086,14 +10269,14 @@ function CommentDialog({
   open,
   onOpenChange
 }) {
-  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
-  const [selectedWeekKey, setSelectedWeekKey] = React27__namespace.useState("");
-  const [commentText, setCommentText] = React27__namespace.useState("");
-  const currentWeek = React27__namespace.useMemo(
+  const [selectedPrefixId, setSelectedPrefixId] = React29__namespace.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React29__namespace.useState("");
+  const [commentText, setCommentText] = React29__namespace.useState("");
+  const currentWeek = React29__namespace.useMemo(
     () => weeks.find((w) => w.isCurrentWeek),
     [weeks]
   );
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     if (open) {
       setSelectedPrefixId(prefixes[0]?.id ?? "");
       setSelectedWeekKey(currentWeek ? getWeekKey(currentWeek.startDate) : weeks[0] ? getWeekKey(weeks[0].startDate) : "");
@@ -9423,40 +10606,36 @@ function groupDeliveriesByPrefixAndDay(deliveries) {
   }
   return grouped;
 }
-function getLeftStrokeStyles(state, hasRisk, isHovered) {
+function getCardStyles(state, hasRisk, isHovered) {
   if (hasRisk) {
     return {
       stroke: "border-l-[3px] border-l-red-500",
-      content: "text-foreground",
-      progressBg: "bg-red-500",
-      iconColor: "text-red-600 dark:text-red-400",
-      cardBg: "bg-background"
+      cardBg: "bg-background",
+      titleColor: "text-foreground",
+      opacity: ""
     };
   }
   switch (state) {
     case "sent":
       return {
         stroke: "border-l-[3px] border-l-green-500/40",
-        content: "text-muted-foreground/50",
-        progressBg: "bg-green-500/50",
-        iconColor: "text-green-600/50 dark:text-green-400/50",
-        cardBg: "bg-muted/30"
+        cardBg: "bg-muted/40",
+        titleColor: "text-muted-foreground",
+        opacity: "opacity-60"
       };
     case "ready":
       return {
-        stroke: "border-l-[3px] border-l-green-500",
-        content: "text-foreground",
-        progressBg: "bg-green-500",
-        iconColor: "text-green-600 dark:text-green-400",
-        cardBg: "bg-background"
+        stroke: "border-l-[4px] border-l-green-500",
+        cardBg: "bg-background",
+        titleColor: "text-foreground",
+        opacity: ""
       };
     default:
       return {
         stroke: isHovered ? "border-l-[3px] border-l-primary/50" : "border-l-[3px] border-l-border",
-        content: "text-foreground",
-        progressBg: "bg-primary",
-        iconColor: "text-muted-foreground",
-        cardBg: "bg-background"
+        cardBg: "bg-background",
+        titleColor: "text-foreground",
+        opacity: ""
       };
   }
 }
@@ -9466,55 +10645,11 @@ function DeliveryBadge({
   onCommentClick,
   className
 }) {
-  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const [isHovered, setIsHovered] = React29__namespace.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getLeftStrokeStyles(visualState, delivery.hasProductionRisk ?? false, isHovered);
-  const prefixTitle = React27__namespace.useMemo(() => {
-    const prefixSet = /* @__PURE__ */ new Set();
-    if (delivery.elements && delivery.elements.length > 0) {
-      for (const element of delivery.elements) {
-        if (element.prefix) {
-          prefixSet.add(element.prefix);
-        }
-      }
-    }
-    if (prefixSet.size === 0 && delivery.prefixScope) {
-      prefixSet.add(delivery.prefixScope);
-    }
-    const prefixes = Array.from(prefixSet);
-    if (prefixes.length === 0) {
-      return delivery.label;
-    }
-    if (prefixes.length > 3) {
-      return `${prefixes.slice(0, 3).join(" \xB7 ")} \xB7 +${prefixes.length - 3}`;
-    }
-    return prefixes.join(" \xB7 ");
-  }, [delivery]);
-  const productionProgress = React27__namespace.useMemo(() => {
-    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0 && delivery.totalTons > 0) {
-      return Math.min(delivery.producedTons / delivery.totalTons * 100, 100);
-    }
-    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0 && delivery.totalCount > 0) {
-      return Math.min(delivery.producedCount / delivery.totalCount * 100, 100);
-    }
-    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0 && delivery.totalCount > 0) {
-      return Math.min(delivery.loadedCount / delivery.totalCount * 100, 100);
-    }
-    return 0;
-  }, [delivery]);
-  const productionDisplay = React27__namespace.useMemo(() => {
-    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0) {
-      return `${delivery.producedTons}/${delivery.totalTons}t`;
-    }
-    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0) {
-      return `${delivery.producedCount}/${delivery.totalCount}`;
-    }
-    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0) {
-      return `${delivery.loadedCount}/${delivery.totalCount}`;
-    }
-    return null;
-  }, [delivery]);
+  const styles = getCardStyles(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const projectName = delivery.destination || delivery.label;
   const handleClick = (e) => {
     e.stopPropagation();
     onClick?.();
@@ -9530,38 +10665,24 @@ function DeliveryBadge({
     e.stopPropagation();
     onCommentClick?.();
   };
-  const amountColorClass = React27__namespace.useMemo(() => {
-    if (visualState === "sent") {
-      return "text-muted-foreground/40";
-    }
-    if (delivery.isReadyToUnload) {
-      return "text-green-600 dark:text-green-400";
-    }
-    if (delivery.hasProductionRisk) {
-      return "text-red-600 dark:text-red-400";
-    }
-    return "text-muted-foreground";
-  }, [visualState, delivery.isReadyToUnload, delivery.hasProductionRisk]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
         // Position relative for comment button
         "relative",
-        // Full-width in cell, 90° corners
+        // Full-width in cell, 90° corners (j3m.radius.none)
         "w-full rounded-none",
-        // Sizing using Quantum tokens:
-        // - min-h-[100px] card min-height
-        // - pt-4 pb-3 = vertical padding (j3m.spacing.m / j3m.spacing.s)
-        // - pl-4 = left padding (j3m.spacing.m)
-        // - pr-2 = minimal right padding (progress bar extends further)
-        "min-h-[100px] pt-4 pb-3 pl-4 pr-2",
-        // Card base: dynamic background based on state, complete border
+        // Compact sizing - min-h-[72px], p-4 (j3m.spacing.m)
+        "min-h-[72px] p-4",
+        // Card base: dynamic background based on state
         styles.cardBg,
         "border border-border",
         // Left stroke for status
         styles.stroke,
-        // Interactive states (reduced for sent state)
+        // Opacity for shipped state only
+        styles.opacity,
+        // Interactive states (disabled hover lift for shipped)
         "transition-all duration-200 ease-out",
         visualState !== "sent" && "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
         className
@@ -9574,7 +10695,7 @@ function DeliveryBadge({
             variant: "ghost",
             size: "icon",
             className: cn(
-              "absolute top-2 right-2",
+              "absolute top-1.5 right-1.5",
               // 44px touch target for accessibility
               "h-11 w-11",
               "rounded-full",
@@ -9606,7 +10727,7 @@ function DeliveryBadge({
               // Full width, no background (inherits from parent)
               "w-full bg-transparent text-left",
               // Layout - vertical stack
-              "flex flex-col gap-2",
+              "flex flex-col justify-between h-full min-h-[40px]",
               // Interactive states
               "cursor-pointer",
               "active:translate-y-0 active:shadow-sm",
@@ -9614,33 +10735,19 @@ function DeliveryBadge({
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 overflow-hidden pr-12", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
-                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-                delivery.supplierName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "text-xs truncate ml-auto",
-                  visualState === "sent" ? "text-muted-foreground/40" : "text-muted-foreground"
-                ), children: delivery.supplierName })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 pr-12", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "text-sm font-semibold leading-tight line-clamp-2",
+                  styles.titleColor
+                ), children: projectName }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0 mt-0.5" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pr-14", children: /* @__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("h-full rounded-full transition-all", styles.progressBg),
-                  style: { width: `${productionProgress}%` }
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                productionDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3 w-3 shrink-0", styles.iconColor) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-[11px] tabular-nums font-medium",
-                    amountColorClass
-                  ), children: productionDisplay })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
+                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
                 ] }),
-                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground/50 uppercase tracking-wide", children: "Sent" })
-                ] })
+                visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
               ] })
             ]
           }
@@ -9649,6 +10756,62 @@ function DeliveryBadge({
     }
   );
 }
+function isShippedDelivery(delivery) {
+  return delivery.status === "shipped" || delivery.status === "delivered";
+}
+function ShippedDeliveriesToggle({
+  shippedDeliveries,
+  isOpen,
+  onToggle,
+  onDeliveryClick,
+  onDeliveryCommentClick
+}) {
+  if (shippedDeliveries.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "w-full flex items-center justify-between gap-2",
+          "min-h-[44px] px-3 py-2",
+          "rounded-md",
+          "text-xs text-muted-foreground",
+          "hover:bg-muted/50 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              "Shipped (",
+              shippedDeliveries.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 pt-2", children: shippedDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
+      DeliveryBadge,
+      {
+        delivery,
+        onClick: () => onDeliveryClick?.(delivery),
+        onCommentClick: () => onDeliveryCommentClick?.(delivery)
+      },
+      delivery.id
+    )) }) })
+  ] });
+}
 function WeeklyLoadingView({
   week,
   deliveries,
@@ -9658,7 +10821,25 @@ function WeeklyLoadingView({
   showNavigation = true,
   className
 }) {
-  const weekDays = React27__namespace.useMemo(() => {
+  const [shippedOpenState, setShippedOpenState] = React29__namespace.useState({
+    1: false,
+    // Monday
+    2: false,
+    // Tuesday
+    3: false,
+    // Wednesday
+    4: false,
+    // Thursday
+    5: false
+    // Friday
+  });
+  const toggleShippedForDay = (dayOfWeek) => {
+    setShippedOpenState((prev) => ({
+      ...prev,
+      [dayOfWeek]: !prev[dayOfWeek]
+    }));
+  };
+  const weekDays = React29__namespace.useMemo(() => {
     const days = [];
     for (let i = 0; i < 5; i++) {
       const date = dateFns.addDays(week.startDate, i);
@@ -9670,22 +10851,26 @@ function WeeklyLoadingView({
     }
     return days;
   }, [week.startDate]);
-  const deliveriesByDay = React27__namespace.useMemo(() => {
+  const deliveriesByDay = React29__namespace.useMemo(() => {
     const grouped = /* @__PURE__ */ new Map();
     for (let i = 1; i <= 5; i++) {
-      grouped.set(i, []);
+      grouped.set(i, { pending: [], shipped: [] });
     }
     for (const delivery of deliveries) {
       const dayOfWeek = delivery.date.getDay();
       if (dayOfWeek >= 1 && dayOfWeek <= 5) {
-        const dayDeliveries = grouped.get(dayOfWeek) ?? [];
-        dayDeliveries.push(delivery);
-        grouped.set(dayOfWeek, dayDeliveries);
+        const dayData = grouped.get(dayOfWeek);
+        if (isShippedDelivery(delivery)) {
+          dayData.shipped.push(delivery);
+        } else {
+          dayData.pending.push(delivery);
+        }
       }
     }
     return grouped;
   }, [deliveries]);
-  const totalDeliveries = deliveries.length;
+  const totalPendingDeliveries = deliveries.filter((d) => !isShippedDelivery(d)).length;
+  const totalShippedDeliveries = deliveries.filter((d) => isShippedDelivery(d)).length;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
@@ -9702,9 +10887,9 @@ function WeeklyLoadingView({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: week.dateRange }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            totalDeliveries,
-            " ",
-            totalDeliveries === 1 ? "delivery" : "deliveries"
+            totalPendingDeliveries,
+            " pending",
+            totalShippedDeliveries > 0 && `, ${totalShippedDeliveries} shipped`
           ] })
         ] })
       ] }),
@@ -9771,8 +10956,11 @@ function WeeklyLoadingView({
           dayOfWeek
         )) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
-          const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          const dayData = deliveriesByDay.get(dayOfWeek) ?? { pending: [], shipped: [] };
+          const hasPending = dayData.pending.length > 0;
+          const hasShipped = dayData.shipped.length > 0;
+          const isEmpty = !hasPending && !hasShipped;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: cn(
@@ -9780,22 +10968,39 @@ function WeeklyLoadingView({
                 "flex flex-col p-3",
                 dayIsToday && "bg-primary/5"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
-                DeliveryBadge,
-                {
-                  delivery,
-                  onClick: () => onDeliveryClick?.(delivery),
-                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
-                },
-                delivery.id
-              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
+              children: [
+                hasPending && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: dayData.pending.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DeliveryBadge,
+                  {
+                    delivery,
+                    onClick: () => onDeliveryClick?.(delivery),
+                    onCommentClick: () => onDeliveryCommentClick?.(delivery)
+                  },
+                  delivery.id
+                )) }),
+                hasShipped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(hasPending && "mt-3"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ShippedDeliveriesToggle,
+                  {
+                    shippedDeliveries: dayData.shipped,
+                    isOpen: shippedOpenState[dayOfWeek] ?? false,
+                    onToggle: () => toggleShippedForDay(dayOfWeek),
+                    onDeliveryClick,
+                    onDeliveryCommentClick
+                  }
+                ) }),
+                isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" })
+              ]
             },
             dayOfWeek
           );
         }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden divide-y divide-border", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
-        const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
+        const dayData = deliveriesByDay.get(dayOfWeek) ?? { pending: [], shipped: [] };
+        const hasPending = dayData.pending.length > 0;
+        const hasShipped = dayData.shipped.length > 0;
+        const isEmpty = !hasPending && !hasShipped;
+        dayData.pending.length + dayData.shipped.length;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -9818,20 +11023,33 @@ function WeeklyLoadingView({
                   dayIsToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded", children: "Today" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                  dayDeliveries.length,
-                  " ",
-                  dayDeliveries.length === 1 ? "delivery" : "deliveries"
+                  dayData.pending.length,
+                  " pending",
+                  hasShipped && `, ${dayData.shipped.length} shipped`
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 p-3 pt-0", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
-                DeliveryBadge,
-                {
-                  delivery,
-                  onClick: () => onDeliveryClick?.(delivery),
-                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
-                },
-                delivery.id
-              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 p-3 pt-0", children: [
+                hasPending && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: dayData.pending.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DeliveryBadge,
+                  {
+                    delivery,
+                    onClick: () => onDeliveryClick?.(delivery),
+                    onCommentClick: () => onDeliveryCommentClick?.(delivery)
+                  },
+                  delivery.id
+                )) }),
+                hasShipped && /* @__PURE__ */ jsxRuntime.jsx(
+                  ShippedDeliveriesToggle,
+                  {
+                    shippedDeliveries: dayData.shipped,
+                    isOpen: shippedOpenState[dayOfWeek] ?? false,
+                    onToggle: () => toggleShippedForDay(dayOfWeek),
+                    onDeliveryClick,
+                    onDeliveryCommentClick
+                  }
+                ),
+                isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" })
+              ] })
             ]
           },
           dayOfWeek
@@ -9840,36 +11058,63 @@ function WeeklyLoadingView({
     ] })
   ] });
 }
-function getStatusBadgeVariant2(status) {
-  switch (status) {
-    case "shipped":
-    case "delivered":
-      return "default";
-    case "loaded":
-    case "in_progress":
-      return "secondary";
-    case "cancelled":
-      return "destructive";
-    case "planned":
-    default:
-      return "outline";
+function getTimelineState(delivery) {
+  const isShipped = delivery.status === "shipped" || delivery.status === "delivered";
+  const isReady = delivery.isReadyToUnload ?? false;
+  const hasProductionData = delivery.producedCount !== void 0 || delivery.producedTons !== void 0;
+  if (isShipped) {
+    return {
+      currentStep: "delivery",
+      documentState: "completed",
+      productionState: "completed",
+      deliveryState: "completed",
+      isReady: true,
+      currentStepLabel: "Delivery",
+      reason: "Delivery completed"
+    };
   }
-}
-function getStatusBadgeClasses2(status) {
-  switch (status) {
-    case "shipped":
-    case "delivered":
-      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
-    case "loaded":
-      return "border-blue-500 text-blue-600 bg-blue-50 dark:bg-blue-950/50";
-    case "in_progress":
-      return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
-    case "cancelled":
-      return "";
-    case "planned":
-    default:
-      return "border-muted-foreground/50 text-muted-foreground";
+  if (isReady) {
+    return {
+      currentStep: "delivery",
+      documentState: "completed",
+      productionState: "completed",
+      deliveryState: "current",
+      isReady: true,
+      currentStepLabel: "Delivery",
+      reason: "All prerequisites complete"
+    };
+  }
+  if (hasProductionData) {
+    return {
+      currentStep: "production",
+      documentState: "completed",
+      productionState: "current",
+      deliveryState: "upcoming",
+      isReady: false,
+      currentStepLabel: "Production",
+      reason: delivery.hasProductionRisk ? delivery.riskReason || "Production delay risk" : "Not all items have been produced"
+    };
+  }
+  if (delivery.status === "planned") {
+    return {
+      currentStep: "document",
+      documentState: "current",
+      productionState: "upcoming",
+      deliveryState: "upcoming",
+      isReady: false,
+      currentStepLabel: "Document",
+      reason: "Waiting for document approval"
+    };
   }
+  return {
+    currentStep: "production",
+    documentState: "completed",
+    productionState: "current",
+    deliveryState: "upcoming",
+    isReady: false,
+    currentStepLabel: "Production",
+    reason: "Production status pending"
+  };
 }
 function getElementStatusBadgeClasses(status) {
   switch (status) {
@@ -9885,6 +11130,166 @@ function getElementStatusBadgeClasses(status) {
       return "border-muted-foreground/50 text-muted-foreground";
   }
 }
+var TIMELINE_STEPS = [
+  { id: "document", label: "Document", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4" }) },
+  { id: "production", label: "Production", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: "h-4 w-4" }) },
+  { id: "delivery", label: "Delivery", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-4 w-4" }) }
+];
+function getStepStyles(state) {
+  switch (state) {
+    case "completed":
+      return {
+        dot: "bg-green-500/20 border-green-500",
+        icon: "text-green-600 dark:text-green-400",
+        label: "text-muted-foreground",
+        line: "bg-green-500"
+      };
+    case "current":
+      return {
+        dot: "bg-primary/20 border-primary",
+        icon: "text-primary",
+        label: "text-foreground font-semibold",
+        line: "bg-border"
+      };
+    case "upcoming":
+    default:
+      return {
+        dot: "bg-muted border-border",
+        icon: "text-muted-foreground/50",
+        label: "text-muted-foreground/50",
+        line: "bg-border"
+      };
+  }
+}
+function DeliveryTimeline({ timelineState }) {
+  const getStateForStep = (stepId) => {
+    switch (stepId) {
+      case "document":
+        return timelineState.documentState;
+      case "production":
+        return timelineState.productionState;
+      case "delivery":
+        return timelineState.deliveryState;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between w-full", children: TIMELINE_STEPS.map((step, index) => {
+    const state = getStateForStep(step.id);
+    const styles = getStepStyles(state);
+    const isLast = index === TIMELINE_STEPS.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React29__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center",
+              "h-10 w-10 rounded-full border-2",
+              "transition-colors duration-200",
+              styles.dot
+            ),
+            children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-4 w-4", styles.icon) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: step.icon })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs", styles.label), children: step.label })
+      ] }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 mx-2 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-0.5 w-full rounded-full",
+            styles.line
+          )
+        }
+      ) })
+    ] }, step.id);
+  }) });
+}
+function PackingStatusBadge({
+  timelineState,
+  hasRisk
+}) {
+  const getPackingStatus = () => {
+    if (timelineState.isReady) {
+      return {
+        label: "Ready",
+        className: "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800"
+      };
+    }
+    if (hasRisk) {
+      return {
+        label: "At risk",
+        className: "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800"
+      };
+    }
+    switch (timelineState.currentStep) {
+      case "document":
+        return {
+          label: "Pending approval",
+          className: "bg-muted text-muted-foreground border-border"
+        };
+      case "production":
+        return {
+          label: "In production",
+          className: "bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800"
+        };
+      default:
+        return {
+          label: "Not ready",
+          className: "bg-muted text-muted-foreground border-border"
+        };
+    }
+  };
+  const status = getPackingStatus();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Packing status:" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+      "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border",
+      status.className
+    ), children: status.label })
+  ] });
+}
+function ReadinessMessage({
+  timelineState,
+  hasRisk
+}) {
+  if (timelineState.isReady && timelineState.deliveryState === "completed") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-green-50/50 dark:bg-green-950/20 border border-green-200 dark:border-green-800/50 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Shipped" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-green-600/80 dark:text-green-400/80 mt-1 ml-6", children: "Delivery has been completed." })
+    ] });
+  }
+  if (timelineState.isReady) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-green-50/50 dark:bg-green-950/20 border border-green-200 dark:border-green-800/50 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Ready" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-green-600/80 dark:text-green-400/80 mt-1 ml-6", children: "All prerequisites are complete." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+    "rounded-lg p-3 border",
+    hasRisk ? "bg-red-50/50 dark:bg-red-950/20 border-red-200 dark:border-red-800/50" : "bg-muted/50 border-border"
+  ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+    hasRisk ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0 mt-0.5" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 rounded-full bg-primary/20 border border-primary shrink-0 mt-0.5" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+        "text-sm font-medium",
+        hasRisk ? "text-red-700 dark:text-red-300" : "text-foreground"
+      ), children: [
+        "Currently in: ",
+        timelineState.currentStepLabel
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
+        "text-xs mt-0.5",
+        hasRisk ? "text-red-600/80 dark:text-red-400/80" : "text-muted-foreground"
+      ), children: timelineState.reason })
+    ] })
+  ] }) });
+}
 function getElementRowBg(status) {
   switch (status) {
     case "loaded":
@@ -9906,7 +11311,7 @@ function AddCommentDialog({
   weekId,
   onAddComment
 }) {
-  const [commentText, setCommentText] = React27__namespace.useState("");
+  const [commentText, setCommentText] = React29__namespace.useState("");
   const handleSubmit = () => {
     if (commentText.trim() && onAddComment) {
       onAddComment({
@@ -9931,7 +11336,7 @@ function AddCommentDialog({
       handleSubmit();
     }
   };
-  React27__namespace.useEffect(() => {
+  React29__namespace.useEffect(() => {
     if (!open) {
       setCommentText("");
     }
@@ -9994,8 +11399,8 @@ function CommentsSection({
   weekId,
   onAddComment
 }) {
-  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
-  const [addDialogOpen, setAddDialogOpen] = React27__namespace.useState(false);
+  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
+  const [addDialogOpen, setAddDialogOpen] = React29__namespace.useState(false);
   const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
@@ -10058,31 +11463,6 @@ function CommentsSection({
     )
   ] });
 }
-function getDeliveryHeaderStyles(state, hasRisk) {
-  if (hasRisk) {
-    return {
-      iconBg: "bg-red-100 dark:bg-red-950/50",
-      iconColor: "text-red-600 dark:text-red-400"
-    };
-  }
-  switch (state) {
-    case "sent":
-      return {
-        iconBg: "bg-green-100 dark:bg-green-950/50",
-        iconColor: "text-green-600 dark:text-green-400"
-      };
-    case "ready":
-      return {
-        iconBg: "bg-green-100 dark:bg-green-950/50",
-        iconColor: "text-green-600 dark:text-green-400"
-      };
-    default:
-      return {
-        iconBg: "bg-muted",
-        iconColor: "text-muted-foreground"
-      };
-  }
-}
 function DeliveryDetailPage({
   delivery,
   week,
@@ -10093,14 +11473,8 @@ function DeliveryDetailPage({
   onAddComment,
   onConfirmLoad
 }) {
-  const visualState = getDeliveryVisualState(delivery);
-  const headerStyles = getDeliveryHeaderStyles(visualState, delivery.hasProductionRisk ?? false);
-  const loadedCount = delivery.loadedCount ?? delivery.elements.filter((e) => e.status === "loaded").length;
-  const totalCount = delivery.totalCount ?? delivery.elements.length;
-  const loadedPercent = totalCount > 0 ? Math.round(loadedCount / totalCount * 100) : 0;
-  const producedCount = delivery.producedCount ?? loadedCount;
-  const producedPercent = totalCount > 0 ? Math.round(producedCount / totalCount * 100) : 0;
-  const elementsByStatus = React27__namespace.useMemo(() => {
+  const timelineState = getTimelineState(delivery);
+  const elementsByStatus = React29__namespace.useMemo(() => {
     const loaded = delivery.elements.filter((e) => e.status === "loaded");
     const missing = delivery.elements.filter((e) => e.status === "missing");
     const moved = delivery.elements.filter((e) => e.status === "moved");
@@ -10108,6 +11482,7 @@ function DeliveryDetailPage({
     return { loaded, missing, moved, addons };
   }, [delivery.elements]);
   const preLoadingComments = delivery.comments.filter((c) => c.context === "pre_unloading");
+  const projectName = delivery.destination || delivery.label;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b bg-background sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -10123,129 +11498,39 @@ function DeliveryDetailPage({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-6 space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4 space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-              "flex items-center justify-center h-12 w-12 rounded-xl shrink-0",
-              headerStyles.iconBg
-            ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-6 w-6", headerStyles.iconColor) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold", children: delivery.label }),
-                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-5 w-5 text-green-600 dark:text-green-400" }),
-                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-red-500" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                delivery.supplierName,
-                delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: getStatusBadgeVariant2(delivery.status),
-                className: cn("shrink-0", getStatusBadgeClasses2(delivery.status)),
-                children: getLoadingDeliveryStatusLabel(delivery.status)
-              }
-            ),
-            delivery.isReadyToUnload && /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: "outline",
-                className: "bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700 text-green-700 dark:text-green-300",
-                children: "Ready to load"
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold leading-tight line-clamp-2", children: projectName }),
+          delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-red-500 shrink-0 mt-0.5" })
         ] }),
-        delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-l-2 border-l-red-500 bg-red-50/50 dark:bg-red-950/30 p-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-600 dark:text-red-400 shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "Production delay risk" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground", children: [
+          delivery.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delivery.location })
           ] }),
-          delivery.riskReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 mt-1 ml-6", children: delivery.riskReason })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap 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-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delivery.date.toLocaleDateString("en-US", {
-              weekday: "short",
-              month: "short",
-              day: "numeric"
-            }) })
-          ] }),
-          delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delivery.destination })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-4 space-y-3", children: [
-          (delivery.producedCount !== void 0 || delivery.producedTons !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Production" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-                "text-sm font-semibold tabular-nums",
-                delivery.isReadyToUnload ? "text-green-600 dark:text-green-400" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : ""
-              ), children: [
-                delivery.producedTons !== void 0 && delivery.totalTons !== void 0 ? `${delivery.producedTons} / ${delivery.totalTons} tons` : `Produced ${producedCount} / ${totalCount}`,
-                delivery.isReadyToUnload && " \u2713"
-              ] })
-            ] }),
-            /* @__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(
-                  "h-full rounded-full transition-all",
-                  delivery.isReadyToUnload ? "bg-green-500" : delivery.hasProductionRisk ? "bg-red-500" : "bg-amber-500"
-                ),
-                style: { width: `${producedPercent}%` }
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-2" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Loading Progress" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold tabular-nums", children: [
-                "Loaded ",
-                loadedCount,
-                " / ",
-                totalCount
-              ] })
-            ] }),
-            /* @__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(
-                  "h-full rounded-full transition-all",
-                  loadedPercent === 100 ? "bg-green-500" : "bg-primary"
-                ),
-                style: { width: `${loadedPercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap text-xs", children: [
-              elementsByStatus.loaded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
-                elementsByStatus.loaded.length,
-                " Loaded"
-              ] }),
-              elementsByStatus.missing.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-                elementsByStatus.missing.length,
-                " Missing"
-              ] }),
-              elementsByStatus.moved.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-blue-600 dark:text-blue-400", children: [
-                elementsByStatus.moved.length,
-                " Moved"
-              ] }),
-              elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-purple-600 dark:text-purple-400", children: [
-                elementsByStatus.addons.length,
-                " Add-on"
-              ] })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Expected on site: ",
+              delivery.date.toLocaleDateString("en-US", {
+                day: "numeric",
+                month: "short",
+                year: "numeric"
+              })
             ] })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PackingStatusBadge, { timelineState, hasRisk: delivery.hasProductionRisk ?? false })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: /* @__PURE__ */ jsxRuntime.jsx(DeliveryTimeline, { timelineState }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReadinessMessage,
+          {
+            timelineState,
+            hasRisk: delivery.hasProductionRisk ?? false
+          }
+        )
       ] }),
       (elementsByStatus.loaded.length > 0 || elementsByStatus.missing.length > 0 || elementsByStatus.moved.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -10376,11 +11661,11 @@ function SupplierWeeklyLoading({
   bordered = true,
   className
 }) {
-  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
-  const [sheetOpen, setSheetOpen] = React27__namespace.useState(false);
-  const [commentDelivery, setCommentDelivery] = React27__namespace.useState(null);
-  const [commentDialogOpen, setCommentDialogOpen] = React27__namespace.useState(false);
-  const [commentText, setCommentText] = React27__namespace.useState("");
+  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
+  const [sheetOpen, setSheetOpen] = React29__namespace.useState(false);
+  const [commentDelivery, setCommentDelivery] = React29__namespace.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React29__namespace.useState(false);
+  const [commentText, setCommentText] = React29__namespace.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -10524,59 +11809,36 @@ function SupplierWeeklyLoading({
     ] }) })
   ] });
 }
-function getStatusBadgeVariant3(status) {
-  switch (status) {
-    case "shipped":
-    case "delivered":
-      return "default";
-    case "loaded":
-    case "in_progress":
-      return "secondary";
-    case "cancelled":
-      return "destructive";
-    case "planned":
-    default:
-      return "outline";
-  }
-}
-function getStatusBadgeClasses3(status) {
-  switch (status) {
-    case "shipped":
-    case "delivered":
-      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
-    case "loaded":
-      return "border-blue-500 text-blue-600 bg-blue-50 dark:bg-blue-950/50";
-    case "in_progress":
-      return "border-amber-500 text-amber-600 bg-amber-50 dark:bg-amber-950/50";
-    case "cancelled":
-      return "";
-    case "planned":
-    default:
-      return "border-muted-foreground/50 text-muted-foreground";
-  }
-}
-function getLeftStrokeStyles2(state, hasRisk, isHovered) {
+function getCardStyles2(state, hasRisk, isHovered) {
   if (hasRisk) {
     return {
-      stroke: "border-l-2 border-l-red-500",
-      iconColor: "text-muted-foreground"
+      stroke: "border-l-[3px] border-l-red-500",
+      cardBg: "bg-background",
+      titleColor: "text-foreground",
+      opacity: ""
     };
   }
   switch (state) {
     case "sent":
       return {
-        stroke: "border-l-2 border-l-green-500/50",
-        iconColor: "text-muted-foreground/40"
+        stroke: "border-l-[3px] border-l-green-500/40",
+        cardBg: "bg-muted/40",
+        titleColor: "text-muted-foreground",
+        opacity: "opacity-60"
       };
     case "ready":
       return {
-        stroke: "border-l-2 border-l-green-500",
-        iconColor: "text-muted-foreground"
+        stroke: "border-l-[4px] border-l-green-500",
+        cardBg: "bg-background",
+        titleColor: "text-foreground",
+        opacity: ""
       };
     default:
       return {
-        stroke: isHovered ? "border-l-2 border-l-border" : "border-l-2 border-l-transparent",
-        iconColor: "text-muted-foreground"
+        stroke: isHovered ? "border-l-[3px] border-l-primary/50" : "border-l-[3px] border-l-border",
+        cardBg: "bg-background",
+        titleColor: "text-foreground",
+        opacity: ""
       };
   }
 }
@@ -10585,22 +11847,11 @@ function DeliveryCard({
   onTap,
   className
 }) {
-  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const [isHovered, setIsHovered] = React29__namespace.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getLeftStrokeStyles2(visualState, delivery.hasProductionRisk ?? false, isHovered);
-  const productionDisplay = React27__namespace.useMemo(() => {
-    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0) {
-      return `${delivery.producedTons} / ${delivery.totalTons}t produced`;
-    }
-    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0) {
-      return `${delivery.producedCount} / ${delivery.totalCount} produced`;
-    }
-    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0) {
-      return `Loaded ${delivery.loadedCount} / ${delivery.totalCount}`;
-    }
-    return null;
-  }, [delivery]);
+  const styles = getCardStyles2(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const projectName = delivery.destination || delivery.label;
   const handleClick = () => {
     onTap?.();
   };
@@ -10624,69 +11875,43 @@ function DeliveryCard({
         "w-full rounded-none",
         // Touch-friendly sizing - 56px min-height for iPad
         "min-h-[56px] p-4",
-        // Card styling: white background, standard border
-        "bg-background border border-border",
-        // Left stroke for status (j3m.stroke.m = 2px)
+        // Card styling: dynamic background based on state
+        styles.cardBg,
+        "border border-border",
+        // Left stroke for status
         styles.stroke,
-        // Hover/tap state - lift effect like Calibration
+        // Opacity for shipped state only
+        styles.opacity,
+        // Hover/tap state - lift effect (disabled for shipped)
         "cursor-pointer transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+        visualState !== "sent" && "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
         "active:translate-y-0 active:shadow-sm",
         // Focus state
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-        // Greyed out for sent state
-        visualState === "sent" && "opacity-60",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "flex items-center justify-center h-10 w-10 rounded-md shrink-0 bg-muted/50"
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-5 w-5", styles.iconColor) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold truncate", children: delivery.label }),
-              visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
-              visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: "text-[9px] px-1.5 py-0 h-4 bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700 text-green-700 dark:text-green-300",
-                  children: "Ready"
-                }
-              ),
-              delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-              hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
-              delivery.supplierName,
-              delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
-            ] }),
-            productionDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-                delivery.isReadyToUnload ? "text-green-600 dark:text-green-400 font-medium" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : "text-muted-foreground"
-              ), children: [
-                delivery.isReadyToUnload ? "\u2713 " : "",
-                productionDisplay
-              ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "text-sm font-semibold truncate",
+              styles.titleColor
+            ), children: projectName }),
+            delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+            hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
             ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
+            ] }),
+            visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Badge,
-            {
-              variant: getStatusBadgeVariant3(delivery.status),
-              className: cn("text-[10px] h-5", getStatusBadgeClasses3(delivery.status)),
-              children: getLoadingDeliveryStatusLabel(delivery.status)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground shrink-0" })
       ] })
     }
   );
@@ -10754,7 +11979,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React27__namespace.createContext(null);
+var CalendarContext = React29__namespace.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -10769,38 +11994,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React27__namespace.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React27__namespace.useState(defaultUserId);
-  const [events, setEventsState] = React27__namespace.useState(initialEvents);
-  const [users] = React27__namespace.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React27__namespace.useState(defaultBadgeVariant);
-  const [view, setView] = React27__namespace.useState(defaultView);
-  const [workingHours, setWorkingHours] = React27__namespace.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React27__namespace.useState(defaultVisibleHours);
-  React27__namespace.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React29__namespace.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React29__namespace.useState(defaultUserId);
+  const [events, setEventsState] = React29__namespace.useState(initialEvents);
+  const [users] = React29__namespace.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React29__namespace.useState(defaultBadgeVariant);
+  const [view, setView] = React29__namespace.useState(defaultView);
+  const [workingHours, setWorkingHours] = React29__namespace.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React29__namespace.useState(defaultVisibleHours);
+  React29__namespace.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React27__namespace.useCallback((newEvents) => {
+  const setEvents = React29__namespace.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React27__namespace.useCallback((event) => {
+  const addEvent = React29__namespace.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React27__namespace.useCallback((event) => {
+  const updateEvent = React29__namespace.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React27__namespace.useCallback((eventId) => {
+  const deleteEvent = React29__namespace.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React27__namespace.useCallback(() => {
+  const goToToday = React29__namespace.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React27__namespace.useCallback(() => {
+  const goToPrevious = React29__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -10818,7 +12043,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React27__namespace.useCallback(() => {
+  const goToNext = React29__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -10836,7 +12061,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React27__namespace.useMemo(
+  const contextValue = React29__namespace.useMemo(
     () => ({
       // State
       selectedDate,
@@ -10883,7 +12108,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React27__namespace.useContext(CalendarContext);
+  const context = React29__namespace.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -10891,14 +12116,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React27__namespace.useMemo(() => {
+  return React29__namespace.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React27__namespace.useMemo(() => {
+  return React29__namespace.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -11456,8 +12681,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React27__namespace.useState(/* @__PURE__ */ new Date());
-  React27__namespace.useEffect(() => {
+  const [now, setNow] = React29__namespace.useState(/* @__PURE__ */ new Date());
+  React29__namespace.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -11494,24 +12719,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React27__namespace.createContext(null);
+var DragContext = React29__namespace.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React27__namespace.useState(null);
-  const [isDragging, setIsDragging] = React27__namespace.useState(false);
+  const [draggedEvent, setDraggedEventState] = React29__namespace.useState(null);
+  const [isDragging, setIsDragging] = React29__namespace.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React27__namespace.useCallback((event) => {
+  const setDraggedEvent = React29__namespace.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React27__namespace.useCallback((newStartDate) => {
+  const handleDrop = React29__namespace.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -11524,7 +12749,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React27__namespace.useMemo(
+  const contextValue = React29__namespace.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -11535,7 +12760,7 @@ function DragProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React27__namespace.useContext(DragContext);
+  const context = React29__namespace.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -11580,7 +12805,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React27__namespace.useState(false);
+  const [isOver, setIsOver] = React29__namespace.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -11618,23 +12843,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React27__namespace.useState(false);
-  const dropTargetDate = React27__namespace.useMemo(() => {
+  const [isOver, setIsOver] = React29__namespace.useState(false);
+  const dropTargetDate = React29__namespace.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React27__namespace.useCallback((e) => {
+  const handleDragOver = React29__namespace.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React27__namespace.useCallback(() => {
+  const handleDragLeave = React29__namespace.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React27__namespace.useCallback((e) => {
+  const handleDrop = React29__namespace.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -11661,13 +12886,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 = React27__namespace.useCallback((e) => {
+  const handleDragStart = React29__namespace.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React27__namespace.useCallback(() => {
+  const handleDragEnd = React29__namespace.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -11708,15 +12933,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React27__namespace.useMemo(
+  const cells = React29__namespace.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React27__namespace.useMemo(
+  const eventPositions = React29__namespace.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -11898,7 +13123,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -12104,8 +13329,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
-  React27__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React29__namespace.useState(/* @__PURE__ */ new Date());
+  React29__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -12188,7 +13413,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -12196,7 +13421,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React27__namespace.useMemo(() => {
+  const currentEvents = React29__namespace.useMemo(() => {
     if (!dateFns.isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -12420,8 +13645,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
-  React27__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React29__namespace.useState(/* @__PURE__ */ new Date());
+  React29__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -12455,7 +13680,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React27__namespace.useMemo(() => {
+  const months = React29__namespace.useMemo(() => {
     const yearStart = dateFns.startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => dateFns.addMonths(yearStart, i));
   }, [selectedDate]);
@@ -12578,11 +13803,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React27__namespace.useMemo(() => {
+  const eventsByDay = React29__namespace.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = dateFns.parseISO(event.startDate);
@@ -13047,16 +14272,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React27__namespace.useState("");
-  const [description, setDescription] = React27__namespace.useState("");
-  const [startDate, setStartDate] = React27__namespace.useState("");
-  const [startTime, setStartTime] = React27__namespace.useState("");
-  const [endDate, setEndDate] = React27__namespace.useState("");
-  const [endTime, setEndTime] = React27__namespace.useState("");
-  const [color, setColor] = React27__namespace.useState("blue");
-  const [userId, setUserId] = React27__namespace.useState("");
-  const [isSubmitting, setIsSubmitting] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const [title, setTitle] = React29__namespace.useState("");
+  const [description, setDescription] = React29__namespace.useState("");
+  const [startDate, setStartDate] = React29__namespace.useState("");
+  const [startTime, setStartTime] = React29__namespace.useState("");
+  const [endDate, setEndDate] = React29__namespace.useState("");
+  const [endTime, setEndTime] = React29__namespace.useState("");
+  const [color, setColor] = React29__namespace.useState("blue");
+  const [userId, setUserId] = React29__namespace.useState("");
+  const [isSubmitting, setIsSubmitting] = React29__namespace.useState(false);
+  React29__namespace.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = dateFns.parseISO(event.startDate);
@@ -13279,7 +14504,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React27__namespace.useState("");
+  const [title, setTitle] = React29__namespace.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -13346,8 +14571,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React27__namespace.useState(visibleHours.from);
-  const [to, setTo] = React27__namespace.useState(visibleHours.to);
+  const [from, setFrom] = React29__namespace.useState(visibleHours.from);
+  const [to, setTo] = React29__namespace.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -13393,7 +14618,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React27__namespace.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React29__namespace.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -13542,8 +14767,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React27__namespace.useState(false);
-  React27__namespace.useEffect(() => {
+  const [matches, setMatches] = React29__namespace.useState(false);
+  React29__namespace.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -13595,11 +14820,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React27__namespace.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React27__namespace.useState(false);
-  const [selectedEvent, setSelectedEvent] = React27__namespace.useState(null);
-  const [dialogMode, setDialogMode] = React27__namespace.useState("add");
-  const [defaultDate, setDefaultDate] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React29__namespace.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React29__namespace.useState(false);
+  const [selectedEvent, setSelectedEvent] = React29__namespace.useState(null);
+  const [dialogMode, setDialogMode] = React29__namespace.useState("add");
+  const [defaultDate, setDefaultDate] = React29__namespace.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -13886,7 +15111,7 @@ var calculateInnerOffset = (date, range, columnWidth) => {
   const dayOfMonth = date.getDate();
   return dayOfMonth / totalRangeDays * columnWidth;
 };
-var GanttContext = React27.createContext({
+var GanttContext = React29.createContext({
   zoom: 100,
   range: "monthly",
   columnWidth: 50,
@@ -13907,11 +15132,11 @@ var GanttContentHeader = ({
   columns,
   renderHeaderItem
 }) => {
-  const id = React27.useId();
+  const id = React29.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "sticky top-0 z-20 grid w-full shrink-0 bg-background/95 backdrop-blur-sm",
+      className: "sticky top-0 z-20 grid w-full shrink-0 bg-muted/80 backdrop-blur-sm",
       style: { height: "var(--gantt-header-height)" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13955,8 +15180,8 @@ var getWeekStartDate = (year, weekNumber) => {
   return dateFns.addWeeks(week1Start, weekNumber - 1);
 };
 var WeeklyHeader = () => {
-  const gantt = React27.useContext(GanttContext);
-  const weeklyData = React27.useMemo(() => {
+  const gantt = React29.useContext(GanttContext);
+  const weeklyData = React29.useMemo(() => {
     const result = [];
     for (const yearData of gantt.timelineData) {
       const year = yearData.year;
@@ -13991,7 +15216,7 @@ var WeeklyHeader = () => {
   ] }, yearData.year));
 };
 var MonthlyHeader = () => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   return gantt.timelineData.map((year) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       GanttContentHeader,
@@ -14010,7 +15235,7 @@ var MonthlyHeader = () => {
   ] }, year.year));
 };
 var QuarterlyHeader = () => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   return gantt.timelineData.map(
     (year) => year.quarters.map((quarter, quarterIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -14038,7 +15263,7 @@ var headers = {
   quarterly: QuarterlyHeader
 };
 var GanttHeader = ({ className }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const Header2 = headers[gantt.range];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -14056,7 +15281,7 @@ var GanttSidebarItem = ({
   onSelectItem,
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const tempEndAt = feature.endAt && dateFns.isSameDay(feature.startAt, feature.endAt) ? dateFns.addDays(feature.endAt, 1) : feature.endAt;
   const duration = tempEndAt ? dateFns.formatDistance(feature.startAt, tempEndAt) : `${dateFns.formatDistance(feature.startAt, /* @__PURE__ */ new Date())} so far`;
   const handleClick = (event) => {
@@ -14108,7 +15333,7 @@ var GanttSidebarHeader = ({
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
-    className: "sticky top-0 z-10 flex shrink-0 items-end justify-between gap-2.5 border-border/50 border-b bg-background/95 px-2.5 py-2 font-medium text-muted-foreground text-xs backdrop-blur-sm",
+    className: "sticky top-0 z-40 flex shrink-0 items-end justify-between gap-2.5 border-border/50 border-b bg-muted/80 px-2.5 py-2 font-medium text-muted-foreground text-xs backdrop-blur-sm",
     style: { height: "var(--gantt-header-height)" },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 truncate text-left", children: title }),
@@ -14132,24 +15357,24 @@ function computeGroupRange(features) {
   }
   return { start: minStart, end: maxEnd };
 }
-var GanttGroupSummaryBar = React27.memo(({
+var GanttGroupSummaryBar = React29.memo(({
   group,
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
-  const timelineStartDate = React27.useMemo(
+  const gantt = React29.useContext(GanttContext);
+  const timelineStartDate = React29.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const { start: groupStart, end: groupEnd } = React27.useMemo(
+  const { start: groupStart, end: groupEnd } = React29.useMemo(
     () => computeGroupRange(group.features),
     [group.features]
   );
-  const offset = React27.useMemo(() => {
+  const offset = React29.useMemo(() => {
     if (!groupStart) return 0;
     return Math.round(getOffset(groupStart, timelineStartDate, gantt));
   }, [groupStart, timelineStartDate, gantt]);
-  const width = React27.useMemo(() => {
+  const width = React29.useMemo(() => {
     if (!groupStart || !groupEnd) return 0;
     return Math.round(getWidth(groupStart, groupEnd, gantt));
   }, [groupStart, groupEnd, gantt]);
@@ -14172,11 +15397,12 @@ var GanttGroupSummaryBar = React27.memo(({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "h-full w-full rounded-sm border border-border/60 bg-muted/40 shadow-sm",
+          className: "relative h-full w-full rounded-sm border border-border/60 bg-muted/40 shadow-sm overflow-hidden",
           style: {
             // Subtle gradient for depth
             background: "linear-gradient(180deg, hsl(var(--muted) / 0.5) 0%, hsl(var(--muted) / 0.3) 100%)"
-          }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[10px] font-medium text-muted-foreground", children: group.title }) })
         }
       )
     }
@@ -14188,13 +15414,13 @@ var GanttCollapsibleSidebarGroup = ({
   children,
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const isExpanded = gantt.expandedGroups[group.id] ?? true;
-  const { start: groupStart, end: groupEnd } = React27.useMemo(
+  const { start: groupStart, end: groupEnd } = React29.useMemo(
     () => computeGroupRange(group.features),
     [group.features]
   );
-  const duration = React27.useMemo(() => {
+  const duration = React29.useMemo(() => {
     if (!groupStart || !groupEnd) return null;
     return dateFns.formatDistance(groupStart, groupEnd);
   }, [groupStart, groupEnd]);
@@ -14208,7 +15434,7 @@ var GanttCollapsibleSidebarGroup = ({
         /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            className: "flex w-full items-center gap-2 px-2.5 py-2 text-left font-medium text-xs hover:bg-muted/30 border-b border-border/50 bg-background",
+            className: "flex w-full items-center gap-2 px-2.5 py-2 text-left font-medium text-xs hover:bg-muted/70 border-b border-border/50 bg-muted/40",
             style: { height: "var(--gantt-row-height)" },
             type: "button",
             children: [
@@ -14238,7 +15464,7 @@ var GanttCollapsibleTimelineGroup = ({
   children,
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const isExpanded = gantt.expandedGroups[group.id] ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Collapsible,
@@ -14250,7 +15476,7 @@ var GanttCollapsibleTimelineGroup = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "relative w-full border-b border-border/50",
+            className: "relative w-full border-b border-border/50 bg-muted/20",
             style: { height: "var(--gantt-row-height)" },
             children: /* @__PURE__ */ jsxRuntime.jsx(GanttGroupSummaryBar, { group })
           }
@@ -14268,7 +15494,7 @@ var GanttSidebarGroup = ({
   /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
-      className: "w-full truncate px-2.5 py-2 text-left font-medium text-muted-foreground text-xs border-b border-border/50 bg-background",
+      className: "w-full truncate px-2.5 py-2 text-left font-medium text-muted-foreground text-xs border-b border-border/50 bg-muted/40",
       style: { height: "var(--gantt-row-height)" },
       children: name
     }
@@ -14282,7 +15508,7 @@ var GanttSidebar = ({
   "div",
   {
     className: cn(
-      "sticky left-0 z-30 h-max min-h-full border-border/50 border-r bg-background",
+      "sticky left-0 z-30 h-max min-h-full border-border/50 border-r bg-muted/50",
       className
     ),
     style: { width: "var(--gantt-sidebar-width)" },
@@ -14298,7 +15524,7 @@ var GanttAddFeatureHelper = ({
   className
 }) => {
   const [scrollX] = useGanttScrollX();
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const [mousePosition, mouseRef] = usehooks.useMouse();
   const handleClick = () => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
@@ -14337,10 +15563,10 @@ var GanttColumn = ({
   index,
   isColumnSecondary
 }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const [dragging] = useGanttDragging();
   const [mousePosition, mouseRef] = usehooks.useMouse();
-  const [hovering, setHovering] = React27.useState(false);
+  const [hovering, setHovering] = React29.useState(false);
   const [windowScroll] = usehooks.useWindowScroll();
   const handleMouseEnter = () => setHovering(true);
   const handleMouseLeave = () => setHovering(false);
@@ -14370,7 +15596,7 @@ var GanttColumns = ({
   columns,
   isColumnSecondary
 }) => {
-  const id = React27.useId();
+  const id = React29.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -14389,12 +15615,12 @@ var GanttColumns = ({
     }
   );
 };
-var GanttGridLines = React27.memo(({
+var GanttGridLines = React29.memo(({
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
-  const id = React27.useId();
-  const { columns, monthBoundaryIndices } = React27.useMemo(() => {
+  const gantt = React29.useContext(GanttContext);
+  const id = React29.useId();
+  const { columns, monthBoundaryIndices } = React29.useMemo(() => {
     let totalColumns = 0;
     const monthIndices = [];
     if (gantt.range === "weekly") {
@@ -14458,7 +15684,7 @@ var GanttCreateMarkerTrigger = ({
   onCreateMarker,
   className
 }) => {
-  const gantt = React27.useContext(GanttContext);
+  const gantt = React29.useContext(GanttContext);
   const [mousePosition, mouseRef] = usehooks.useMouse();
   const [windowScroll] = usehooks.useWindowScroll();
   const x = usehooks.useThrottle(
@@ -14507,7 +15733,7 @@ var GanttFeatureDragHelper = ({
     id: `feature-drag-helper-${featureId}`
   });
   const isPressed = Boolean(attributes["aria-pressed"]);
-  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  React29.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -14553,7 +15779,7 @@ var GanttFeatureItemCard = ({
   const [, setDragging] = useGanttDragging();
   const { attributes, listeners, setNodeRef } = core.useDraggable({ id });
   const isPressed = Boolean(attributes["aria-pressed"]);
-  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  React29.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full w-full rounded-sm border bg-background px-2 py-1.5 text-xs shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -14579,37 +15805,37 @@ var GanttFeatureItem = ({
   ...feature
 }) => {
   const [scrollX] = useGanttScrollX();
-  const gantt = React27.useContext(GanttContext);
-  const timelineStartDate = React27.useMemo(
+  const gantt = React29.useContext(GanttContext);
+  const timelineStartDate = React29.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const [startAt, setStartAt] = React27.useState(feature.startAt);
-  const [endAt, setEndAt] = React27.useState(feature.endAt);
-  const width = React27.useMemo(
+  const [startAt, setStartAt] = React29.useState(feature.startAt);
+  const [endAt, setEndAt] = React29.useState(feature.endAt);
+  const width = React29.useMemo(
     () => Math.round(getWidth(startAt, endAt, gantt)),
     [startAt, endAt, gantt]
   );
-  const offset = React27.useMemo(
+  const offset = React29.useMemo(
     () => Math.round(getOffset(startAt, timelineStartDate, gantt)),
     [startAt, timelineStartDate, gantt]
   );
-  const addRange = React27.useMemo(() => getAddRange(gantt.range), [gantt.range]);
+  const addRange = React29.useMemo(() => getAddRange(gantt.range), [gantt.range]);
   const [mousePosition] = usehooks.useMouse();
-  const [previousMouseX, setPreviousMouseX] = React27.useState(0);
-  const [previousStartAt, setPreviousStartAt] = React27.useState(startAt);
-  const [previousEndAt, setPreviousEndAt] = React27.useState(endAt);
+  const [previousMouseX, setPreviousMouseX] = React29.useState(0);
+  const [previousStartAt, setPreviousStartAt] = React29.useState(startAt);
+  const [previousEndAt, setPreviousEndAt] = React29.useState(endAt);
   const mouseSensor = core.useSensor(core.MouseSensor, {
     activationConstraint: {
       distance: 10
     }
   });
-  const handleItemDragStart = React27.useCallback(() => {
+  const handleItemDragStart = React29.useCallback(() => {
     setPreviousMouseX(mousePosition.x);
     setPreviousStartAt(startAt);
     setPreviousEndAt(endAt);
   }, [mousePosition.x, startAt, endAt]);
-  const handleItemDragMove = React27.useCallback(() => {
+  const handleItemDragMove = React29.useCallback(() => {
     const currentDate = getDateByMousePosition(gantt, mousePosition.x);
     const originalDate = getDateByMousePosition(gantt, previousMouseX);
     const delta = gantt.range === "weekly" ? dateFns.differenceInDays(currentDate, originalDate) : getInnerDifferenceIn(gantt.range)(currentDate, originalDate);
@@ -14618,17 +15844,17 @@ var GanttFeatureItem = ({
     setStartAt(newStartDate);
     setEndAt(newEndDate);
   }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
-  const onDragEnd = React27.useCallback(
+  const onDragEnd = React29.useCallback(
     () => onMove?.(feature.id, startAt, endAt),
     [onMove, feature.id, startAt, endAt]
   );
-  const handleLeftDragMove = React27.useCallback(() => {
+  const handleLeftDragMove = React29.useCallback(() => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
     const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
     const newStartAt = getDateByMousePosition(gantt, x);
     setStartAt(newStartAt);
   }, [gantt, mousePosition.x, scrollX]);
-  const handleRightDragMove = React27.useCallback(() => {
+  const handleRightDragMove = React29.useCallback(() => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
     const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
     const newEndAt = getDateByMousePosition(gantt, x);
@@ -14824,21 +16050,21 @@ var GanttFeatureList = ({
     children
   }
 );
-var GanttMarker = React27.memo(({ label, date, id, onRemove, className }) => {
-  const gantt = React27.useContext(GanttContext);
-  const differenceIn = React27.useMemo(
+var GanttMarker = React29.memo(({ label, date, id, onRemove, className }) => {
+  const gantt = React29.useContext(GanttContext);
+  const differenceIn = React29.useMemo(
     () => getDifferenceIn(gantt.range),
     [gantt.range]
   );
-  const timelineStartDate = React27.useMemo(
+  const timelineStartDate = React29.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const offset = React27.useMemo(
+  const offset = React29.useMemo(
     () => differenceIn(date, timelineStartDate),
     [differenceIn, date, timelineStartDate]
   );
-  const innerOffset = React27.useMemo(
+  const innerOffset = React29.useMemo(
     () => calculateInnerOffset(
       date,
       gantt.range,
@@ -14846,7 +16072,7 @@ var GanttMarker = React27.memo(({ label, date, id, onRemove, className }) => {
     ),
     [date, gantt.range, gantt.columnWidth, gantt.zoom]
   );
-  const handleRemove = React27.useCallback(() => onRemove?.(id), [onRemove, id]);
+  const handleRemove = React29.useCallback(() => onRemove?.(id), [onRemove, id]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -14896,14 +16122,14 @@ var GanttProvider = ({
   className,
   defaultExpandedGroups = {}
 }) => {
-  const scrollRef = React27.useRef(null);
-  const [timelineData, setTimelineData] = React27.useState(
+  const scrollRef = React29.useRef(null);
+  const [timelineData, setTimelineData] = React29.useState(
     createInitialTimelineData(/* @__PURE__ */ new Date())
   );
   const [, setScrollX] = useGanttScrollX();
   const sidebarWidth = 280;
-  const [expandedGroups, setExpandedGroups] = React27.useState(defaultExpandedGroups);
-  const setGroupExpanded = React27.useCallback((groupId, expanded) => {
+  const [expandedGroups, setExpandedGroups] = React29.useState(defaultExpandedGroups);
+  const setGroupExpanded = React29.useCallback((groupId, expanded) => {
     setExpandedGroups((prev) => ({ ...prev, [groupId]: expanded }));
   }, []);
   const headerHeight = 60;
@@ -14914,7 +16140,7 @@ var GanttProvider = ({
   } else if (range === "quarterly") {
     columnWidth = 100;
   }
-  const cssVariables = React27.useMemo(
+  const cssVariables = React29.useMemo(
     () => ({
       "--gantt-zoom": `${zoom}`,
       "--gantt-column-width": `${zoom / 100 * columnWidth}px`,
@@ -14924,13 +16150,13 @@ var GanttProvider = ({
     }),
     [zoom, columnWidth, sidebarWidth]
   );
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = scrollRef.current.scrollWidth / 2 - scrollRef.current.clientWidth / 2;
       setScrollX(scrollRef.current.scrollLeft);
     }
   }, [setScrollX]);
-  const handleScroll = React27.useCallback(
+  const handleScroll = React29.useCallback(
     throttle__default.default(() => {
       const scrollElement = scrollRef.current;
       if (!scrollElement) {
@@ -14982,7 +16208,7 @@ var GanttProvider = ({
     }, 100),
     []
   );
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     const scrollElement = scrollRef.current;
     if (scrollElement) {
       scrollElement.addEventListener("scroll", handleScroll);
@@ -14993,7 +16219,7 @@ var GanttProvider = ({
       }
     };
   }, [handleScroll]);
-  const scrollToFeature = React27.useCallback(
+  const scrollToFeature = React29.useCallback(
     (feature) => {
       const scrollElement = scrollRef.current;
       if (!scrollElement) {
@@ -15073,21 +16299,21 @@ var GanttTimeline = ({
 );
 var GanttToday = ({ className }) => {
   const label = "Today";
-  const date = React27.useMemo(() => /* @__PURE__ */ new Date(), []);
-  const gantt = React27.useContext(GanttContext);
-  const differenceIn = React27.useMemo(
+  const date = React29.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const gantt = React29.useContext(GanttContext);
+  const differenceIn = React29.useMemo(
     () => getDifferenceIn(gantt.range),
     [gantt.range]
   );
-  const timelineStartDate = React27.useMemo(
+  const timelineStartDate = React29.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const offset = React27.useMemo(
+  const offset = React29.useMemo(
     () => differenceIn(date, timelineStartDate),
     [differenceIn, date, timelineStartDate]
   );
-  const innerOffset = React27.useMemo(
+  const innerOffset = React29.useMemo(
     () => Math.round(calculateInnerOffset(
       date,
       gantt.range,
@@ -15123,7 +16349,7 @@ var GanttToday = ({ className }) => {
   );
 };
 var t = tunnel__default.default();
-var KanbanContext = React27.createContext({
+var KanbanContext = React29.createContext({
   columns: [],
   data: [],
   activeCardId: null
@@ -15161,7 +16387,7 @@ var KanbanCard = ({
   } = sortable.useSortable({
     id
   });
-  const { activeCardId } = React27.useContext(KanbanContext);
+  const { activeCardId } = React29.useContext(KanbanContext);
   const style = {
     transition,
     transform: utilities.CSS.Transform.toString(transform)
@@ -15196,7 +16422,7 @@ var KanbanCards = ({
   className,
   ...props
 }) => {
-  const { data } = React27.useContext(KanbanContext);
+  const { data } = React29.useContext(KanbanContext);
   const filteredData = data.filter((item) => item.column === props.id);
   const items = filteredData.map((item) => item.id);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "overflow-hidden", children: [
@@ -15223,7 +16449,7 @@ var KanbanProvider = ({
   onDataChange,
   ...props
 }) => {
-  const [activeCardId, setActiveCardId] = React27.useState(null);
+  const [activeCardId, setActiveCardId] = React29.useState(null);
   const sensors = core.useSensors(
     core.useSensor(core.MouseSensor),
     core.useSensor(core.TouchSensor),
@@ -15732,6 +16958,7 @@ exports.SiteHeader = SiteHeader;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
+exports.StatusProgress = StatusProgress;
 exports.SubmitCalibrationBar = SubmitCalibrationBar;
 exports.SupplierCell = SupplierCell;
 exports.SupplierWeeklyLoading = SupplierWeeklyLoading;
@@ -15767,6 +16994,7 @@ exports.UserAvatarsDropdown = UserAvatarsDropdown;
 exports.VIEW_LABELS = VIEW_LABELS;
 exports.WeekCell = WeekCell;
 exports.WeekDetailDialog = WeekDetailDialog;
+exports.WeekDetailSheet = WeekDetailSheet;
 exports.WeekHeader = WeekHeader;
 exports.WeekView = WeekView;
 exports.WeeklyLoadingView = WeeklyLoadingView;