@j3m-quantum/ui 1.7.0 → 1.9.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React22 = require('react');
+var React27 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -40,6 +40,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ResizablePrimitive = require('react-resizable-panels');
+var reactLeaflet = require('react-leaflet');
 var reactTable = require('@tanstack/react-table');
 var dateFns = require('date-fns');
 
@@ -63,7 +64,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -96,8 +97,8 @@ var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrim
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React22__namespace.useState(void 0);
-  React22__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React27__namespace.useState(void 0);
+  React27__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -138,7 +139,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React22__namespace.forwardRef(
+var Button = React27__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -502,7 +503,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React22__namespace.useMemo(
+  const _values = React27__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -788,7 +789,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React22__namespace.createContext({
+var ToggleGroupContext = React27__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -825,7 +826,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React22__namespace.useContext(ToggleGroupContext);
+  const context = React27__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -855,7 +856,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React22__namespace.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React27__namespace.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1275,7 +1276,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React22__namespace.createContext(
+var FormFieldContext = React27__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1284,8 +1285,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React22__namespace.useContext(FormFieldContext);
-  const itemContext = React22__namespace.useContext(FormItemContext);
+  const fieldContext = React27__namespace.useContext(FormFieldContext);
+  const itemContext = React27__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1302,11 +1303,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React22__namespace.createContext(
+var FormItemContext = React27__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React22__namespace.useId();
+  const id = React27__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1554,7 +1555,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React22.useMemo(() => {
+  const content = React27.useMemo(() => {
     if (children) {
       return children;
     }
@@ -2408,8 +2409,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React22__namespace.useRef(null);
-  React22__namespace.useEffect(() => {
+  const ref = React27__namespace.useRef(null);
+  React27__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2430,9 +2431,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React22__namespace.createContext(null);
+var CarouselContext = React27__namespace.createContext(null);
 function useCarousel() {
-  const context = React22__namespace.useContext(CarouselContext);
+  const context = React27__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2454,20 +2455,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React22__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React22__namespace.useState(false);
-  const onSelect = React22__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React27__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React27__namespace.useState(false);
+  const onSelect = React27__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React22__namespace.useCallback(() => {
+  const scrollPrev = React27__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React22__namespace.useCallback(() => {
+  const scrollNext = React27__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React22__namespace.useCallback(
+  const handleKeyDown = React27__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2479,11 +2480,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2616,9 +2617,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React22__namespace.createContext(null);
+var ChartContext = React27__namespace.createContext(null);
 function useChart() {
-  const context = React22__namespace.useContext(ChartContext);
+  const context = React27__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2631,7 +2632,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React22__namespace.useId();
+  const uniqueId = React27__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2692,7 +2693,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React22__namespace.useMemo(() => {
+  const tooltipLabel = React27__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3494,8 +3495,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React22__namespace.useState("light");
-  React22__namespace.useEffect(() => {
+  const [theme, setTheme] = React27__namespace.useState("light");
+  React27__namespace.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -4144,7 +4145,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React22__namespace.forwardRef(
+var SearchTrigger = React27__namespace.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -4180,7 +4181,7 @@ var SearchTrigger = React22__namespace.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -5155,9 +5156,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React22__namespace.createContext(null);
+var SidebarContext = React27__namespace.createContext(null);
 function useSidebar() {
-  const context = React22__namespace.useContext(SidebarContext);
+  const context = React27__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5173,10 +5174,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React22__namespace.useState(false);
-  const [_open, _setOpen] = React22__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React27__namespace.useState(false);
+  const [_open, _setOpen] = React27__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React22__namespace.useCallback(
+  const setOpen = React27__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5188,10 +5189,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React22__namespace.useCallback(() => {
+  const toggleSidebar = React27__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5202,7 +5203,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React22__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5660,7 +5661,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React22__namespace.useMemo(() => {
+  const width = React27__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5803,7 +5804,7 @@ var sectionVariants = classVarianceAuthority.cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React22__namespace.forwardRef(
+var Section = React27__namespace.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
@@ -5815,7 +5816,7 @@ var Section = React22__namespace.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React22__namespace.forwardRef(
+var SectionHeader = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5830,7 +5831,7 @@ var SectionHeader = React22__namespace.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React22__namespace.forwardRef(
+var SectionTitle = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h2",
     {
@@ -5844,7 +5845,7 @@ var SectionTitle = React22__namespace.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React22__namespace.forwardRef(
+var SectionDescription = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
@@ -5858,7 +5859,7 @@ var SectionDescription = React22__namespace.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React22__namespace.forwardRef(
+var SectionContent = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5872,7 +5873,7 @@ var SectionContent = React22__namespace.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React22__namespace.forwardRef(
+var SectionFooter = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5888,6 +5889,89 @@ var SectionFooter = React22__namespace.forwardRef(
   )
 );
 SectionFooter.displayName = "SectionFooter";
+function Map2({
+  center,
+  zoom = 13,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.MapContainer,
+    {
+      center,
+      zoom,
+      className: cn(
+        "w-full rounded-lg border border-border overflow-hidden",
+        "[&_.leaflet-control-zoom]:border-border",
+        "[&_.leaflet-control-zoom]:rounded-md",
+        "[&_.leaflet-control-zoom]:shadow-sm",
+        "[&_.leaflet-control-zoom-in]:rounded-t-md",
+        "[&_.leaflet-control-zoom-in]:border-b",
+        "[&_.leaflet-control-zoom-in]:border-border",
+        "[&_.leaflet-control-zoom-out]:rounded-b-md",
+        "[&_.leaflet-popup-content-wrapper]:rounded-lg",
+        "[&_.leaflet-popup-content-wrapper]:shadow-lg",
+        "[&_.leaflet-popup-content-wrapper]:border",
+        "[&_.leaflet-popup-content-wrapper]:border-border",
+        className
+      ),
+      scrollWheelZoom: true,
+      ...props,
+      children
+    }
+  );
+}
+var TILE_LAYERS = {
+  default: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  },
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  },
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+  }
+};
+function MapTileLayer({
+  variant = "default",
+  ...props
+}) {
+  const layer = TILE_LAYERS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.TileLayer,
+    {
+      url: layer.url,
+      attribution: layer.attribution,
+      ...props
+    }
+  );
+}
+function MapMarker({
+  position,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Marker, { position, ...props, children });
+}
+function MapPopup({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children }) });
+}
+function MapTooltip({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { ...props, children });
+}
+function MapZoomControl(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.ZoomControl, { ...props });
+}
 function DataTableColumnHeader({
   column,
   title,
@@ -6097,7 +6181,7 @@ function SiteHeader({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--header-height,3.5rem)] w-full items-center gap-[var(--j3m-spacing-s)] px-[var(--j3m-spacing-m)]", children: [
         trigger,
         trigger && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React27__namespace.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -6704,11 +6788,11 @@ function PlanningWeekCommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React22__namespace.useState("");
-  const [selectedLocationId, setSelectedLocationId] = React22__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
-  const selectedLocation = React22__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const selectedLocation = React27__namespace.useMemo(() => {
     return locationOptions.find((opt) => opt.id === selectedLocationId);
   }, [locationOptions, selectedLocationId]);
   const handleSubmit = () => {
@@ -6752,8 +6836,8 @@ function PlanningWeekCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React22__namespace.useRef(open);
-  React22__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -6776,7 +6860,7 @@ function PlanningWeekCommentPopover({
             /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 h-fit overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
               /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
@@ -7107,22 +7191,22 @@ function PlanningTable({
     stickySupplierColumn = true,
     maxHeight = "600px"
   } = config;
-  const weeks = React22__namespace.useMemo(
+  const weeks = React27__namespace.useMemo(
     () => generateWeeks(startDate, weekCount),
     [startDate, weekCount]
   );
-  const currentWeekKey = React22__namespace.useMemo(() => {
+  const currentWeekKey = React27__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const columns = React22__namespace.useMemo(
+  const columns = React27__namespace.useMemo(
     () => generateColumns(weeks, config, suppliers),
     [weeks, config, suppliers]
   );
-  const [sorting, setSorting] = React22__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React22__namespace.useState([]);
-  const [columnVisibility, setColumnVisibility] = React22__namespace.useState({});
-  const [rowSelection, setRowSelection] = React22__namespace.useState({});
+  const [sorting, setSorting] = React27__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React27__namespace.useState([]);
+  const [columnVisibility, setColumnVisibility] = React27__namespace.useState({});
+  const [rowSelection, setRowSelection] = React27__namespace.useState({});
   const table = reactTable.useReactTable({
     data: suppliers,
     columns,
@@ -7329,10 +7413,10 @@ function DeliveryCommentPopover({
   onAddComment,
   deliveryLabel
 }) {
-  const [open, setOpen] = React22__namespace.useState(false);
-  const [newCommentText, setNewCommentText] = React22__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
+  const [open, setOpen] = React27__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
   const handleSubmit = () => {
     if (newCommentText.trim() && onAddComment) {
       onAddComment(newCommentText.trim());
@@ -7359,8 +7443,8 @@ function DeliveryCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React22__namespace.useRef(open);
-  React22__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7382,7 +7466,7 @@ function DeliveryCommentPopover({
             /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: deliveryLabel })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 h-fit overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
               /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium", children: [
@@ -7472,8 +7556,8 @@ function ProductionCommentSection({
   comments = [],
   onAddComment
 }) {
-  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
-  const [newComment, setNewComment] = React22__namespace.useState("");
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const [newComment, setNewComment] = React27__namespace.useState("");
   const handleSubmit = () => {
     if (newComment.trim() && onAddComment) {
       onAddComment(newComment.trim());
@@ -7629,7 +7713,7 @@ function DeliveryDetailsView({
   onAddComment
 }) {
   const elements = delivery.elements ?? [];
-  const categorizedElements = React22__namespace.useMemo(() => {
+  const categorizedElements = React27__namespace.useMemo(() => {
     const sent = [];
     const notSent = [];
     const moved = [];
@@ -7997,15 +8081,15 @@ function WeekDetailDialog({
 }) {
   const production = data?.production;
   const initialProduced = production?.produced ?? 0;
-  const [producedValue, setProducedValue] = React22__namespace.useState(initialProduced.toString());
-  const [hasChanges, setHasChanges] = React22__namespace.useState(false);
-  const [selectedDelivery, setSelectedDelivery] = React22__namespace.useState(null);
-  React22__namespace.useEffect(() => {
+  const [producedValue, setProducedValue] = React27__namespace.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React27__namespace.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
+  React27__namespace.useEffect(() => {
     const newProduced = data?.production?.produced ?? 0;
     setProducedValue(newProduced.toString());
     setHasChanges(false);
   }, [data]);
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!open) {
       setSelectedDelivery(null);
     }
@@ -8227,13 +8311,13 @@ function CalibrationWeekCell({
   onAddClick,
   ...props
 }) {
-  const inputRef = React22__namespace.useRef(null);
-  const [localValue, setLocalValue] = React22__namespace.useState(
+  const inputRef = React27__namespace.useRef(null);
+  const [localValue, setLocalValue] = React27__namespace.useState(
     data.entered !== null ? String(data.entered) : ""
   );
-  const [isHovered, setIsHovered] = React22__namespace.useState(false);
-  const [isEditing, setIsEditing] = React22__namespace.useState(false);
-  React22__namespace.useEffect(() => {
+  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const [isEditing, setIsEditing] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     setLocalValue(data.entered !== null ? String(data.entered) : "");
   }, [data.entered]);
   const unitLabel = formatCalibrationUnit(unit);
@@ -8419,11 +8503,11 @@ function CommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React22__namespace.useState("");
-  const [selectedPrefixId, setSelectedPrefixId] = React22__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React22__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React22__namespace.useState(false);
-  const selectedPrefixName = React22__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const selectedPrefixName = React27__namespace.useMemo(() => {
     const prefix = availablePrefixes.find((p) => p.id === selectedPrefixId);
     return prefix?.name ?? "";
   }, [availablePrefixes, selectedPrefixId]);
@@ -8455,8 +8539,8 @@ function CommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React22__namespace.useRef(open);
-  React22__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -8479,7 +8563,7 @@ function CommentPopover({
             /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold", children: "Comments" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: weekLabel })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 max-h-[400px] overflow-y-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 space-y-2 h-fit overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
               /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 Button,
@@ -8685,7 +8769,7 @@ function CalibrationTable({
     onAddComment,
     onAddEarlierWeek
   } = config;
-  const calculatedStartDate = React22__namespace.useMemo(() => {
+  const calculatedStartDate = React27__namespace.useMemo(() => {
     if (startDate) return startDate;
     let earliest = null;
     for (const prefix of prefixes) {
@@ -8706,31 +8790,31 @@ function CalibrationTable({
     }
     return earliest ?? /* @__PURE__ */ new Date();
   }, [startDate, prefixes]);
-  const [additionalWeeks, setAdditionalWeeks] = React22__namespace.useState(0);
-  const weeks = React22__namespace.useMemo(() => {
+  const [additionalWeeks, setAdditionalWeeks] = React27__namespace.useState(0);
+  const weeks = React27__namespace.useMemo(() => {
     const start = new Date(calculatedStartDate);
     start.setDate(start.getDate() - additionalWeeks * 7);
     return generateWeeks(start, weekCount + additionalWeeks);
   }, [calculatedStartDate, weekCount, additionalWeeks]);
-  React22__namespace.useMemo(() => {
+  React27__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const [currentPage, setCurrentPage] = React22__namespace.useState(0);
-  const [pageSize, setPageSize] = React22__namespace.useState(defaultPageSize);
-  const [searchQuery, setSearchQuery] = React22__namespace.useState("");
-  const filteredPrefixes = React22__namespace.useMemo(() => {
+  const [currentPage, setCurrentPage] = React27__namespace.useState(0);
+  const [pageSize, setPageSize] = React27__namespace.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React27__namespace.useState("");
+  const filteredPrefixes = React27__namespace.useMemo(() => {
     if (!searchQuery) return prefixes;
     const query = searchQuery.toLowerCase();
     return prefixes.filter(
       (p) => p.name.toLowerCase().includes(query) || p.typeCode.toLowerCase().includes(query)
     );
   }, [prefixes, searchQuery]);
-  const paginatedPrefixes = React22__namespace.useMemo(() => {
+  const paginatedPrefixes = React27__namespace.useMemo(() => {
     const start = currentPage * pageSize;
     return filteredPrefixes.slice(start, start + pageSize);
   }, [filteredPrefixes, currentPage, pageSize]);
-  React22__namespace.useMemo(
+  React27__namespace.useMemo(
     () => canSubmitCalibration(prefixes),
     [prefixes]
   );
@@ -8754,7 +8838,7 @@ function CalibrationTable({
     }
     return allComments;
   };
-  const availablePrefixes = React22__namespace.useMemo(
+  const availablePrefixes = React27__namespace.useMemo(
     () => prefixes.map((p) => ({ id: p.id, name: p.name })),
     [prefixes]
   );
@@ -8991,14 +9075,14 @@ function CommentDialog({
   open,
   onOpenChange
 }) {
-  const [selectedPrefixId, setSelectedPrefixId] = React22__namespace.useState("");
-  const [selectedWeekKey, setSelectedWeekKey] = React22__namespace.useState("");
-  const [commentText, setCommentText] = React22__namespace.useState("");
-  const currentWeek = React22__namespace.useMemo(
+  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React27__namespace.useState("");
+  const [commentText, setCommentText] = React27__namespace.useState("");
+  const currentWeek = React27__namespace.useMemo(
     () => weeks.find((w) => w.isCurrentWeek),
     [weeks]
   );
-  React22__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (open) {
       setSelectedPrefixId(prefixes[0]?.id ?? "");
       setSelectedWeekKey(currentWeek ? getWeekKey(currentWeek.startDate) : weeks[0] ? getWeekKey(weeks[0].startDate) : "");
@@ -9169,6 +9253,1315 @@ function SubmitCalibrationBar({
   );
 }
 
+// src/blocks/supplier-weekly-loading/types.ts
+function getLoadingElementStatusLabel(status) {
+  switch (status) {
+    case "loaded":
+      return "Loaded";
+    case "missing":
+      return "Missing";
+    case "moved":
+      return "Moved to another delivery";
+    case "addon":
+      return "Add-on";
+    default:
+      return status;
+  }
+}
+function getLoadingDeliveryStatusLabel(status) {
+  switch (status) {
+    case "planned":
+      return "Planned";
+    case "in_progress":
+      return "In Progress";
+    case "loaded":
+      return "Loaded";
+    case "shipped":
+      return "Shipped";
+    case "delivered":
+      return "Delivered";
+    case "cancelled":
+      return "Cancelled";
+    default:
+      return status;
+  }
+}
+function getDeliveryVisualState(delivery) {
+  if (delivery.status === "shipped" || delivery.status === "delivered") {
+    return "sent";
+  }
+  if (delivery.isReadyToUnload) {
+    return "ready";
+  }
+  return "normal";
+}
+function getLoadingISOWeek(date) {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function getLoadingWeekKey(date) {
+  const year = date.getFullYear();
+  const weekNumber = getLoadingISOWeek(date);
+  return `${year}-W${weekNumber.toString().padStart(2, "0")}`;
+}
+function generateLoadingWeek(date) {
+  const monday = new Date(date);
+  const day = monday.getDay();
+  const diff = monday.getDate() - day + (day === 0 ? -6 : 1);
+  monday.setDate(diff);
+  monday.setHours(0, 0, 0, 0);
+  const friday = new Date(monday);
+  friday.setDate(monday.getDate() + 4);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const isCurrentWeek = monday <= today && today <= friday;
+  const formatDate2 = (d) => {
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  };
+  return {
+    weekKey: getLoadingWeekKey(monday),
+    label: `W${getLoadingISOWeek(monday).toString().padStart(2, "0")}`,
+    startDate: monday,
+    endDate: friday,
+    dateRange: `${formatDate2(monday)} - ${formatDate2(friday)}`,
+    isCurrentWeek
+  };
+}
+function groupDeliveriesByDay(deliveries) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (let i = 1; i <= 5; i++) {
+    grouped.set(i, []);
+  }
+  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);
+    }
+  }
+  return grouped;
+}
+function getDayLabel(dayOfWeek) {
+  const labels = {
+    1: "Monday",
+    2: "Tuesday",
+    3: "Wednesday",
+    4: "Thursday",
+    5: "Friday"
+  };
+  return labels[dayOfWeek] ?? "";
+}
+function getShortDayLabel(dayOfWeek) {
+  const labels = {
+    1: "Mon",
+    2: "Tue",
+    3: "Wed",
+    4: "Thu",
+    5: "Fri"
+  };
+  return labels[dayOfWeek] ?? "";
+}
+function extractPrefixes(deliveries) {
+  const prefixMap = /* @__PURE__ */ new Map();
+  for (const delivery of deliveries) {
+    const prefixCode = delivery.prefixScope ?? "GENERAL";
+    if (!prefixMap.has(prefixCode)) {
+      prefixMap.set(prefixCode, {
+        id: prefixCode,
+        name: prefixCode === "GENERAL" ? "General" : prefixCode,
+        typeCode: prefixCode,
+        supplierId: delivery.supplierId,
+        supplierName: delivery.supplierName,
+        totalDeliveries: 0,
+        sentDeliveries: 0,
+        hasRisk: false
+      });
+    }
+    const prefix = prefixMap.get(prefixCode);
+    prefix.totalDeliveries += 1;
+    if (delivery.status === "shipped" || delivery.status === "delivered") {
+      prefix.sentDeliveries += 1;
+    }
+    if (delivery.hasProductionRisk) {
+      prefix.hasRisk = true;
+    }
+  }
+  return Array.from(prefixMap.values());
+}
+function groupDeliveriesByPrefixAndDay(deliveries) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const delivery of deliveries) {
+    const prefixCode = delivery.prefixScope ?? "GENERAL";
+    const dayOfWeek = delivery.date.getDay();
+    if (dayOfWeek < 1 || dayOfWeek > 5) continue;
+    if (!grouped.has(prefixCode)) {
+      const dayMap2 = /* @__PURE__ */ new Map();
+      for (let i = 1; i <= 5; i++) {
+        dayMap2.set(i, []);
+      }
+      grouped.set(prefixCode, dayMap2);
+    }
+    const dayMap = grouped.get(prefixCode);
+    const dayDeliveries = dayMap.get(dayOfWeek) ?? [];
+    dayDeliveries.push(delivery);
+    dayMap.set(dayOfWeek, dayDeliveries);
+  }
+  return grouped;
+}
+function getLeftStrokeStyles(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"
+    };
+  }
+  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"
+      };
+    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"
+      };
+    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"
+      };
+  }
+}
+function DeliveryBadge({
+  delivery,
+  onClick,
+  className
+}) {
+  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const hasComments = delivery.comments.length > 0;
+  const visualState = getDeliveryVisualState(delivery);
+  const styles = getLeftStrokeStyles(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const prefixTitle = React27__namespace.useMemo(() => {
+    const prefixSet = /* @__PURE__ */ new Set();
+    if (delivery.elements && delivery.elements.length > 0) {
+      for (const element of delivery.elements) {
+        if (element.prefix) {
+          prefixSet.add(element.prefix);
+        }
+      }
+    }
+    if (prefixSet.size === 0 && delivery.prefixScope) {
+      prefixSet.add(delivery.prefixScope);
+    }
+    const prefixes = Array.from(prefixSet);
+    if (prefixes.length === 0) {
+      return delivery.label;
+    }
+    if (prefixes.length > 3) {
+      return `${prefixes.slice(0, 3).join(" \xB7 ")} \xB7 +${prefixes.length - 3}`;
+    }
+    return prefixes.join(" \xB7 ");
+  }, [delivery]);
+  const productionProgress = React27__namespace.useMemo(() => {
+    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0 && delivery.totalTons > 0) {
+      return Math.min(delivery.producedTons / delivery.totalTons * 100, 100);
+    }
+    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0 && delivery.totalCount > 0) {
+      return Math.min(delivery.producedCount / delivery.totalCount * 100, 100);
+    }
+    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0 && delivery.totalCount > 0) {
+      return Math.min(delivery.loadedCount / delivery.totalCount * 100, 100);
+    }
+    return 0;
+  }, [delivery]);
+  const productionDisplay = React27__namespace.useMemo(() => {
+    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0) {
+      return `${delivery.producedTons}/${delivery.totalTons}t`;
+    }
+    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0) {
+      return `${delivery.producedCount}/${delivery.totalCount}`;
+    }
+    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0) {
+      return `${delivery.loadedCount}/${delivery.totalCount}`;
+    }
+    return null;
+  }, [delivery]);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: cn(
+        // Position relative for comment dot
+        "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",
+        // 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",
+        className
+      ),
+      children: [
+        hasComments && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute -top-1 -right-1 h-3 w-3 rounded-full bg-primary ring-2 ring-background",
+            "aria-label": "Has comments"
+          }
+        ),
+        /* @__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 })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function WeeklyLoadingView({
+  week,
+  deliveries,
+  onDeliveryClick,
+  onWeekChange,
+  onDayCommentClick,
+  showNavigation = true,
+  className
+}) {
+  const weekDays = React27__namespace.useMemo(() => {
+    const days = [];
+    for (let i = 0; i < 5; i++) {
+      const date = dateFns.addDays(week.startDate, i);
+      days.push({
+        date,
+        dayOfWeek: i + 1,
+        isToday: dateFns.isToday(date)
+      });
+    }
+    return days;
+  }, [week.startDate]);
+  const deliveriesByDay = React27__namespace.useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (let i = 1; i <= 5; i++) {
+      grouped.set(i, []);
+    }
+    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);
+      }
+    }
+    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: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+            "text-2xl font-bold tabular-nums",
+            week.isCurrentWeek && "text-primary"
+          ), children: week.label }),
+          week.isCurrentWeek && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2.5 w-2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-primary" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: week.dateRange }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            totalDeliveries,
+            " ",
+            totalDeliveries === 1 ? "delivery" : "deliveries"
+          ] })
+        ] })
+      ] }),
+      showNavigation && onWeekChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => onWeekChange("prev"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous week" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => {
+            },
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => onWeekChange("next"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next week" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__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", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
+          const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                // Column padding: p-3 = 12px (j3m.spacing.s)
+                "flex flex-col p-3",
+                dayIsToday && "bg-primary/5"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: dayDeliveries.length > 0 ? dayDeliveries.map((delivery) => /* @__PURE__ */ jsxRuntime.jsx(
+                DeliveryBadge,
+                {
+                  delivery,
+                  onClick: () => onDeliveryClick?.(delivery)
+                },
+                delivery.id
+              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-6 text-sm text-muted-foreground/40", children: "\u2014" }) })
+            },
+            dayOfWeek
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden divide-y divide-border", children: weekDays.map(({ date, dayOfWeek, isToday: dayIsToday }) => {
+        const dayDeliveries = deliveriesByDay.get(dayOfWeek) ?? [];
+        const dayCommentCount = commentCountByDay.get(dayOfWeek) ?? 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              dayIsToday && "bg-primary/5"
+            ),
+            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(
+                    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" })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__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)
+                },
+                delivery.id
+              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground/40 py-4 text-center", children: "\u2014" }) })
+            ]
+          },
+          dayOfWeek
+        );
+      }) })
+    ] })
+  ] });
+}
+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 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";
+  }
+}
+function getElementStatusBadgeClasses(status) {
+  switch (status) {
+    case "loaded":
+      return "border-green-500 text-green-600 bg-green-50 dark:bg-green-950/50";
+    case "missing":
+      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";
+    default:
+      return "border-muted-foreground/50 text-muted-foreground";
+  }
+}
+function getElementRowBg(status) {
+  switch (status) {
+    case "loaded":
+      return "bg-green-50/30 dark:bg-green-950/10";
+    case "missing":
+      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 AddCommentDialog({
+  open,
+  onOpenChange,
+  delivery,
+  weekId,
+  onAddComment
+}) {
+  const [commentText, setCommentText] = React27__namespace.useState("");
+  const handleSubmit = () => {
+    if (commentText.trim() && onAddComment) {
+      onAddComment({
+        author: "Current User",
+        // Would come from auth context in real app
+        text: commentText.trim(),
+        context: "pre_unloading",
+        weekId,
+        deliveryId: delivery.id,
+        supplierId: delivery.supplierId,
+        supplierName: delivery.supplierName,
+        prefixId: delivery.prefixScope,
+        prefixName: delivery.prefixScope
+      });
+      setCommentText("");
+      onOpenChange(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  React27__namespace.useEffect(() => {
+    if (!open) {
+      setCommentText("");
+    }
+  }, [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.jsxs(DialogDescription, { children: [
+        "Add a note for ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: delivery.label }),
+        " (",
+        delivery.supplierName,
+        delivery.prefixScope && ` \u2022 ${delivery.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: "comment-text", className: "text-sm font-medium", children: "Note" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          id: "comment-text",
+          placeholder: "Add a note before unloading...",
+          value: commentText,
+          onChange: (e) => setCommentText(e.target.value),
+          onKeyDown: handleKeyDown,
+          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: () => onOpenChange(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          onClick: handleSubmit,
+          disabled: !commentText.trim(),
+          className: "gap-1.5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+            "Save note"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function CommentsSection({
+  comments,
+  delivery,
+  weekId,
+  onAddComment
+}) {
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [addDialogOpen, setAddDialogOpen] = React27__namespace.useState(false);
+  const formatDate2 = (date) => {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    }).format(date);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
+      /* @__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" }),
+          comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-[10px] h-5", children: comments.length })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "gap-1.5 h-9",
+            onClick: () => setAddDialogOpen(true),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+              "Add note"
+            ]
+          }
+        )
+      ] }),
+      comments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { open: viewCommentsOpen, onOpenChange: setViewCommentsOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "w-full justify-between h-8 px-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: viewCommentsOpen ? "Hide comments" : "Show comments" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+            "h-4 w-4 transition-transform duration-200",
+            viewCommentsOpen && "rotate-180"
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { className: "space-y-2 pt-2", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-1", children: [
+          /* @__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("span", { className: "text-xs font-medium", children: comment.author }),
+              comment.supplierName && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[9px] px-1.5 py-0 h-4", children: comment.prefixName ? `${comment.supplierName} - ${comment.prefixName}` : comment.supplierName })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: formatDate2(comment.createdAt) })
+          ] }),
+          /* @__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(
+      AddCommentDialog,
+      {
+        open: addDialogOpen,
+        onOpenChange: setAddDialogOpen,
+        delivery,
+        weekId,
+        onAddComment
+      }
+    )
+  ] });
+}
+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,
+  suppliers,
+  userRole,
+  currentSupplierId,
+  onBack,
+  onAddComment,
+  onConfirmLoad
+}) {
+  const visualState = getDeliveryVisualState(delivery);
+  const headerStyles = getDeliveryHeaderStyles(visualState, delivery.hasProductionRisk ?? false);
+  const loadedCount = delivery.loadedCount ?? delivery.elements.filter((e) => e.status === "loaded").length;
+  const totalCount = delivery.totalCount ?? delivery.elements.length;
+  const loadedPercent = totalCount > 0 ? Math.round(loadedCount / totalCount * 100) : 0;
+  const producedCount = delivery.producedCount ?? loadedCount;
+  const producedPercent = totalCount > 0 ? Math.round(producedCount / totalCount * 100) : 0;
+  const elementsByStatus = React27__namespace.useMemo(() => {
+    const 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");
+    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");
+  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,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "gap-1 -ml-2",
+        onClick: onBack,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-6 space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+              "flex items-center justify-center h-12 w-12 rounded-xl shrink-0",
+              headerStyles.iconBg
+            ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-6 w-6", headerStyles.iconColor) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold", children: delivery.label }),
+                visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-5 w-5 text-green-600 dark:text-green-400" }),
+                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-red-500" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                delivery.supplierName,
+                delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Badge,
+              {
+                variant: getStatusBadgeVariant2(delivery.status),
+                className: cn("shrink-0", getStatusBadgeClasses2(delivery.status)),
+                children: getLoadingDeliveryStatusLabel(delivery.status)
+              }
+            ),
+            delivery.isReadyToUnload && /* @__PURE__ */ jsxRuntime.jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700 text-green-700 dark:text-green-300",
+                children: "Ready to unload"
+              }
+            )
+          ] })
+        ] }),
+        delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-l-2 border-l-red-500 bg-red-50/50 dark:bg-red-950/30 p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-600 dark:text-red-400 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "Production delay risk" })
+          ] }),
+          delivery.riskReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 mt-1 ml-6", children: delivery.riskReason })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delivery.date.toLocaleDateString("en-US", {
+              weekday: "short",
+              month: "short",
+              day: "numeric"
+            }) })
+          ] }),
+          delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: delivery.destination })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted/50 p-4 space-y-3", children: [
+          (delivery.producedCount !== void 0 || delivery.producedTons !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Production" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                "text-sm font-semibold tabular-nums",
+                delivery.isReadyToUnload ? "text-green-600 dark:text-green-400" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : ""
+              ), children: [
+                delivery.producedTons !== void 0 && delivery.totalTons !== void 0 ? `${delivery.producedTons} / ${delivery.totalTons} tons` : `Produced ${producedCount} / ${totalCount}`,
+                delivery.isReadyToUnload && " \u2713"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full transition-all",
+                  delivery.isReadyToUnload ? "bg-green-500" : delivery.hasProductionRisk ? "bg-red-500" : "bg-amber-500"
+                ),
+                style: { width: `${producedPercent}%` }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Loading Progress" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold tabular-nums", children: [
+                "Loaded ",
+                loadedCount,
+                " / ",
+                totalCount
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 bg-black/10 dark:bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full rounded-full transition-all",
+                  loadedPercent === 100 ? "bg-green-500" : "bg-primary"
+                ),
+                style: { width: `${loadedPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap text-xs", children: [
+              elementsByStatus.loaded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
+                elementsByStatus.loaded.length,
+                " Loaded"
+              ] }),
+              elementsByStatus.missing.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                elementsByStatus.missing.length,
+                " Missing"
+              ] }),
+              elementsByStatus.moved.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-blue-600 dark:text-blue-400", children: [
+                elementsByStatus.moved.length,
+                " Moved"
+              ] }),
+              elementsByStatus.addons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-purple-600 dark:text-purple-400", children: [
+                elementsByStatus.addons.length,
+                " Add-on"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      delivery.elements.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.jsxs("span", { className: "text-xs text-muted-foreground ml-auto", children: [
+            delivery.elements.length,
+            " total"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "bg-sidebar hover:bg-sidebar", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Prefix" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold", children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Weight" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-right", children: "Size (m\xB2)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "font-semibold text-center", children: "Status" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: delivery.elements.map((element) => /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              className: getElementRowBg(element.status),
+              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: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Badge,
+                    {
+                      variant: "outline",
+                      className: cn(
+                        "text-[10px] h-5",
+                        getElementStatusBadgeClasses(element.status)
+                      ),
+                      children: getLoadingElementStatusLabel(element.status)
+                    }
+                  ),
+                  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
+                  ] })
+                ] }) })
+              ]
+            },
+            element.id
+          )) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CommentsSection,
+        {
+          comments: preUnloadingComments,
+          delivery,
+          weekId: week.weekKey,
+          onAddComment
+        }
+      ),
+      onConfirmLoad && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "pt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            className: "w-full h-12 text-base",
+            onClick: () => onConfirmLoad(delivery.id),
+            children: "Start Loading"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center mt-2", children: "Comments are saved independently." })
+      ] })
+    ] }) })
+  ] });
+}
+function SupplierWeeklyLoading({
+  week,
+  deliveries,
+  suppliers,
+  userRole,
+  currentSupplierId,
+  onDeliveryClick,
+  onBack,
+  onAddComment,
+  onConfirmLoad,
+  onWeekChange,
+  showNavigation = true,
+  bordered = true,
+  className
+}) {
+  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
+  const [sheetOpen, setSheetOpen] = React27__namespace.useState(false);
+  const handleDeliveryClick = (delivery) => {
+    setSelectedDelivery(delivery);
+    setSheetOpen(true);
+    onDeliveryClick?.(delivery);
+  };
+  const handleSheetClose = () => {
+    setSheetOpen(false);
+    setTimeout(() => setSelectedDelivery(null), 200);
+    onBack?.();
+  };
+  const Wrapper = bordered ? Card : "div";
+  const Content14 = bordered ? CardContent : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Wrapper,
+      {
+        className: cn(
+          "flex flex-col overflow-hidden",
+          // Removed fixed min-height - content-driven sizing
+          !bordered && "border border-border bg-card rounded-lg",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Content14, { className: cn("flex-1 overflow-hidden p-0", !bordered && ""), children: /* @__PURE__ */ jsxRuntime.jsx(
+          WeeklyLoadingView,
+          {
+            week,
+            deliveries,
+            onDeliveryClick: handleDeliveryClick,
+            onWeekChange,
+            showNavigation
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: sheetOpen, onOpenChange: (open) => !open && handleSheetClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetContent,
+      {
+        side: "right",
+        className: "w-full sm:max-w-lg p-0 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: selectedDelivery?.label ?? "Delivery Details" }) }),
+          selectedDelivery && /* @__PURE__ */ jsxRuntime.jsx(
+            DeliveryDetailPage,
+            {
+              delivery: selectedDelivery,
+              week,
+              suppliers,
+              userRole,
+              currentSupplierId,
+              onBack: handleSheetClose,
+              onAddComment,
+              onConfirmLoad
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+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) {
+  if (hasRisk) {
+    return {
+      stroke: "border-l-2 border-l-red-500",
+      iconColor: "text-muted-foreground"
+    };
+  }
+  switch (state) {
+    case "sent":
+      return {
+        stroke: "border-l-2 border-l-green-500/50",
+        iconColor: "text-muted-foreground/40"
+      };
+    case "ready":
+      return {
+        stroke: "border-l-2 border-l-green-500",
+        iconColor: "text-muted-foreground"
+      };
+    default:
+      return {
+        stroke: isHovered ? "border-l-2 border-l-border" : "border-l-2 border-l-transparent",
+        iconColor: "text-muted-foreground"
+      };
+  }
+}
+function DeliveryCard({
+  delivery,
+  onTap,
+  className
+}) {
+  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const hasComments = delivery.comments.length > 0;
+  const visualState = getDeliveryVisualState(delivery);
+  const styles = getLeftStrokeStyles2(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const productionDisplay = React27__namespace.useMemo(() => {
+    if (delivery.producedTons !== void 0 && delivery.totalTons !== void 0) {
+      return `${delivery.producedTons} / ${delivery.totalTons}t produced`;
+    }
+    if (delivery.producedCount !== void 0 && delivery.totalCount !== void 0) {
+      return `${delivery.producedCount} / ${delivery.totalCount} produced`;
+    }
+    if (delivery.loadedCount !== void 0 && delivery.totalCount !== void 0) {
+      return `Loaded ${delivery.loadedCount} / ${delivery.totalCount}`;
+    }
+    return null;
+  }, [delivery]);
+  const handleClick = () => {
+    onTap?.();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onTap?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      className: cn(
+        // Full-width, 90° corners (j3m.radius.none)
+        "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)
+        styles.stroke,
+        // Hover/tap state - lift effect like Calibration
+        "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",
+        // Greyed out for sent state
+        visualState === "sent" && "opacity-60",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+            "flex items-center justify-center h-10 w-10 rounded-md shrink-0 bg-muted/50"
+          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-5 w-5", styles.iconColor) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold truncate", children: delivery.label }),
+              visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600 dark:text-green-400 shrink-0" }),
+              visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: "text-[9px] px-1.5 py-0 h-4 bg-green-100 dark:bg-green-900/50 border-green-300 dark:border-green-700 text-green-700 dark:text-green-300",
+                  children: "Ready"
+                }
+              ),
+              delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
+              hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+              delivery.supplierName,
+              delivery.prefixScope && ` \u2022 ${delivery.prefixScope}`
+            ] }),
+            productionDisplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "h-3 w-3 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                delivery.isReadyToUnload ? "text-green-600 dark:text-green-400 font-medium" : delivery.hasProductionRisk ? "text-red-600 dark:text-red-400" : "text-muted-foreground"
+              ), children: [
+                delivery.isReadyToUnload ? "\u2713 " : "",
+                productionDisplay
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Badge,
+            {
+              variant: getStatusBadgeVariant3(delivery.status),
+              className: cn("text-[10px] h-5", getStatusBadgeClasses3(delivery.status)),
+              children: getLoadingDeliveryStatusLabel(delivery.status)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+        ] })
+      ] })
+    }
+  );
+}
+
 // src/components/event-calendar/types.ts
 var DEFAULT_WORKING_HOURS = {
   0: { from: 0, to: 0 },
@@ -9231,7 +10624,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React22__namespace.createContext(null);
+var CalendarContext = React27__namespace.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -9246,38 +10639,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React22__namespace.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React22__namespace.useState(defaultUserId);
-  const [events, setEventsState] = React22__namespace.useState(initialEvents);
-  const [users] = React22__namespace.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React22__namespace.useState(defaultBadgeVariant);
-  const [view, setView] = React22__namespace.useState(defaultView);
-  const [workingHours, setWorkingHours] = React22__namespace.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React22__namespace.useState(defaultVisibleHours);
-  React22__namespace.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React27__namespace.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React27__namespace.useState(defaultUserId);
+  const [events, setEventsState] = React27__namespace.useState(initialEvents);
+  const [users] = React27__namespace.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React27__namespace.useState(defaultBadgeVariant);
+  const [view, setView] = React27__namespace.useState(defaultView);
+  const [workingHours, setWorkingHours] = React27__namespace.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React27__namespace.useState(defaultVisibleHours);
+  React27__namespace.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React22__namespace.useCallback((newEvents) => {
+  const setEvents = React27__namespace.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React22__namespace.useCallback((event) => {
+  const addEvent = React27__namespace.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React22__namespace.useCallback((event) => {
+  const updateEvent = React27__namespace.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React22__namespace.useCallback((eventId) => {
+  const deleteEvent = React27__namespace.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React22__namespace.useCallback(() => {
+  const goToToday = React27__namespace.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React22__namespace.useCallback(() => {
+  const goToPrevious = React27__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -9295,7 +10688,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React22__namespace.useCallback(() => {
+  const goToNext = React27__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -9313,7 +10706,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React22__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       // State
       selectedDate,
@@ -9360,7 +10753,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React22__namespace.useContext(CalendarContext);
+  const context = React27__namespace.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -9368,14 +10761,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React22__namespace.useMemo(() => {
+  return React27__namespace.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React22__namespace.useMemo(() => {
+  return React27__namespace.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -9933,8 +11326,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React22__namespace.useState(/* @__PURE__ */ new Date());
-  React22__namespace.useEffect(() => {
+  const [now, setNow] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -9971,24 +11364,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React22__namespace.createContext(null);
+var DragContext = React27__namespace.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React22__namespace.useState(null);
-  const [isDragging, setIsDragging] = React22__namespace.useState(false);
+  const [draggedEvent, setDraggedEventState] = React27__namespace.useState(null);
+  const [isDragging, setIsDragging] = React27__namespace.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React22__namespace.useCallback((event) => {
+  const setDraggedEvent = React27__namespace.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React22__namespace.useCallback((newStartDate) => {
+  const handleDrop = React27__namespace.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -10001,7 +11394,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React22__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -10012,7 +11405,7 @@ function DragProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React22__namespace.useContext(DragContext);
+  const context = React27__namespace.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -10057,7 +11450,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React22__namespace.useState(false);
+  const [isOver, setIsOver] = React27__namespace.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -10095,23 +11488,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React22__namespace.useState(false);
-  const dropTargetDate = React22__namespace.useMemo(() => {
+  const [isOver, setIsOver] = React27__namespace.useState(false);
+  const dropTargetDate = React27__namespace.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React22__namespace.useCallback((e) => {
+  const handleDragOver = React27__namespace.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React22__namespace.useCallback(() => {
+  const handleDragLeave = React27__namespace.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React22__namespace.useCallback((e) => {
+  const handleDrop = React27__namespace.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -10138,13 +11531,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 = React22__namespace.useCallback((e) => {
+  const handleDragStart = React27__namespace.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React22__namespace.useCallback(() => {
+  const handleDragEnd = React27__namespace.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -10185,15 +11578,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React22__namespace.useMemo(
+  const cells = React27__namespace.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React22__namespace.useMemo(
+  const eventPositions = React27__namespace.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -10375,7 +11768,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -10581,8 +11974,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React22__namespace.useState(/* @__PURE__ */ new Date());
-  React22__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -10665,7 +12058,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -10673,7 +12066,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React22__namespace.useMemo(() => {
+  const currentEvents = React27__namespace.useMemo(() => {
     if (!dateFns.isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -10897,8 +12290,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React22__namespace.useState(/* @__PURE__ */ new Date());
-  React22__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -10932,7 +12325,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React22__namespace.useMemo(() => {
+  const months = React27__namespace.useMemo(() => {
     const yearStart = dateFns.startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => dateFns.addMonths(yearStart, i));
   }, [selectedDate]);
@@ -11055,11 +12448,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React22__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React22__namespace.useMemo(() => {
+  const eventsByDay = React27__namespace.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = dateFns.parseISO(event.startDate);
@@ -11524,16 +12917,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React22__namespace.useState("");
-  const [description, setDescription] = React22__namespace.useState("");
-  const [startDate, setStartDate] = React22__namespace.useState("");
-  const [startTime, setStartTime] = React22__namespace.useState("");
-  const [endDate, setEndDate] = React22__namespace.useState("");
-  const [endTime, setEndTime] = React22__namespace.useState("");
-  const [color, setColor] = React22__namespace.useState("blue");
-  const [userId, setUserId] = React22__namespace.useState("");
-  const [isSubmitting, setIsSubmitting] = React22__namespace.useState(false);
-  React22__namespace.useEffect(() => {
+  const [title, setTitle] = React27__namespace.useState("");
+  const [description, setDescription] = React27__namespace.useState("");
+  const [startDate, setStartDate] = React27__namespace.useState("");
+  const [startTime, setStartTime] = React27__namespace.useState("");
+  const [endDate, setEndDate] = React27__namespace.useState("");
+  const [endTime, setEndTime] = React27__namespace.useState("");
+  const [color, setColor] = React27__namespace.useState("blue");
+  const [userId, setUserId] = React27__namespace.useState("");
+  const [isSubmitting, setIsSubmitting] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = dateFns.parseISO(event.startDate);
@@ -11756,7 +13149,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React22__namespace.useState("");
+  const [title, setTitle] = React27__namespace.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -11823,8 +13216,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React22__namespace.useState(visibleHours.from);
-  const [to, setTo] = React22__namespace.useState(visibleHours.to);
+  const [from, setFrom] = React27__namespace.useState(visibleHours.from);
+  const [to, setTo] = React27__namespace.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -11870,7 +13263,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React22__namespace.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React27__namespace.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -12019,8 +13412,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React22__namespace.useState(false);
-  React22__namespace.useEffect(() => {
+  const [matches, setMatches] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -12072,11 +13465,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React22__namespace.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React22__namespace.useState(false);
-  const [selectedEvent, setSelectedEvent] = React22__namespace.useState(null);
-  const [dialogMode, setDialogMode] = React22__namespace.useState("add");
-  const [defaultDate, setDefaultDate] = React22__namespace.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React27__namespace.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React27__namespace.useState(false);
+  const [selectedEvent, setSelectedEvent] = React27__namespace.useState(null);
+  const [dialogMode, setDialogMode] = React27__namespace.useState("add");
+  const [defaultDate, setDefaultDate] = React27__namespace.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -12394,6 +13787,9 @@ exports.DataTablePagination = DataTablePagination;
 exports.DataTableViewOptions = DataTableViewOptions;
 exports.DateBadge = DateBadge;
 exports.DayView = DayView;
+exports.DeliveryBadge = DeliveryBadge;
+exports.DeliveryCard = DeliveryCard;
+exports.DeliveryDetailPage = DeliveryDetailPage;
 exports.DeliveryIndicator = DeliveryIndicator;
 exports.DeliveryIndicators = DeliveryIndicators;
 exports.Dialog = Dialog;
@@ -12485,6 +13881,12 @@ exports.ItemTitle = ItemTitle;
 exports.Kbd = Kbd;
 exports.KbdGroup = KbdGroup;
 exports.Label = Label2;
+exports.Map = Map2;
+exports.MapMarker = MapMarker;
+exports.MapPopup = MapPopup;
+exports.MapTileLayer = MapTileLayer;
+exports.MapTooltip = MapTooltip;
+exports.MapZoomControl = MapZoomControl;
 exports.Menubar = Menubar;
 exports.MenubarCheckboxItem = MenubarCheckboxItem;
 exports.MenubarContent = MenubarContent;
@@ -12610,6 +14012,7 @@ exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.SubmitCalibrationBar = SubmitCalibrationBar;
 exports.SupplierCell = SupplierCell;
+exports.SupplierWeeklyLoading = SupplierWeeklyLoading;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -12644,6 +14047,7 @@ exports.WeekCell = WeekCell;
 exports.WeekDetailDialog = WeekDetailDialog;
 exports.WeekHeader = WeekHeader;
 exports.WeekView = WeekView;
+exports.WeeklyLoadingView = WeeklyLoadingView;
 exports.YearView = YearView;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
@@ -12655,12 +14059,14 @@ exports.canSubmitCalibration = canSubmitCalibration;
 exports.cardVariants = cardVariants;
 exports.createDefaultEvent = createDefaultEvent;
 exports.deliveryIndicatorVariants = deliveryIndicatorVariants;
+exports.extractPrefixes = extractPrefixes;
 exports.formatCalibrationUnit = formatCalibrationUnit;
 exports.formatDateRange = formatDateRange2;
 exports.formatProductionUnit = formatProductionUnit;
 exports.formatTime = formatTime;
 exports.generateColumns = generateColumns;
 exports.generateEventId = generateEventId;
+exports.generateLoadingWeek = generateLoadingWeek;
 exports.generateLocationOptions = generateLocationOptions;
 exports.generateWeekColumns = generateWeekColumns;
 exports.generateWeeks = generateWeeks;
@@ -12668,6 +14074,8 @@ exports.getCalendarCells = getCalendarCells;
 exports.getCommentLocationLabel = getCommentLocationLabel;
 exports.getCurrentEvents = getCurrentEvents;
 exports.getDayHours = getDayHours;
+exports.getDayLabel = getDayLabel;
+exports.getDeliveryVisualState = getDeliveryVisualState;
 exports.getElementShipmentStatus = getElementShipmentStatus;
 exports.getEventBlockStyle = getEventBlockStyle;
 exports.getEventDuration = getEventDuration;
@@ -12677,9 +14085,14 @@ exports.getEventsForDate = getEventsForDate;
 exports.getEventsInRange = getEventsInRange;
 exports.getHeaderLabel = getHeaderLabel;
 exports.getISOWeek = getISOWeek;
+exports.getLoadingDeliveryStatusLabel = getLoadingDeliveryStatusLabel;
+exports.getLoadingElementStatusLabel = getLoadingElementStatusLabel;
+exports.getLoadingISOWeek = getLoadingISOWeek;
+exports.getLoadingWeekKey = getLoadingWeekKey;
 exports.getMonthCellEvents = getMonthCellEvents;
 exports.getMonthDays = getMonthDays;
 exports.getShipmentStatusLabel = getShipmentStatusLabel;
+exports.getShortDayLabel = getShortDayLabel;
 exports.getSupplierColumn = getSupplierColumn;
 exports.getTimeHeight = getTimeHeight;
 exports.getTimePosition = getTimePosition;
@@ -12689,6 +14102,8 @@ exports.getWeekDayNames = getWeekDayNames;
 exports.getWeekDays = getWeekDays;
 exports.getWeekKey = getWeekKey;
 exports.getYearMonths = getYearMonths;
+exports.groupDeliveriesByDay = groupDeliveriesByDay;
+exports.groupDeliveriesByPrefixAndDay = groupDeliveriesByPrefixAndDay;
 exports.groupEvents = groupEvents;
 exports.isMultiDayEvent = isMultiDayEvent;
 exports.isWorkingHour = isWorkingHour;