@j3m-quantum/ui 1.9.1 → 1.10.0

package/dist/index.cjs

@@ -9418,36 +9418,41 @@ function getLeftStrokeStyles(state, hasRisk, isHovered) {
       stroke: "border-l-[3px] border-l-red-500",
       content: "text-foreground",
       progressBg: "bg-red-500",
-      iconColor: "text-red-600 dark:text-red-400"
+      iconColor: "text-red-600 dark:text-red-400",
+      cardBg: "bg-background"
     };
   }
   switch (state) {
     case "sent":
       return {
-        stroke: "border-l-[3px] border-l-green-500/50",
-        content: "text-muted-foreground/60",
-        progressBg: "bg-green-500",
-        iconColor: "text-green-600 dark:text-green-400"
+        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"
       };
     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"
+        iconColor: "text-green-600 dark:text-green-400",
+        cardBg: "bg-background"
       };
     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"
+        iconColor: "text-muted-foreground",
+        cardBg: "bg-background"
       };
   }
 }
 function DeliveryBadge({
   delivery,
   onClick,
+  onCommentClick,
   className
 }) {
   const [isHovered, setIsHovered] = React27__namespace.useState(false);
@@ -9510,70 +9515,125 @@ function DeliveryBadge({
       onClick?.();
     }
   };
+  const handleCommentClick = (e) => {
+    e.stopPropagation();
+    onCommentClick?.();
+  };
+  const amountColorClass = React27__namespace.useMemo(() => {
+    if (visualState === "sent") {
+      return "text-muted-foreground/40";
+    }
+    if (delivery.isReadyToUnload) {
+      return "text-green-600 dark:text-green-400";
+    }
+    if (delivery.hasProductionRisk) {
+      return "text-red-600 dark:text-red-400";
+    }
+    return "text-muted-foreground";
+  }, [visualState, delivery.isReadyToUnload, delivery.hasProductionRisk]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       className: cn(
-        // Position relative for comment dot
+        // Position relative for comment button
         "relative",
         // Full-width in cell, 90° corners
         "w-full rounded-none",
         // Sizing using Quantum tokens:
-        // - h-[80px] card height
-        // - px-6 = 24px horizontal (j3m.spacing.l)
-        // - py-4 = 16px vertical (j3m.spacing.m)
-        "h-[80px] px-6 py-4",
-        // Layout
-        "flex items-center",
-        // Card base: white background, complete border
-        "bg-background border border-border",
+        // - 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
+        styles.cardBg,
+        "border border-border",
         // Left stroke for status
         styles.stroke,
-        // Interactive states
-        "cursor-pointer transition-all duration-200 ease-out",
-        "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 focus-visible:ring-offset-1",
-        // Greyed out for sent state
-        visualState === "sent" && "opacity-60",
+        // Interactive states (reduced for sent state)
+        "transition-all duration-200 ease-out",
+        visualState !== "sent" && "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
         className
       ),
       children: [
-        hasComments && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
           {
-            className: "absolute -top-1 -right-1 h-3 w-3 rounded-full bg-primary ring-2 ring-background",
-            "aria-label": "Has comments"
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: cn(
+              "absolute top-2 right-2",
+              // 44px touch target for accessibility
+              "h-11 w-11",
+              "rounded-full",
+              hasComments && "text-primary"
+            ),
+            onClick: handleCommentClick,
+            "aria-label": hasComments ? `${delivery.comments.length} comments` : "Add comment",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-5 w-5" }),
+              hasComments && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-primary border-2 border-background",
+                  "aria-hidden": "true"
+                }
+              )
+            ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center gap-3 min-w-0 flex-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
-            visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
-            delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-            delivery.supplierName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground truncate ml-auto", children: delivery.supplierName })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3.5 w-3.5 shrink-0", styles.iconColor) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn("h-full rounded-full transition-all", styles.progressBg),
-                style: { width: `${productionProgress}%` }
-              }
-            ) }),
-            productionDisplay && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-              "text-xs tabular-nums font-medium shrink-0",
-              delivery.isReadyToUnload ? "text-green-600 dark:text-green-400" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : "text-muted-foreground"
-            ), children: productionDisplay })
-          ] })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            className: cn(
+              // Full width, no background (inherits from parent)
+              "w-full bg-transparent text-left",
+              // Layout - vertical stack
+              "flex flex-col gap-2",
+              // Interactive states
+              "cursor-pointer",
+              "active:translate-y-0 active:shadow-sm",
+              // Focus state
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 overflow-hidden pr-12", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-semibold truncate", styles.content), children: prefixTitle }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+                delivery.supplierName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "text-xs truncate ml-auto",
+                  visualState === "sent" ? "text-muted-foreground/40" : "text-muted-foreground"
+                ), children: delivery.supplierName })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pr-14", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("h-full rounded-full transition-all", styles.progressBg),
+                  style: { width: `${productionProgress}%` }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                productionDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3 w-3 shrink-0", styles.iconColor) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                    "text-[11px] tabular-nums font-medium",
+                    amountColorClass
+                  ), children: productionDisplay })
+                ] }),
+                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600/60 dark:text-green-400/60 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground/50 uppercase tracking-wide", children: "Sent" })
+                ] })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -9583,7 +9643,7 @@ function WeeklyLoadingView({
   deliveries,
   onDeliveryClick,
   onWeekChange,
-  onDayCommentClick,
+  onDeliveryCommentClick,
   showNavigation = true,
   className
 }) {
@@ -9614,20 +9674,6 @@ function WeeklyLoadingView({
     }
     return grouped;
   }, [deliveries]);
-  const commentCountByDay = React27__namespace.useMemo(() => {
-    const counts = /* @__PURE__ */ new Map();
-    for (let i = 1; i <= 5; i++) {
-      counts.set(i, 0);
-    }
-    for (const delivery of deliveries) {
-      const dayOfWeek = delivery.date.getDay();
-      if (dayOfWeek >= 1 && dayOfWeek <= 5) {
-        const current = counts.get(dayOfWeek) ?? 0;
-        counts.set(dayOfWeek, current + delivery.comments.length);
-      }
-    }
-    return counts;
-  }, [deliveries]);
   const totalDeliveries = deliveries.length;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between", children: [
@@ -9692,54 +9738,27 @@ function WeeklyLoadingView({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "flex-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 border-b border-border bg-muted/30", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
-          const dayCommentCount = commentCountByDay.get(dayOfWeek) ?? 0;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                // Relative for positioning comment button
-                "relative",
-                // Compact padding: py-2 px-3 (j3m.spacing.xs / j3m.spacing.s)
-                "flex items-center justify-center gap-2 py-2 px-3",
-                dayIsToday && "bg-primary/5"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "text-xs font-medium uppercase tracking-wide",
-                  dayIsToday ? "text-primary" : "text-muted-foreground"
-                ), children: getShortDayLabel(dayOfWeek) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "text-base font-semibold tabular-nums",
-                  dayIsToday ? "text-primary" : "text-foreground"
-                ), children: date.getDate() }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    className: cn(
-                      "absolute top-1 right-1 h-7 w-7",
-                      dayCommentCount > 0 && "text-primary"
-                    ),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDayCommentClick?.(dayOfWeek, date);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4" }),
-                        dayCommentCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dayCommentCount > 0 ? `${dayCommentCount} comments on ${getShortDayLabel(dayOfWeek)}` : `Add comment for ${getShortDayLabel(dayOfWeek)}` })
-                    ]
-                  }
-                )
-              ]
-            },
-            dayOfWeek
-          );
-        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 border-b border-border bg-muted/30", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              // Compact padding
+              "flex flex-col items-center justify-center py-2 px-2",
+              dayIsToday && "bg-primary/5"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                dayIsToday ? "text-primary" : "text-muted-foreground"
+              ), children: getShortDayLabel(dayOfWeek) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "text-lg font-medium tabular-nums leading-tight mt-0.5",
+                dayIsToday ? "text-primary" : "text-foreground"
+              ), children: date.getDate() })
+            ]
+          },
+          dayOfWeek
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
           const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9754,7 +9773,8 @@ function WeeklyLoadingView({
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
@@ -9765,7 +9785,6 @@ function WeeklyLoadingView({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden divide-y divide-border", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
         const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
-        const dayCommentCount = commentCountByDay.get(dayOfWeek) ?? 0;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -9774,52 +9793,31 @@ function WeeklyLoadingView({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-xs font-medium uppercase",
-                    dayIsToday ? "text-primary" : "text-muted-foreground"
-                  ), children: getShortDayLabel(dayOfWeek) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "text-base font-semibold tabular-nums",
-                    dayIsToday ? "text-primary" : "text-foreground"
-                  ), children: date.getDate() }),
-                  dayIsToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary font-medium", children: "Today" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                    dayDeliveries.length,
-                    " ",
-                    dayDeliveries.length === 1 ? "delivery" : "deliveries"
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center min-w-[40px]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-[11px] font-semibold uppercase tracking-wide leading-none",
+                      dayIsToday ? "text-primary" : "text-muted-foreground"
+                    ), children: getShortDayLabel(dayOfWeek) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                      "text-lg font-medium tabular-nums leading-tight mt-0.5",
+                      dayIsToday ? "text-primary" : "text-foreground"
+                    ), children: date.getDate() })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: cn(
-                        "h-7 w-7",
-                        dayCommentCount > 0 && "text-primary"
-                      ),
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onDayCommentClick?.(dayOfWeek, date);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4" }),
-                          dayCommentCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Comments" })
-                      ]
-                    }
-                  )
+                  dayIsToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded", children: "Today" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                  dayDeliveries.length,
+                  " ",
+                  dayDeliveries.length === 1 ? "delivery" : "deliveries"
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 p-3 pt-0", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
                 DeliveryBadge,
                 {
                   delivery,
-                  onClick: () => onDeliveryClick?.(delivery)
+                  onClick: () => onDeliveryClick?.(delivery),
+                  onCommentClick: () => onDeliveryCommentClick?.(delivery)
                 },
                 delivery.id
               )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
@@ -9929,7 +9927,7 @@ function AddCommentDialog({
   }, [open]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-unloading note" }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-loading note" }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
         "Add a note for ",
         /* @__PURE__ */ jsxRuntime.jsx("strong", { children: delivery.label }),
@@ -9945,7 +9943,7 @@ function AddCommentDialog({
         Textarea,
         {
           id: "comment-text",
-          placeholder: "Add a note before unloading...",
+          placeholder: "Add a note before loading...",
           value: commentText,
           onChange: (e) => setCommentText(e.target.value),
           onKeyDown: handleKeyDown,
@@ -10000,7 +9998,7 @@ function CommentsSection({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Notes before unloading" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Notes before loading" }),
           comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-[10px] h-5", children: comments.length })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10035,7 +10033,7 @@ function CommentsSection({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: comment.text })
         ] }, comment.id)) })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground", children: "No pre-unloading notes yet. Add notes before confirming the load." })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground", children: "No pre-loading notes yet. Add notes before confirming the load." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AddCommentDialog,
@@ -10098,7 +10096,7 @@ function DeliveryDetailPage({
     const addons = delivery.elements.filter((e) => e.status === "addon");
     return { loaded, missing, moved, addons };
   }, [delivery.elements]);
-  const preUnloadingComments = delivery.comments.filter((c) => c.context === "pre_unloading");
+  const preLoadingComments = delivery.comments.filter((c) => c.context === "pre_unloading");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-4 py-3 border-b bg-background sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
@@ -10147,7 +10145,7 @@ function DeliveryDetailPage({
               {
                 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 unload"
+                children: "Ready to load"
               }
             )
           ] })
@@ -10238,13 +10236,13 @@ function DeliveryDetailPage({
           ] })
         ] })
       ] }),
-      delivery.elements.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+      (elementsByStatus.loaded.length > 0 || elementsByStatus.missing.length > 0 || elementsByStatus.moved.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Elements to Unload" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "What should be packed" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
-            delivery.elements.length,
-            " total"
+            elementsByStatus.loaded.length + elementsByStatus.missing.length + elementsByStatus.moved.length,
+            " items"
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
@@ -10255,7 +10253,7 @@ function DeliveryDetailPage({
             /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
             /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: delivery.elements.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: [...elementsByStatus.loaded, ...elementsByStatus.missing, ...elementsByStatus.moved].map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
             TableRow,
             {
               className: getElementRowBg(element.status),
@@ -10283,10 +10281,6 @@ function DeliveryDetailPage({
                   element.status === "moved" && element.actualDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-blue-600 dark:text-blue-400", children: [
                     "\u2192 ",
                     element.actualDeliveryLabel
-                  ] }),
-                  element.status === "addon" && element.originalDeliveryLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-purple-600 dark:text-purple-400", children: [
-                    "from ",
-                    element.originalDeliveryLabel
                   ] })
                 ] }) })
               ]
@@ -10295,10 +10289,48 @@ function DeliveryDetailPage({
           )) })
         ] }) })
       ] }),
+      elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 text-purple-600 dark:text-purple-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Extra items (moved to this delivery)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            elementsByStatus.addons.length,
+            " items"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "These items were originally planned for other deliveries but have been moved to this one." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-purple-200 dark:border-purple-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "bg-purple-50/50 dark:bg-purple-950/30 hover:bg-purple-50/50 dark:hover:bg-purple-950/30", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Moved from" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: elementsByStatus.addons.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              className: "bg-purple-50/30 dark:bg-purple-950/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-medium", children: element.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: element.type }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.weight ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  element.weight,
+                  " ",
+                  element.weightUnit || "kg"
+                ] }) : "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-right tabular-nums", children: element.sizeSqm ?? "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: element.originalDeliveryLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-purple-600 dark:text-purple-400", children: element.originalDeliveryLabel }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })
+              ]
+            },
+            element.id
+          )) })
+        ] }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         CommentsSection,
         {
-          comments: preUnloadingComments,
+          comments: preLoadingComments,
           delivery,
           weekId: week.weekKey,
           onAddComment
@@ -10335,6 +10367,9 @@ function SupplierWeeklyLoading({
 }) {
   const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
   const [sheetOpen, setSheetOpen] = React27__namespace.useState(false);
+  const [commentDelivery, setCommentDelivery] = React27__namespace.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React27__namespace.useState(false);
+  const [commentText, setCommentText] = React27__namespace.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -10345,6 +10380,38 @@ function SupplierWeeklyLoading({
     setTimeout(() => setSelectedDelivery(null), 200);
     onBack?.();
   };
+  const handleDeliveryCommentClick = (delivery) => {
+    setCommentDelivery(delivery);
+    setCommentDialogOpen(true);
+  };
+  const handleCommentDialogClose = () => {
+    setCommentDialogOpen(false);
+    setCommentText("");
+    setTimeout(() => setCommentDelivery(null), 200);
+  };
+  const handleCommentSubmit = () => {
+    if (commentText.trim() && commentDelivery && onAddComment) {
+      onAddComment({
+        author: "Current User",
+        // Would come from auth context in real app
+        text: commentText.trim(),
+        context: "pre_unloading",
+        weekId: week.weekKey,
+        deliveryId: commentDelivery.id,
+        supplierId: commentDelivery.supplierId,
+        supplierName: commentDelivery.supplierName,
+        prefixId: commentDelivery.prefixScope,
+        prefixName: commentDelivery.prefixScope
+      });
+      handleCommentDialogClose();
+    }
+  };
+  const handleCommentKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleCommentSubmit();
+    }
+  };
   const Wrapper = bordered ? Card : "div";
   const Content14 = bordered ? CardContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -10363,6 +10430,7 @@ function SupplierWeeklyLoading({
             week,
             deliveries,
             onDeliveryClick: handleDeliveryClick,
+            onDeliveryCommentClick: handleDeliveryCommentClick,
             onWeekChange,
             showNavigation
           }
@@ -10391,7 +10459,58 @@ function SupplierWeeklyLoading({
           )
         ]
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: commentDialogOpen, onOpenChange: (open) => !open && handleCommentDialogClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add pre-loading note" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
+          "Add a note for ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: commentDelivery?.label }),
+          " (",
+          commentDelivery?.supplierName,
+          commentDelivery?.prefixScope && ` \u2022 ${commentDelivery.prefixScope}`,
+          ")."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: "card-comment-text", className: "text-sm font-medium", children: "Note" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            id: "card-comment-text",
+            placeholder: "Add a note before loading...",
+            value: commentText,
+            onChange: (e) => setCommentText(e.target.value),
+            onKeyDown: handleCommentKeyDown,
+            className: "min-h-[120px] text-base resize-none",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u2318+Enter to save" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: handleCommentDialogClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            onClick: handleCommentSubmit,
+            disabled: !commentText.trim(),
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+              "Save note"
+            ]
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
 function getStatusBadgeVariant3(status) {