@j3m-quantum/ui 1.11.1 → 1.12.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React27 from 'react';
+import * as React29 from 'react';
 import { createContext, memo, useContext, useMemo, useId, useCallback, useState, useEffect, useRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { SearchIcon, TrashIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Check, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, ChevronsLeft, ChevronLeft, ChevronsRight, Settings2, FolderIcon, ShareIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, X, Flag, Factory, Truck, MessageSquare, ChevronDown, Plus, Send, MessageSquarePlus, AlertTriangle, CheckCircle, Calendar as Calendar$1, MapPin, Package, User, Clock, CalendarX2, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Info, Moon, PlusIcon, PencilIcon, CopyIcon, ArrowUpDown, CheckCircle2, XCircle } from 'lucide-react';
+import { SearchIcon, TrashIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, ChevronLeftIcon, ArrowLeft, ArrowRight, Check, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, GripVerticalIcon, PanelLeftIcon, ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, ChevronsLeft, ChevronLeft, ChevronsRight, Settings2, FolderIcon, ShareIcon, ChevronsUpDownIcon, SparklesIcon, BadgeCheckIcon, CreditCardIcon, BellIcon, LogOutIcon, X, Flag, Factory, Truck, MessageSquare, ChevronDown, Plus, Send, MessageSquarePlus, AlertTriangle, CheckCircle, Calendar as Calendar$1, MapPin, Package, User, Clock, CalendarX2, List, Columns, Grid2x2, Grid3x3, CalendarRange, Settings, Info, Moon, PlusIcon, PencilIcon, CopyIcon, ArrowUpDown, CheckCircle2, XCircle, Search, FileText } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -57,8 +57,8 @@ import tunnel from 'tunnel-rat';
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React27.useState(void 0);
-  React27.useEffect(() => {
+  const [isMobile, setIsMobile] = React29.useState(void 0);
+  React29.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -99,7 +99,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React27.forwardRef(
+var Button = React29.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -463,7 +463,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React27.useMemo(
+  const _values = React29.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -749,7 +749,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React27.createContext({
+var ToggleGroupContext = React29.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -786,7 +786,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React27.useContext(ToggleGroupContext);
+  const context = React29.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -816,7 +816,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React27.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React29.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1236,7 +1236,7 @@ function Label2({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React27.createContext(
+var FormFieldContext = React29.createContext(
   {}
 );
 var FormField = ({
@@ -1245,8 +1245,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React27.useContext(FormFieldContext);
-  const itemContext = React27.useContext(FormItemContext);
+  const fieldContext = React29.useContext(FormFieldContext);
+  const itemContext = React29.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1263,11 +1263,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React27.createContext(
+var FormItemContext = React29.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React27.useId();
+  const id = React29.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -2369,8 +2369,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React27.useRef(null);
-  React27.useEffect(() => {
+  const ref = React29.useRef(null);
+  React29.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -2391,9 +2391,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React27.createContext(null);
+var CarouselContext = React29.createContext(null);
 function useCarousel() {
-  const context = React27.useContext(CarouselContext);
+  const context = React29.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2415,20 +2415,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React27.useState(false);
-  const [canScrollNext, setCanScrollNext] = React27.useState(false);
-  const onSelect = React27.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React29.useState(false);
+  const [canScrollNext, setCanScrollNext] = React29.useState(false);
+  const onSelect = React29.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React27.useCallback(() => {
+  const scrollPrev = React29.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React27.useCallback(() => {
+  const scrollNext = React29.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React27.useCallback(
+  const handleKeyDown = React29.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2440,11 +2440,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2577,9 +2577,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React27.createContext(null);
+var ChartContext = React29.createContext(null);
 function useChart() {
-  const context = React27.useContext(ChartContext);
+  const context = React29.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2592,7 +2592,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React27.useId();
+  const uniqueId = React29.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2653,7 +2653,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React27.useMemo(() => {
+  const tooltipLabel = React29.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3408,6 +3408,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.useMemo(() => {
+    if (currentCount !== void 0 && totalCount !== void 0) {
+      return `${currentCount} / ${totalCount} ${unitLabel}`;
+    }
+    return `${Math.round(clampedValue)}%`;
+  }, [currentCount, totalCount, unitLabel, clampedValue]);
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex items-center justify-between", sizes.gap), children: [
+          /* @__PURE__ */ jsx("span", { className: cn("font-medium", sizes.text, colors.text), children: isComplete && showCheckmark ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Check, { className: cn(sizes.icon, colors.icon) }),
+            "Complete"
+          ] }) : labelText }),
+          !isComplete && /* @__PURE__ */ jsxs("span", { className: cn("tabular-nums text-muted-foreground", sizes.text), children: [
+            Math.round(clampedValue),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full transition-all duration-300 ease-out",
+                  colors.fill
+                ),
+                style: { width: `${clampedValue}%` }
+              }
+            )
+          }
+        ),
+        !showLabel && isComplete && showCheckmark && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", sizes.gap), children: [
+          /* @__PURE__ */ jsx(Check, { className: cn(sizes.icon, colors.icon) }),
+          /* @__PURE__ */ jsx("span", { className: cn("font-medium", sizes.text, colors.text), children: "Complete" })
+        ] })
+      ]
+    }
+  );
+}
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -3455,8 +3593,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React27.useState("light");
-  React27.useEffect(() => {
+  const [theme, setTheme] = React29.useState("light");
+  React29.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -4105,7 +4243,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React27.forwardRef(
+var SearchTrigger = React29.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -4141,7 +4279,7 @@ var SearchTrigger = React27.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -5116,9 +5254,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React27.createContext(null);
+var SidebarContext = React29.createContext(null);
 function useSidebar() {
-  const context = React27.useContext(SidebarContext);
+  const context = React29.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5134,10 +5272,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React27.useState(false);
-  const [_open, _setOpen] = React27.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React29.useState(false);
+  const [_open, _setOpen] = React29.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React27.useCallback(
+  const setOpen = React29.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5149,10 +5287,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React27.useCallback(() => {
+  const toggleSidebar = React29.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5163,7 +5301,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React27.useMemo(
+  const contextValue = React29.useMemo(
     () => ({
       state,
       open,
@@ -5621,7 +5759,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React27.useMemo(() => {
+  const width = React29.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5764,7 +5902,7 @@ var sectionVariants = cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React27.forwardRef(
+var Section = React29.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "section",
     {
@@ -5776,7 +5914,7 @@ var Section = React27.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React27.forwardRef(
+var SectionHeader = React29.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5791,7 +5929,7 @@ var SectionHeader = React27.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React27.forwardRef(
+var SectionTitle = React29.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h2",
     {
@@ -5805,7 +5943,7 @@ var SectionTitle = React27.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React27.forwardRef(
+var SectionDescription = React29.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -5819,7 +5957,7 @@ var SectionDescription = React27.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React27.forwardRef(
+var SectionContent = React29.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5833,7 +5971,7 @@ var SectionContent = React27.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React27.forwardRef(
+var SectionFooter = React29.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -6141,7 +6279,7 @@ function SiteHeader({
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-[var(--header-height,3.5rem)] w-full items-center gap-[var(--j3m-spacing-s)] px-[var(--j3m-spacing-m)]", children: [
         trigger,
         trigger && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React27.Fragment, { children: [
+        /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -6380,15 +6518,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"
   },
@@ -6403,6 +6553,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"
@@ -6430,19 +6587,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 = () => {
@@ -6559,24 +6717,18 @@ function WeekCell({
           ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2014" })
         ] }),
         deliveryCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          data.deliveries?.slice(0, 5).map((delivery, index) => {
-            const deliveryProgress = delivery.progress ?? (delivery.status === "on-time" ? 100 : delivery.status === "delayed" ? 50 : 25);
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex-1 max-w-[24px]",
-                title: delivery.label || `Delivery ${index + 1}`,
-                children: /* @__PURE__ */ jsx("div", { className: "h-1 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn("h-full rounded-full transition-all", getDeliveryStatusColor(delivery.status)),
-                    style: { width: `${deliveryProgress}%` }
-                  }
-                ) })
-              },
-              delivery.id || index
-            );
-          }),
+          data.deliveries?.slice(0, 5).map((delivery, index) => /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-[8px] text-muted-foreground", children: [
             "+",
             deliveryCount - 5
@@ -6748,11 +6900,11 @@ function PlanningWeekCommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React27.useState("");
-  const [selectedLocationId, setSelectedLocationId] = React27.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27.useState(true);
-  const [showAddForm, setShowAddForm] = React27.useState(false);
-  const selectedLocation = React27.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React29.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React29.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29.useState(true);
+  const [showAddForm, setShowAddForm] = React29.useState(false);
+  const selectedLocation = React29.useMemo(() => {
     return locationOptions.find((opt) => opt.id === selectedLocationId);
   }, [locationOptions, selectedLocationId]);
   const handleSubmit = () => {
@@ -6796,8 +6948,8 @@ function PlanningWeekCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27.useRef(open);
-  React27.useEffect(() => {
+  const prevOpenRef = React29.useRef(open);
+  React29.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7151,22 +7303,22 @@ function PlanningTable({
     stickySupplierColumn = true,
     maxHeight = "600px"
   } = config;
-  const weeks = React27.useMemo(
+  const weeks = React29.useMemo(
     () => generateWeeks(startDate, weekCount),
     [startDate, weekCount]
   );
-  const currentWeekKey = React27.useMemo(() => {
+  const currentWeekKey = React29.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const columns = React27.useMemo(
+  const columns = React29.useMemo(
     () => generateColumns(weeks, config, suppliers),
     [weeks, config, suppliers]
   );
-  const [sorting, setSorting] = React27.useState([]);
-  const [columnFilters, setColumnFilters] = React27.useState([]);
-  const [columnVisibility, setColumnVisibility] = React27.useState({});
-  const [rowSelection, setRowSelection] = React27.useState({});
+  const [sorting, setSorting] = React29.useState([]);
+  const [columnFilters, setColumnFilters] = React29.useState([]);
+  const [columnVisibility, setColumnVisibility] = React29.useState({});
+  const [rowSelection, setRowSelection] = React29.useState({});
   const table = useReactTable({
     data: suppliers,
     columns,
@@ -7289,10 +7441,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":
@@ -7301,19 +7455,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";
@@ -7327,10 +7486,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":
@@ -7373,10 +7534,10 @@ function DeliveryCommentPopover({
   onAddComment,
   deliveryLabel
 }) {
-  const [open, setOpen] = React27.useState(false);
-  const [newCommentText, setNewCommentText] = React27.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27.useState(true);
-  const [showAddForm, setShowAddForm] = React27.useState(false);
+  const [open, setOpen] = React29.useState(false);
+  const [newCommentText, setNewCommentText] = React29.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29.useState(true);
+  const [showAddForm, setShowAddForm] = React29.useState(false);
   const handleSubmit = () => {
     if (newCommentText.trim() && onAddComment) {
       onAddComment(newCommentText.trim());
@@ -7403,8 +7564,8 @@ function DeliveryCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27.useRef(open);
-  React27.useEffect(() => {
+  const prevOpenRef = React29.useRef(open);
+  React29.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7516,8 +7677,8 @@ function ProductionCommentSection({
   comments = [],
   onAddComment
 }) {
-  const [showAddForm, setShowAddForm] = React27.useState(false);
-  const [newComment, setNewComment] = React27.useState("");
+  const [showAddForm, setShowAddForm] = React29.useState(false);
+  const [newComment, setNewComment] = React29.useState("");
   const handleSubmit = () => {
     if (newComment.trim() && onAddComment) {
       onAddComment(newComment.trim());
@@ -7615,6 +7776,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__ */ jsxs(
     "button",
     {
@@ -7628,15 +7803,8 @@ function DeliveryListItem({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: cn(
             "flex items-center justify-center h-8 w-8 rounded-lg",
-            delivery.status === "on-time" && "bg-green-100 dark:bg-green-950/50",
-            delivery.status === "delayed" && "bg-amber-100 dark:bg-amber-950/50",
-            delivery.status === "critical" && "bg-red-100 dark:bg-red-950/50"
-          ), children: /* @__PURE__ */ jsx(Truck, { className: cn(
-            "h-4 w-4",
-            delivery.status === "on-time" && "text-green-600 dark:text-green-400",
-            delivery.status === "delayed" && "text-amber-600 dark:text-amber-400",
-            delivery.status === "critical" && "text-red-600 dark:text-red-400"
-          ) }) }),
+            iconStyles.bg
+          ), children: /* @__PURE__ */ jsx(Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
@@ -7655,9 +7823,9 @@ function DeliveryListItem({
           /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
@@ -7673,7 +7841,7 @@ function DeliveryDetailsView({
   onAddComment
 }) {
   const elements = delivery.elements ?? [];
-  const categorizedElements = React27.useMemo(() => {
+  const categorizedElements = React29.useMemo(() => {
     const sent = [];
     const notSent = [];
     const moved = [];
@@ -7731,9 +7899,9 @@ function DeliveryDetailsView({
           /* @__PURE__ */ 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)
             }
           )
         ] })
@@ -7906,9 +8074,9 @@ function MainView({
           /* @__PURE__ */ 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)
             }
           )
         ] }),
@@ -7919,7 +8087,7 @@ function MainView({
               value: productionProgress,
               size: 100,
               strokeWidth: 10,
-              variant: getProgressVariant(productionStatus),
+              variant: getProgressVariant(productionStatus, isComplete),
               showCheckmark: isComplete,
               children: isComplete ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
                 /* @__PURE__ */ jsx(Check, { className: "h-6 w-6 text-green-600" }),
@@ -8041,15 +8209,15 @@ function WeekDetailDialog({
 }) {
   const production = data?.production;
   const initialProduced = production?.produced ?? 0;
-  const [producedValue, setProducedValue] = React27.useState(initialProduced.toString());
-  const [hasChanges, setHasChanges] = React27.useState(false);
-  const [selectedDelivery, setSelectedDelivery] = React27.useState(null);
-  React27.useEffect(() => {
+  const [producedValue, setProducedValue] = React29.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React29.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React29.useState(null);
+  React29.useEffect(() => {
     const newProduced = data?.production?.produced ?? 0;
     setProducedValue(newProduced.toString());
     setHasChanges(false);
   }, [data]);
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (!open) {
       setSelectedDelivery(null);
     }
@@ -8100,59 +8268,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__ */ jsxs(
-    "div",
-    {
-      "data-slot": "row-header-cell",
-      className: cn(
-        "flex flex-col justify-center gap-1.5 py-2 px-3 min-w-[200px] h-[100px] bg-background",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: data.name }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: data.typeCode })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            Badge,
+  const [searchQuery, setSearchQuery] = React29.useState("");
+  const [selectedIds, setSelectedIds] = React29.useState(
+    new Set(elements.filter((e) => e.isProduced).map((e) => e.id))
+  );
+  React29.useEffect(() => {
+    if (open) {
+      setSelectedIds(new Set(elements.filter((e) => e.isProduced).map((e) => e.id)));
+      setSearchQuery("");
+    }
+  }, [open, elements]);
+  const filteredElements = React29.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.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__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ 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__ */ jsxs(DialogHeader, { className: "w-full p-6 pb-0 shrink-0", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Enter production progress" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Mark elements as produced (",
+        selectedCount,
+        " / ",
+        totalCount,
+        " selected)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col p-6 pt-4 gap-4 overflow-hidden w-fit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3 shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ 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__ */ jsx(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__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-            "div",
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              className: "h-full bg-primary rounded-full transition-all",
-              style: { width: `${progressPercent}%` }
+              variant: "outline",
+              size: "sm",
+              onClick: selectAll,
+              children: "Select all"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: deselectAll,
+              children: "Deselect all"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 rounded-lg border bg-card overflow-hidden", children: filteredElements.length > 0 ? /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-fit", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { className: "bg-muted/50 hover:bg-muted/50", children: [
+          /* @__PURE__ */ jsx(TableHead, { className: "w-[44px] bg-muted/50", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedIds.size === filteredElements.length && filteredElements.length > 0,
+              onCheckedChange: (checked) => {
+                if (checked) {
+                  selectAll();
+                } else {
+                  deselectAll();
+                }
+              },
+              "aria-label": "Select all elements"
             }
           ) }),
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-primary", children: [
-            data.totalBooked.toLocaleString(),
+          /* @__PURE__ */ jsx(TableHead, { className: "bg-muted/50", children: "Element" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "bg-muted/50 w-[80px]", children: "Type" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "bg-muted/50 text-right w-[90px]", children: "Weight" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "bg-muted/50 text-right w-[80px]", children: "Size" }),
+          /* @__PURE__ */ jsx(TableHead, { className: "bg-muted/50 text-center w-[100px]", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: filteredElements.map((element) => {
+          const isSelected = selectedIds.has(element.id);
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              className: cn(
+                "cursor-pointer transition-colors",
+                isSelected && "bg-green-50/50 dark:bg-green-950/20"
+              ),
+              onClick: () => toggleElement(element.id),
+              children: [
+                /* @__PURE__ */ jsx(TableCell, { className: "w-[44px]", children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleElement(element.id),
+                    onClick: (e) => e.stopPropagation(),
+                    "aria-label": `Mark ${element.name} as produced`
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  element.prefix && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] h-5 shrink-0 font-mono", children: element.prefix }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: element.name })
+                ] }) }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground w-[80px]", children: element.type || "\u2014" }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums text-muted-foreground w-[90px]", children: element.weight != null ? `${element.weight.toLocaleString()} kg` : "\u2014" }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums text-muted-foreground w-[80px]", children: element.size != null ? `${element.size.toLocaleString()} ${element.sizeUnit || "sqm"}` : "\u2014" }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-center w-[100px]", children: isSelected ? /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50",
+                    children: [
+                      /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1" }),
+                      "Produced"
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: "outline",
+                    className: "border-muted-foreground/50 text-muted-foreground",
+                    children: "Not produced"
+                  }
+                ) })
+              ]
+            },
+            element.id
+          );
+        }) })
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full min-h-[200px] text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsx(Package, { className: "h-10 w-10 mx-auto mb-3 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "No elements found" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Try adjusting your search" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(DialogFooter, { className: "w-full p-6 pt-4 border-t shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          selectedCount,
+          " / ",
+          totalCount,
+          " elements"
+        ] }),
+        totalWeight > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: "Save progress" })
+      ] })
+    ] }) })
+  ] }) });
+}
+function DeliveryCommentPopover2({
+  comments = [],
+  onAddComment,
+  deliveryLabel
+}) {
+  const [open, setOpen] = React29.useState(false);
+  const [newCommentText, setNewCommentText] = React29.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29.useState(true);
+  const [showAddForm, setShowAddForm] = React29.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.useEffect(() => {
+    if (!open) {
+      setShowAddForm(false);
+      setNewCommentText("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CommentButton, { size: "sm", commentCount: comments.length }) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "w-80 p-0 z-[100]",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: deliveryLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2 h-fit overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+              /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium", children: [
+                  "Comments ",
+                  comments.length > 0 && `(${comments.length})`
+                ] }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: cn(
+                  "h-4 w-4 transition-transform duration-200",
+                  viewCommentsOpen && "rotate-180"
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.length > 0 ? comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+              ] }, comment.id)) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center py-2", children: "No comments yet" }) })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
+            !showAddForm ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full justify-center gap-2 h-8",
+                onClick: () => setShowAddForm(true),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+                  "Add comment"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: cn(
+              "space-y-3 p-3 rounded-lg border border-border bg-muted/30",
+              "animate-in fade-in-0 slide-in-from-top-2 duration-200"
+            ), children: [
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  placeholder: "Type your comment...",
+                  value: newCommentText,
+                  onChange: (e) => setNewCommentText(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  className: "min-h-[80px] text-sm resize-none",
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send \xB7 Esc to cancel" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-7",
+                      onClick: () => {
+                        setShowAddForm(false);
+                        setNewCommentText("");
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 gap-1",
+                      onClick: handleSubmit,
+                      disabled: !newCommentText.trim(),
+                      children: [
+                        /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                        "Save"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ProductionCommentSection2({
+  comments = [],
+  onAddComment
+}) {
+  const [showAddForm, setShowAddForm] = React29.useState(false);
+  const [newComment, setNewComment] = React29.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__ */ jsxs("div", { className: "space-y-2", children: [
+    comments.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: comments.map((comment) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-2.5 space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: comment.author }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate3(comment.createdAt) })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: comment.text })
+    ] }, comment.id)) }),
+    !showAddForm ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start gap-2 h-8 text-muted-foreground",
+        onClick: () => setShowAddForm(true),
+        children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5" }),
+          comments.length > 0 ? "Add another comment" : "Add a comment..."
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2 animate-in fade-in-0 slide-in-from-top-2 duration-200", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          placeholder: "Add a comment...",
+          value: newComment,
+          onChange: (e) => setNewComment(e.target.value),
+          onKeyDown: handleKeyDown,
+          className: "min-h-[60px] text-sm resize-none",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\u2318+Enter to send" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7",
+              onClick: () => {
+                setShowAddForm(false);
+                setNewComment("");
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "h-7 gap-1",
+              onClick: handleSubmit,
+              disabled: !newComment.trim(),
+              children: [
+                /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
+                "Save"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function 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__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "w-full flex items-center justify-between p-3 rounded-lg",
+        "bg-card border hover:bg-muted/50 transition-colors cursor-pointer",
+        "text-left"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-lg",
+            iconStyles.bg
+          ), children: /* @__PURE__ */ jsx(Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              hasComments && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "h-3 w-3 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" })
+              ] })
+            ] }),
+            delivery.destination && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              "\u2192 ",
+              delivery.destination
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant2(delivery.status, isComplete),
+              className: cn("text-xs", getStatusBadgeClasses2(delivery.status, isComplete)),
+              children: getStatusLabel2(delivery.status, isComplete)
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function DeliveryDetailsView2({
+  delivery,
+  week,
+  onBack,
+  onAddComment
+}) {
+  const elements = delivery.elements ?? [];
+  const categorizedElements = React29.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__ */ jsxs("div", { className: "flex flex-col h-full animate-in slide-in-from-right-4 duration-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "gap-1 -ml-2",
+        onClick: onBack,
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: delivery.label || "Delivery Details" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            DeliveryCommentPopover2,
+            {
+              comments: delivery.comments,
+              onAddComment,
+              deliveryLabel: delivery.label || "Delivery"
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Calendar$1, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            week.label,
+            " \u2022 ",
+            week.dateRange
+          ] })
+        ] }),
+        delivery.destination && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(Truck, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "\u2192 ",
+            delivery.destination
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 px-4 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      totalCount > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          StatusProgress,
+          {
+            value: totalCount > 0 ? sentCount / totalCount * 100 : 0,
+            currentCount: sentCount,
+            totalCount,
+            unitLabel: "shipped",
+            showLabel: true,
+            showCheckmark: true,
+            size: "md"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+          categorizedElements.sent.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 text-green-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-green-700 dark:text-green-300", children: [
+              categorizedElements.sent.length,
+              " Sent"
+            ] })
+          ] }),
+          categorizedElements.notSent.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(XCircle, { className: "h-3 w-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              categorizedElements.notSent.length,
+              " Missing"
+            ] })
+          ] }),
+          categorizedElements.moved.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3 text-blue-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-blue-700 dark:text-blue-300", children: [
+              categorizedElements.moved.length,
+              " Moved"
+            ] })
+          ] }),
+          categorizedElements.addons.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 text-purple-600" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-purple-700 dark:text-purple-300", children: [
+              categorizedElements.addons.length,
+              " Add-on"
+            ] })
+          ] })
+        ] })
+      ] }),
+      elements.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Elements" }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "bg-sidebar hover:bg-sidebar", children: [
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: elements.map((element) => {
+            const shipmentStatus = getElementShipmentStatus(element, delivery.id);
+            const statusLabel = getShipmentStatusLabel(shipmentStatus);
+            return /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                className: getShipmentStatusRowBg2(shipmentStatus),
+                children: [
+                  /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: element.prefix || "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { children: element.type || element.name || "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? `${element.weight} ${element.weightUnit || "kg"}` : "\u2014" }),
+                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "outline",
+                        className: cn("text-[10px] h-5", getShipmentStatusBadgeClasses2(shipmentStatus)),
+                        children: statusLabel
+                      }
+                    ),
+                    shipmentStatus === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
+                      "\u2192 ",
+                      element.actualDeliveryLabel
+                    ] }),
+                    shipmentStatus === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
+                      "from ",
+                      element.originalDeliveryLabel
+                    ] })
+                  ] }) })
+                ]
+              },
+              element.id
+            );
+          }) })
+        ] }) })
+      ] }),
+      elements.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Package, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No elements in this delivery" })
+      ] })
+    ] }) })
+  ] });
+}
+function 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__ */ jsxs("div", { className: "animate-in fade-in-0 duration-200", children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { className: "px-4 pt-4 pb-3 border-b", children: [
+      /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
+        supplier.name,
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs font-normal", children: supplier.badgeType })
+      ] }),
+      /* @__PURE__ */ jsxs(SheetDescription, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
+        week.label,
+        " \u2022 ",
+        week.dateRange
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 px-4 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 pt-4", children: [
+      data.type !== "empty" && /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Factory, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Production" })
+        ] }),
+        totalCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-4", children: [
+            /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-lg font-bold tabular-nums", children: [
+                  Math.round(productionProgress),
+                  "%"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-foreground", children: [
+                producedCount,
+                " / ",
+                totalCount,
+                " elements"
+              ] }),
+              showPreviousProgress && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [
+                "Previously: ",
+                previousProducedCount,
+                " / ",
+                totalCount
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "w-full",
+              onClick: onOpenProductionDialog,
+              children: "Enter production progress"
+            }
+          )
+        ] }) : (
+          /* No elements - show placeholder with button still available */
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-center py-6 text-muted-foreground bg-muted/30 rounded-lg", children: [
+              /* @__PURE__ */ jsx(Package, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No elements to track" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "w-full",
+                variant: "outline",
+                onClick: onOpenProductionDialog,
+                children: "Enter production progress"
+              }
+            )
+          ] })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Comments" }),
+            hasProductionComments && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+              "(",
+              production?.comments?.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ProductionCommentSection2,
+            {
+              comments: production?.comments,
+              onAddComment: onAddProductionComment
+            }
+          )
+        ] })
+      ] }),
+      data.deliveries && data.deliveries.length > 0 && /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Deliveries" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            data.deliveries.length,
+            " scheduled"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: data.deliveries.map((delivery, index) => /* @__PURE__ */ jsx(
+          DeliveryListItem2,
+          {
+            delivery,
+            index,
+            onClick: () => onSelectDelivery(delivery)
+          },
+          delivery.id
+        )) })
+      ] }),
+      data.type === "no-logistics" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground p-3 bg-muted/50 rounded-lg", children: [
+        /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: "No logistics scheduled for this week" })
+      ] }),
+      data.hasWarning && data.warningMessage && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-lg bg-amber-50 dark:bg-amber-950/50 p-3 text-amber-700 dark:text-amber-300", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm", children: data.warningMessage })
+      ] }),
+      data.notes && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Notes" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: data.notes })
+      ] })
+    ] }) })
+  ] });
+}
+function WeekDetailSheet({
+  open,
+  onOpenChange,
+  supplier,
+  week,
+  data,
+  onProductionUpdate,
+  onAddProductionComment,
+  onAddDeliveryComment
+}) {
+  const [selectedDelivery, setSelectedDelivery] = React29.useState(null);
+  const [productionDialogOpen, setProductionDialogOpen] = React29.useState(false);
+  const [previousProducedCount, setPreviousProducedCount] = React29.useState(void 0);
+  const productionElements = React29.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.useEffect(() => {
+    if (open && data?.deliveries) {
+      setPreviousProducedCount(currentProducedCount);
+    }
+  }, [open]);
+  React29.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-full sm:max-w-lg p-0 overflow-hidden",
+        children: selectedDelivery ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
+    "div",
+    {
+      "data-slot": "row-header-cell",
+      className: cn(
+        "flex flex-col justify-center gap-1.5 py-2 px-3 min-w-[200px] h-[100px] bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold leading-tight text-foreground truncate", children: data.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: data.typeCode })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              variant: "outline",
+              className: "text-[10px] px-2 py-0.5 h-[19px] font-medium shrink-0 gap-1 bg-background border-border",
+              children: [
+                /* @__PURE__ */ jsx(Flag, { className: "h-2.5 w-2.5" }),
+                "Paint"
+              ]
+            }
+          )
+        ] }),
+        showProgress && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-primary rounded-full transition-all",
+              style: { width: `${progressPercent}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-primary", children: [
+            data.totalBooked.toLocaleString(),
+            " / ",
+            data.totalRequired.toLocaleString(),
+            " Booked"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 function NetBadge({
   className,
   net,
@@ -8271,13 +9454,13 @@ function CalibrationWeekCell({
   onAddClick,
   ...props
 }) {
-  const inputRef = React27.useRef(null);
-  const [localValue, setLocalValue] = React27.useState(
+  const inputRef = React29.useRef(null);
+  const [localValue, setLocalValue] = React29.useState(
     data.entered !== null ? String(data.entered) : ""
   );
-  const [isHovered, setIsHovered] = React27.useState(false);
-  const [isEditing, setIsEditing] = React27.useState(false);
-  React27.useEffect(() => {
+  const [isHovered, setIsHovered] = React29.useState(false);
+  const [isEditing, setIsEditing] = React29.useState(false);
+  React29.useEffect(() => {
     setLocalValue(data.entered !== null ? String(data.entered) : "");
   }, [data.entered]);
   const unitLabel = formatCalibrationUnit(unit);
@@ -8463,11 +9646,11 @@ function CommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React27.useState("");
-  const [selectedPrefixId, setSelectedPrefixId] = React27.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React27.useState(true);
-  const [showAddForm, setShowAddForm] = React27.useState(false);
-  const selectedPrefixName = React27.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React29.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React29.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React29.useState(true);
+  const [showAddForm, setShowAddForm] = React29.useState(false);
+  const selectedPrefixName = React29.useMemo(() => {
     const prefix = availablePrefixes.find((p) => p.id === selectedPrefixId);
     return prefix?.name ?? "";
   }, [availablePrefixes, selectedPrefixId]);
@@ -8499,8 +9682,8 @@ function CommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React27.useRef(open);
-  React27.useEffect(() => {
+  const prevOpenRef = React29.useRef(open);
+  React29.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -8729,7 +9912,7 @@ function CalibrationTable({
     onAddComment,
     onAddEarlierWeek
   } = config;
-  const calculatedStartDate = React27.useMemo(() => {
+  const calculatedStartDate = React29.useMemo(() => {
     if (startDate) return startDate;
     let earliest = null;
     for (const prefix of prefixes) {
@@ -8750,31 +9933,31 @@ function CalibrationTable({
     }
     return earliest ?? /* @__PURE__ */ new Date();
   }, [startDate, prefixes]);
-  const [additionalWeeks, setAdditionalWeeks] = React27.useState(0);
-  const weeks = React27.useMemo(() => {
+  const [additionalWeeks, setAdditionalWeeks] = React29.useState(0);
+  const weeks = React29.useMemo(() => {
     const start = new Date(calculatedStartDate);
     start.setDate(start.getDate() - additionalWeeks * 7);
     return generateWeeks(start, weekCount + additionalWeeks);
   }, [calculatedStartDate, weekCount, additionalWeeks]);
-  React27.useMemo(() => {
+  React29.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const [currentPage, setCurrentPage] = React27.useState(0);
-  const [pageSize, setPageSize] = React27.useState(defaultPageSize);
-  const [searchQuery, setSearchQuery] = React27.useState("");
-  const filteredPrefixes = React27.useMemo(() => {
+  const [currentPage, setCurrentPage] = React29.useState(0);
+  const [pageSize, setPageSize] = React29.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React29.useState("");
+  const filteredPrefixes = React29.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.useMemo(() => {
+  const paginatedPrefixes = React29.useMemo(() => {
     const start = currentPage * pageSize;
     return filteredPrefixes.slice(start, start + pageSize);
   }, [filteredPrefixes, currentPage, pageSize]);
-  React27.useMemo(
+  React29.useMemo(
     () => canSubmitCalibration(prefixes),
     [prefixes]
   );
@@ -8798,7 +9981,7 @@ function CalibrationTable({
     }
     return allComments;
   };
-  const availablePrefixes = React27.useMemo(
+  const availablePrefixes = React29.useMemo(
     () => prefixes.map((p) => ({ id: p.id, name: p.name })),
     [prefixes]
   );
@@ -9035,14 +10218,14 @@ function CommentDialog({
   open,
   onOpenChange
 }) {
-  const [selectedPrefixId, setSelectedPrefixId] = React27.useState("");
-  const [selectedWeekKey, setSelectedWeekKey] = React27.useState("");
-  const [commentText, setCommentText] = React27.useState("");
-  const currentWeek = React27.useMemo(
+  const [selectedPrefixId, setSelectedPrefixId] = React29.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React29.useState("");
+  const [commentText, setCommentText] = React29.useState("");
+  const currentWeek = React29.useMemo(
     () => weeks.find((w) => w.isCurrentWeek),
     [weeks]
   );
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (open) {
       setSelectedPrefixId(prefixes[0]?.id ?? "");
       setSelectedWeekKey(currentWeek ? getWeekKey(currentWeek.startDate) : weeks[0] ? getWeekKey(weeks[0].startDate) : "");
@@ -9372,40 +10555,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: ""
       };
   }
 }
@@ -9415,55 +10594,11 @@ function DeliveryBadge({
   onCommentClick,
   className
 }) {
-  const [isHovered, setIsHovered] = React27.useState(false);
+  const [isHovered, setIsHovered] = React29.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getLeftStrokeStyles(visualState, delivery.hasProductionRisk ?? false, isHovered);
-  const prefixTitle = React27.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.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.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?.();
@@ -9479,38 +10614,24 @@ function DeliveryBadge({
     e.stopPropagation();
     onCommentClick?.();
   };
-  const amountColorClass = React27.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__ */ 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
@@ -9523,7 +10644,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",
@@ -9555,7 +10676,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",
@@ -9563,33 +10684,19 @@ function DeliveryBadge({
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 overflow-hidden pr-12", children: [
-                /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
-                delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-                delivery.supplierName && /* @__PURE__ */ jsx("span", { className: cn(
-                  "text-xs truncate ml-auto",
-                  visualState === "sent" ? "text-muted-foreground/40" : "text-muted-foreground"
-                ), children: delivery.supplierName })
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 pr-12", children: [
+                /* @__PURE__ */ jsx("span", { className: cn(
+                  "text-sm font-semibold leading-tight line-clamp-2",
+                  styles.titleColor
+                ), children: projectName }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0 mt-0.5" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "pr-14", children: /* @__PURE__ */ jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn("h-full rounded-full transition-all", styles.progressBg),
-                  style: { width: `${productionProgress}%` }
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                productionDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx(Factory, { className: cn("h-3 w-3 shrink-0", styles.iconColor) }),
-                  /* @__PURE__ */ jsx("span", { className: cn(
-                    "text-[11px] tabular-nums font-medium",
-                    amountColorClass
-                  ), children: productionDisplay })
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
+                visualState === "sent" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
                 ] }),
-                visualState === "sent" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
-                  /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground/50 uppercase tracking-wide", children: "Sent" })
-                ] })
+                visualState === "ready" && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
               ] })
             ]
           }
@@ -9598,6 +10705,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__ */ jsxs(Collapsible, { open: isOpen, onOpenChange: onToggle, children: [
+    /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400" }),
+            /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+              "Shipped (",
+              shippedDeliveries.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 pt-2", children: shippedDeliveries.map((delivery) => /* @__PURE__ */ jsx(
+      DeliveryBadge,
+      {
+        delivery,
+        onClick: () => onDeliveryClick?.(delivery),
+        onCommentClick: () => onDeliveryCommentClick?.(delivery)
+      },
+      delivery.id
+    )) }) })
+  ] });
+}
 function WeeklyLoadingView({
   week,
   deliveries,
@@ -9607,7 +10770,25 @@ function WeeklyLoadingView({
   showNavigation = true,
   className
 }) {
-  const weekDays = React27.useMemo(() => {
+  const [shippedOpenState, setShippedOpenState] = React29.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.useMemo(() => {
     const days = [];
     for (let i = 0; i < 5; i++) {
       const date = addDays(week.startDate, i);
@@ -9619,22 +10800,26 @@ function WeeklyLoadingView({
     }
     return days;
   }, [week.startDate]);
-  const deliveriesByDay = React27.useMemo(() => {
+  const deliveriesByDay = React29.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__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-4", children: [
@@ -9651,9 +10836,9 @@ function WeeklyLoadingView({
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: week.dateRange }),
           /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            totalDeliveries,
-            " ",
-            totalDeliveries === 1 ? "delivery" : "deliveries"
+            totalPendingDeliveries,
+            " pending",
+            totalShippedDeliveries > 0 && `, ${totalShippedDeliveries} shipped`
           ] })
         ] })
       ] }),
@@ -9720,8 +10905,11 @@ function WeeklyLoadingView({
           dayOfWeek
         )) }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
-          const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
-          return /* @__PURE__ */ 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__ */ jsxs(
             "div",
             {
               className: cn(
@@ -9729,22 +10917,39 @@ function WeeklyLoadingView({
                 "flex flex-col p-3",
                 dayIsToday && "bg-primary/5"
               ),
-              children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsx(
-                DeliveryBadge,
-                {
-                  delivery,
-                  onClick: () => onDeliveryClick?.(delivery),
-                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
-                },
-                delivery.id
-              )) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
+              children: [
+                hasPending && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: dayData.pending.map((delivery) => /* @__PURE__ */ jsx(
+                  DeliveryBadge,
+                  {
+                    delivery,
+                    onClick: () => onDeliveryClick?.(delivery),
+                    onCommentClick: () => onDeliveryCommentClick?.(delivery)
+                  },
+                  delivery.id
+                )) }),
+                hasShipped && /* @__PURE__ */ jsx("div", { className: cn(hasPending && "mt-3"), children: /* @__PURE__ */ jsx(
+                  ShippedDeliveriesToggle,
+                  {
+                    shippedDeliveries: dayData.shipped,
+                    isOpen: shippedOpenState[dayOfWeek] ?? false,
+                    onToggle: () => toggleShippedForDay(dayOfWeek),
+                    onDeliveryClick,
+                    onDeliveryCommentClick
+                  }
+                ) }),
+                isEmpty && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" })
+              ]
             },
             dayOfWeek
           );
         }) })
       ] }),
       /* @__PURE__ */ 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__ */ jsxs(
           "div",
           {
@@ -9767,20 +10972,33 @@ function WeeklyLoadingView({
                   dayIsToday && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded", children: "Today" })
                 ] }),
                 /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-3 p-3 pt-0", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsx(
-                DeliveryBadge,
-                {
-                  delivery,
-                  onClick: () => onDeliveryClick?.(delivery),
-                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
-                },
-                delivery.id
-              )) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3 pt-0", children: [
+                hasPending && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: dayData.pending.map((delivery) => /* @__PURE__ */ jsx(
+                  DeliveryBadge,
+                  {
+                    delivery,
+                    onClick: () => onDeliveryClick?.(delivery),
+                    onCommentClick: () => onDeliveryCommentClick?.(delivery)
+                  },
+                  delivery.id
+                )) }),
+                hasShipped && /* @__PURE__ */ jsx(
+                  ShippedDeliveriesToggle,
+                  {
+                    shippedDeliveries: dayData.shipped,
+                    isOpen: shippedOpenState[dayOfWeek] ?? false,
+                    onToggle: () => toggleShippedForDay(dayOfWeek),
+                    onDeliveryClick,
+                    onDeliveryCommentClick
+                  }
+                ),
+                isEmpty && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" })
+              ] })
             ]
           },
           dayOfWeek
@@ -9789,36 +11007,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) {
@@ -9834,6 +11079,166 @@ function getElementStatusBadgeClasses(status) {
       return "border-muted-foreground/50 text-muted-foreground";
   }
 }
+var TIMELINE_STEPS = [
+  { id: "document", label: "Document", icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }) },
+  { id: "production", label: "Production", icon: /* @__PURE__ */ jsx(Factory, { className: "h-4 w-4" }) },
+  { id: "delivery", label: "Delivery", icon: /* @__PURE__ */ jsx(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__ */ 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__ */ jsxs(React29.Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ 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__ */ jsx(Check, { className: cn("h-4 w-4", styles.icon) }) : /* @__PURE__ */ jsx("span", { className: styles.icon, children: step.icon })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cn("text-xs", styles.label), children: step.label })
+      ] }),
+      !isLast && /* @__PURE__ */ jsx("div", { className: "flex-1 mx-2 mb-6", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Packing status:" }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Shipped" })
+      ] }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Ready" })
+      ] }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    hasRisk ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0 mt-0.5" }) : /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-full bg-primary/20 border border-primary shrink-0 mt-0.5" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("span", { className: cn(
+        "text-sm font-medium",
+        hasRisk ? "text-red-700 dark:text-red-300" : "text-foreground"
+      ), children: [
+        "Currently in: ",
+        timelineState.currentStepLabel
+      ] }),
+      /* @__PURE__ */ 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":
@@ -9855,7 +11260,7 @@ function AddCommentDialog({
   weekId,
   onAddComment
 }) {
-  const [commentText, setCommentText] = React27.useState("");
+  const [commentText, setCommentText] = React29.useState("");
   const handleSubmit = () => {
     if (commentText.trim() && onAddComment) {
       onAddComment({
@@ -9880,7 +11285,7 @@ function AddCommentDialog({
       handleSubmit();
     }
   };
-  React27.useEffect(() => {
+  React29.useEffect(() => {
     if (!open) {
       setCommentText("");
     }
@@ -9943,8 +11348,8 @@ function CommentsSection({
   weekId,
   onAddComment
 }) {
-  const [viewCommentsOpen, setViewCommentsOpen] = React27.useState(true);
-  const [addDialogOpen, setAddDialogOpen] = React27.useState(false);
+  const [viewCommentsOpen, setViewCommentsOpen] = React29.useState(true);
+  const [addDialogOpen, setAddDialogOpen] = React29.useState(false);
   const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
@@ -10007,31 +11412,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,
@@ -10042,14 +11422,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.useMemo(() => {
+  const timelineState = getTimelineState(delivery);
+  const elementsByStatus = React29.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");
@@ -10057,6 +11431,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__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b bg-background sticky top-0 z-10", children: /* @__PURE__ */ jsxs(
       Button,
@@ -10072,129 +11447,39 @@ function DeliveryDetailPage({
       }
     ) }),
     /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "px-4 pb-6 space-y-6", children: [
-      /* @__PURE__ */ jsxs("section", { className: "pt-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("section", { className: "pt-4 space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: cn(
-              "flex items-center justify-center h-12 w-12 rounded-xl shrink-0",
-              headerStyles.iconBg
-            ), children: /* @__PURE__ */ jsx(Truck, { className: cn("h-6 w-6", headerStyles.iconColor) }) }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: delivery.label }),
-                visualState === "sent" && /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 text-green-600 dark:text-green-400" }),
-                delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-red-500" })
-              ] }),
-              /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                delivery.supplierName,
-                delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: getStatusBadgeVariant2(delivery.status),
-                className: cn("shrink-0", getStatusBadgeClasses2(delivery.status)),
-                children: getLoadingDeliveryStatusLabel(delivery.status)
-              }
-            ),
-            delivery.isReadyToUnload && /* @__PURE__ */ 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__ */ jsx("h1", { className: "text-xl font-bold leading-tight line-clamp-2", children: projectName }),
+          delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-red-500 shrink-0 mt-0.5" })
         ] }),
-        delivery.hasProductionRisk && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-600 dark:text-red-400 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "Production delay risk" })
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground", children: [
+          delivery.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: delivery.location })
           ] }),
-          delivery.riskReason && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400 mt-1 ml-6", children: delivery.riskReason })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(Calendar$1, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: delivery.date.toLocaleDateString("en-US", {
-              weekday: "short",
-              month: "short",
-              day: "numeric"
-            }) })
-          ] }),
-          delivery.destination && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: delivery.destination })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-4 space-y-3", children: [
-          (delivery.producedCount !== void 0 || delivery.producedTons !== void 0) && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Production" }),
-              /* @__PURE__ */ 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__ */ jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "h-full rounded-full transition-all",
-                  delivery.isReadyToUnload ? "bg-green-500" : delivery.hasProductionRisk ? "bg-red-500" : "bg-amber-500"
-                ),
-                style: { width: `${producedPercent}%` }
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx(Separator, { className: "my-2" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Loading Progress" }),
-              /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold tabular-nums", children: [
-                "Loaded ",
-                loadedCount,
-                " / ",
-                totalCount
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "h-full rounded-full transition-all",
-                  loadedPercent === 100 ? "bg-green-500" : "bg-primary"
-                ),
-                style: { width: `${loadedPercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap text-xs", children: [
-              elementsByStatus.loaded.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
-                elementsByStatus.loaded.length,
-                " Loaded"
-              ] }),
-              elementsByStatus.missing.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-                elementsByStatus.missing.length,
-                " Missing"
-              ] }),
-              elementsByStatus.moved.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-blue-600 dark:text-blue-400", children: [
-                elementsByStatus.moved.length,
-                " Moved"
-              ] }),
-              elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-purple-600 dark:text-purple-400", children: [
-                elementsByStatus.addons.length,
-                " Add-on"
-              ] })
+            /* @__PURE__ */ jsx(Calendar$1, { className: "h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Expected on site: ",
+              delivery.date.toLocaleDateString("en-US", {
+                day: "numeric",
+                month: "short",
+                year: "numeric"
+              })
             ] })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(PackingStatusBadge, { timelineState, hasRisk: delivery.hasProductionRisk ?? false })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(DeliveryTimeline, { timelineState }) }),
+        /* @__PURE__ */ jsx(
+          ReadinessMessage,
+          {
+            timelineState,
+            hasRisk: delivery.hasProductionRisk ?? false
+          }
+        )
       ] }),
       (elementsByStatus.loaded.length > 0 || elementsByStatus.missing.length > 0 || elementsByStatus.moved.length > 0) && /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -10325,11 +11610,11 @@ function SupplierWeeklyLoading({
   bordered = true,
   className
 }) {
-  const [selectedDelivery, setSelectedDelivery] = React27.useState(null);
-  const [sheetOpen, setSheetOpen] = React27.useState(false);
-  const [commentDelivery, setCommentDelivery] = React27.useState(null);
-  const [commentDialogOpen, setCommentDialogOpen] = React27.useState(false);
-  const [commentText, setCommentText] = React27.useState("");
+  const [selectedDelivery, setSelectedDelivery] = React29.useState(null);
+  const [sheetOpen, setSheetOpen] = React29.useState(false);
+  const [commentDelivery, setCommentDelivery] = React29.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React29.useState(false);
+  const [commentText, setCommentText] = React29.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -10473,59 +11758,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: ""
       };
   }
 }
@@ -10534,22 +11796,11 @@ function DeliveryCard({
   onTap,
   className
 }) {
-  const [isHovered, setIsHovered] = React27.useState(false);
+  const [isHovered, setIsHovered] = React29.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getLeftStrokeStyles2(visualState, delivery.hasProductionRisk ?? false, isHovered);
-  const productionDisplay = React27.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?.();
   };
@@ -10573,69 +11824,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__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: cn(
-            "flex items-center justify-center h-10 w-10 rounded-md shrink-0 bg-muted/50"
-          ), children: /* @__PURE__ */ jsx(Truck, { className: cn("h-5 w-5", styles.iconColor) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold truncate", children: delivery.label }),
-              visualState === "sent" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
-              visualState === "ready" && /* @__PURE__ */ 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__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-              hasComments && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
-                /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-                /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
-              delivery.supplierName,
-              delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
-            ] }),
-            productionDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
-              /* @__PURE__ */ jsx(Package, { className: "h-3 w-3 text-muted-foreground" }),
-              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(
+              "text-sm font-semibold truncate",
+              styles.titleColor
+            ), children: projectName }),
+            delivery.hasProductionRisk && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+            hasComments && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
             ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            visualState === "sent" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
+            ] }),
+            visualState === "ready" && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-          /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: getStatusBadgeVariant3(delivery.status),
-              className: cn("text-[10px] h-5", getStatusBadgeClasses3(delivery.status)),
-              children: getLoadingDeliveryStatusLabel(delivery.status)
-            }
-          ),
-          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
-        ] })
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground shrink-0" })
       ] })
     }
   );
@@ -10703,7 +11928,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React27.createContext(null);
+var CalendarContext = React29.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -10718,38 +11943,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React27.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React27.useState(defaultUserId);
-  const [events, setEventsState] = React27.useState(initialEvents);
-  const [users] = React27.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React27.useState(defaultBadgeVariant);
-  const [view, setView] = React27.useState(defaultView);
-  const [workingHours, setWorkingHours] = React27.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React27.useState(defaultVisibleHours);
-  React27.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React29.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React29.useState(defaultUserId);
+  const [events, setEventsState] = React29.useState(initialEvents);
+  const [users] = React29.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React29.useState(defaultBadgeVariant);
+  const [view, setView] = React29.useState(defaultView);
+  const [workingHours, setWorkingHours] = React29.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React29.useState(defaultVisibleHours);
+  React29.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React27.useCallback((newEvents) => {
+  const setEvents = React29.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React27.useCallback((event) => {
+  const addEvent = React29.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React27.useCallback((event) => {
+  const updateEvent = React29.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React27.useCallback((eventId) => {
+  const deleteEvent = React29.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React27.useCallback(() => {
+  const goToToday = React29.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React27.useCallback(() => {
+  const goToPrevious = React29.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -10767,7 +11992,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React27.useCallback(() => {
+  const goToNext = React29.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -10785,7 +12010,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React27.useMemo(
+  const contextValue = React29.useMemo(
     () => ({
       // State
       selectedDate,
@@ -10832,7 +12057,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React27.useContext(CalendarContext);
+  const context = React29.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -10840,14 +12065,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React27.useMemo(() => {
+  return React29.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React27.useMemo(() => {
+  return React29.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -11405,8 +12630,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React27.useState(/* @__PURE__ */ new Date());
-  React27.useEffect(() => {
+  const [now, setNow] = React29.useState(/* @__PURE__ */ new Date());
+  React29.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -11443,24 +12668,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React27.createContext(null);
+var DragContext = React29.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React27.useState(null);
-  const [isDragging, setIsDragging] = React27.useState(false);
+  const [draggedEvent, setDraggedEventState] = React29.useState(null);
+  const [isDragging, setIsDragging] = React29.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React27.useCallback((event) => {
+  const setDraggedEvent = React29.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React27.useCallback((newStartDate) => {
+  const handleDrop = React29.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -11473,7 +12698,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React27.useMemo(
+  const contextValue = React29.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -11484,7 +12709,7 @@ function DragProvider({
   return /* @__PURE__ */ jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React27.useContext(DragContext);
+  const context = React29.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -11529,7 +12754,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React27.useState(false);
+  const [isOver, setIsOver] = React29.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -11567,23 +12792,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React27.useState(false);
-  const dropTargetDate = React27.useMemo(() => {
+  const [isOver, setIsOver] = React29.useState(false);
+  const dropTargetDate = React29.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React27.useCallback((e) => {
+  const handleDragOver = React29.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React27.useCallback(() => {
+  const handleDragLeave = React29.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React27.useCallback((e) => {
+  const handleDrop = React29.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -11610,13 +12835,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.useCallback((e) => {
+  const handleDragStart = React29.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React27.useCallback(() => {
+  const handleDragEnd = React29.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -11657,15 +12882,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React27.useMemo(
+  const cells = React29.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React27.useMemo(
+  const eventPositions = React29.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -11847,7 +13072,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -12053,8 +13278,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React27.useState(/* @__PURE__ */ new Date());
-  React27.useEffect(() => {
+  const [currentTime, setCurrentTime] = React29.useState(/* @__PURE__ */ new Date());
+  React29.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -12137,7 +13362,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -12145,7 +13370,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React27.useMemo(() => {
+  const currentEvents = React29.useMemo(() => {
     if (!isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -12369,8 +13594,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React27.useState(/* @__PURE__ */ new Date());
-  React27.useEffect(() => {
+  const [currentTime, setCurrentTime] = React29.useState(/* @__PURE__ */ new Date());
+  React29.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -12404,7 +13629,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React27.useMemo(() => {
+  const months = React29.useMemo(() => {
     const yearStart = startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => addMonths(yearStart, i));
   }, [selectedDate]);
@@ -12527,11 +13752,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React27.useMemo(
+  const { singleDayEvents, multiDayEvents } = React29.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React27.useMemo(() => {
+  const eventsByDay = React29.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = parseISO(event.startDate);
@@ -12996,16 +14221,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React27.useState("");
-  const [description, setDescription] = React27.useState("");
-  const [startDate, setStartDate] = React27.useState("");
-  const [startTime, setStartTime] = React27.useState("");
-  const [endDate, setEndDate] = React27.useState("");
-  const [endTime, setEndTime] = React27.useState("");
-  const [color, setColor] = React27.useState("blue");
-  const [userId, setUserId] = React27.useState("");
-  const [isSubmitting, setIsSubmitting] = React27.useState(false);
-  React27.useEffect(() => {
+  const [title, setTitle] = React29.useState("");
+  const [description, setDescription] = React29.useState("");
+  const [startDate, setStartDate] = React29.useState("");
+  const [startTime, setStartTime] = React29.useState("");
+  const [endDate, setEndDate] = React29.useState("");
+  const [endTime, setEndTime] = React29.useState("");
+  const [color, setColor] = React29.useState("blue");
+  const [userId, setUserId] = React29.useState("");
+  const [isSubmitting, setIsSubmitting] = React29.useState(false);
+  React29.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = parseISO(event.startDate);
@@ -13228,7 +14453,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React27.useState("");
+  const [title, setTitle] = React29.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -13295,8 +14520,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React27.useState(visibleHours.from);
-  const [to, setTo] = React27.useState(visibleHours.to);
+  const [from, setFrom] = React29.useState(visibleHours.from);
+  const [to, setTo] = React29.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -13342,7 +14567,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React27.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React29.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -13491,8 +14716,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React27.useState(false);
-  React27.useEffect(() => {
+  const [matches, setMatches] = React29.useState(false);
+  React29.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -13544,11 +14769,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React27.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React27.useState(false);
-  const [selectedEvent, setSelectedEvent] = React27.useState(null);
-  const [dialogMode, setDialogMode] = React27.useState("add");
-  const [defaultDate, setDefaultDate] = React27.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React29.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React29.useState(false);
+  const [selectedEvent, setSelectedEvent] = React29.useState(null);
+  const [dialogMode, setDialogMode] = React29.useState("add");
+  const [defaultDate, setDefaultDate] = React29.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -13860,7 +15085,7 @@ var GanttContentHeader = ({
   return /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
@@ -14057,7 +15282,7 @@ var GanttSidebarHeader = ({
 }) => /* @__PURE__ */ 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__ */ jsx("p", { className: "flex-1 truncate text-left", children: title }),
@@ -14121,11 +15346,12 @@ var GanttGroupSummaryBar = memo(({
       children: /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 flex items-center px-2", children: /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] font-medium text-muted-foreground", children: group.title }) })
         }
       )
     }
@@ -14157,7 +15383,7 @@ var GanttCollapsibleSidebarGroup = ({
         /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ 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: [
@@ -14199,7 +15425,7 @@ var GanttCollapsibleTimelineGroup = ({
         /* @__PURE__ */ 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__ */ jsx(GanttGroupSummaryBar, { group })
           }
@@ -14217,7 +15443,7 @@ var GanttSidebarGroup = ({
   /* @__PURE__ */ 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
     }
@@ -14231,7 +15457,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)" },
@@ -15270,6 +16496,6 @@ var KanbanProvider = ({
   ) });
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, CalibrationTable, CalibrationWeekCell, CalibrationWeekHeader, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommentButton, CommentDialog, CommentPopover, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DateBadge, DayView, DeliveryBadge, DeliveryCard, DeliveryDetailPage, DeliveryIndicator, DeliveryIndicators, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GanttAddFeatureHelper, GanttCollapsibleSidebarGroup, GanttCollapsibleTimelineGroup, GanttColumn, GanttColumns, GanttContentHeader, GanttCreateMarkerTrigger, GanttFeatureDragHelper, GanttFeatureItem, GanttFeatureItemCard, GanttFeatureList, GanttFeatureListGroup, GanttFeatureRow, GanttGridLines, GanttGroupSummaryBar, GanttHeader, GanttMarker, GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarHeader, GanttSidebarItem, GanttTimeline, GanttToday, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider, Kbd, KbdGroup, Label2 as Label, Map2 as Map, MapMarker, MapPopup, MapTileLayer, MapTooltip, MapZoomControl, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetBadge, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlanningTable, PlanningTableToolbar, PlanningWeekCommentPopover, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowHeaderCell, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, SubmitCalibrationBar, SupplierCell, SupplierWeeklyLoading, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekCell, WeekDetailDialog, WeekHeader, WeekView, WeeklyLoadingView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateCalibrationCells, calculateDropDates, calculateMonthEventPositions, canSubmitCalibration, cardVariants, createDefaultEvent, deliveryIndicatorVariants, extractPrefixes, formatCalibrationUnit, formatDateRange2 as formatDateRange, formatProductionUnit, formatTime, generateColumns, generateEventId, generateLoadingWeek, generateLocationOptions, generateWeekColumns, generateWeeks, getCalendarCells, getCommentLocationLabel, getCurrentEvents, getDayHours, getDayLabel, getDeliveryVisualState, getElementShipmentStatus, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getISOWeek, getLoadingDeliveryStatusLabel, getLoadingElementStatusLabel, getLoadingISOWeek, getLoadingWeekKey, getMonthCellEvents, getMonthDays, getShipmentStatusLabel, getShortDayLabel, getSupplierColumn, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getWeekKey, getYearMonths, groupDeliveriesByDay, groupDeliveriesByPrefixAndDay, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useGanttDragging, useGanttScrollX, useIsMobile, useSearchShortcut, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, CalendarSettingsButton, CalendarSettingsContent, CalendarSettingsDialog, CalibrationTable, CalibrationWeekCell, CalibrationWeekHeader, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommentButton, CommentDialog, CommentPopover, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DateBadge, DayView, DeliveryBadge, DeliveryCard, DeliveryDetailPage, DeliveryIndicator, DeliveryIndicators, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, DraggableEvent, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, EventCalendarProvider, EventDialog, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GanttAddFeatureHelper, GanttCollapsibleSidebarGroup, GanttCollapsibleTimelineGroup, GanttColumn, GanttColumns, GanttContentHeader, GanttCreateMarkerTrigger, GanttFeatureDragHelper, GanttFeatureItem, GanttFeatureItemCard, GanttFeatureList, GanttFeatureListGroup, GanttFeatureRow, GanttGridLines, GanttGroupSummaryBar, GanttHeader, GanttMarker, GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarHeader, GanttSidebarItem, GanttTimeline, GanttToday, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item6 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider, Kbd, KbdGroup, Label2 as Label, Map2 as Map, MapMarker, MapPopup, MapTileLayer, MapTooltip, MapZoomControl, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, MoreEvents, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavMain, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NetBadge, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlanningTable, PlanningTableToolbar, PlanningWeekCommentPopover, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RowHeaderCell, ScrollArea, ScrollBar, SearchForm, SearchTrigger, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, StatusProgress, SubmitCalibrationBar, SupplierCell, SupplierWeeklyLoading, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, TimeIndicator, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatarsDropdown, VIEW_LABELS, WeekCell, WeekDetailDialog, WeekDetailSheet, WeekHeader, WeekView, WeeklyLoadingView, YearView, badgeVariants, buttonGroupVariants, buttonVariants, calculateCalibrationCells, calculateDropDates, calculateMonthEventPositions, canSubmitCalibration, cardVariants, createDefaultEvent, deliveryIndicatorVariants, extractPrefixes, formatCalibrationUnit, formatDateRange2 as formatDateRange, formatProductionUnit, formatTime, generateColumns, generateEventId, generateLoadingWeek, generateLocationOptions, generateWeekColumns, generateWeeks, getCalendarCells, getCommentLocationLabel, getCurrentEvents, getDayHours, getDayLabel, getDeliveryVisualState, getElementShipmentStatus, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getISOWeek, getLoadingDeliveryStatusLabel, getLoadingElementStatusLabel, getLoadingISOWeek, getLoadingWeekKey, getMonthCellEvents, getMonthDays, getShipmentStatusLabel, getShortDayLabel, getSupplierColumn, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getWeekKey, getYearMonths, groupDeliveriesByDay, groupDeliveriesByPrefixAndDay, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useGanttDragging, useGanttScrollX, useIsMobile, useSearchShortcut, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map