@lodashventure/medusa-banner 0.0.6

package/.medusa/server/src/admin/index.mjs

@@ -0,0 +1,1297 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { Trash, StackPerspective } from "@medusajs/icons";
+import { KeyboardCode, closestCorners, getFirstCollision, getScrollableAncestors, useDndContext, useDroppable, useDraggable, getClientRect, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import React, { useLayoutEffect, useEffect, useMemo, useRef, useContext, useState, useCallback } from "react";
+import { clx, Button, usePrompt, Drawer } from "@medusajs/ui";
+import { Check, Upload, ImageIcon, Trash2, MoveHorizontal, X } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { useDropzone } from "react-dropzone";
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return useMemo(
+    () => (node) => {
+      refs.forEach((ref) => ref(node));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
+  );
+}
+const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
+  elementString === "[object global]";
+}
+function isNode(node) {
+  return "nodeType" in node;
+}
+function getWindow(target) {
+  var _target$ownerDocument, _target$ownerDocument2;
+  if (!target) {
+    return window;
+  }
+  if (isWindow(target)) {
+    return target;
+  }
+  if (!isNode(target)) {
+    return window;
+  }
+  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+let ids = {};
+function useUniqueId(prefix, value) {
+  return useMemo(() => {
+    if (value) {
+      return value;
+    }
+    const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+    ids[prefix] = id;
+    return prefix + "-" + id;
+  }, [prefix, value]);
+}
+function createAdjustmentFn(modifier) {
+  return function(object) {
+    for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      adjustments[_key - 1] = arguments[_key];
+    }
+    return adjustments.reduce((accumulator, adjustment) => {
+      const entries = Object.entries(adjustment);
+      for (const [key, valueAdjustment] of entries) {
+        const value = accumulator[key];
+        if (value != null) {
+          accumulator[key] = value + modifier * valueAdjustment;
+        }
+      }
+      return accumulator;
+    }, {
+      ...object
+    });
+  };
+}
+const subtract = /* @__PURE__ */ createAdjustmentFn(-1);
+function isKeyboardEvent(event) {
+  if (!event) {
+    return false;
+  }
+  const {
+    KeyboardEvent
+  } = getWindow(event.target);
+  return KeyboardEvent && event instanceof KeyboardEvent;
+}
+const CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+function arrayMove(array, from, to) {
+  const newArray = array.slice();
+  newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+  return newArray;
+}
+function getSortedRects(items, rects) {
+  return items.reduce((accumulator, id, index) => {
+    const rect = rects.get(id);
+    if (rect) {
+      accumulator[index] = rect;
+    }
+    return accumulator;
+  }, Array(items.length));
+}
+function isValidIndex(index) {
+  return index !== null && index >= 0;
+}
+function itemsEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+function normalizeDisabled(disabled) {
+  if (typeof disabled === "boolean") {
+    return {
+      draggable: disabled,
+      droppable: disabled
+    };
+  }
+  return disabled;
+}
+const rectSortingStrategy = (_ref) => {
+  let {
+    rects,
+    activeIndex,
+    overIndex,
+    index
+  } = _ref;
+  const newRects = arrayMove(rects, overIndex, activeIndex);
+  const oldRect = rects[index];
+  const newRect = newRects[index];
+  if (!newRect || !oldRect) {
+    return null;
+  }
+  return {
+    x: newRect.left - oldRect.left,
+    y: newRect.top - oldRect.top,
+    scaleX: newRect.width / oldRect.width,
+    scaleY: newRect.height / oldRect.height
+  };
+};
+const ID_PREFIX = "Sortable";
+const Context = /* @__PURE__ */ React.createContext({
+  activeIndex: -1,
+  containerId: ID_PREFIX,
+  disableTransforms: false,
+  items: [],
+  overIndex: -1,
+  useDragOverlay: false,
+  sortedRects: [],
+  strategy: rectSortingStrategy,
+  disabled: {
+    draggable: false,
+    droppable: false
+  }
+});
+function SortableContext(_ref) {
+  let {
+    children,
+    id,
+    items: userDefinedItems,
+    strategy = rectSortingStrategy,
+    disabled: disabledProp = false
+  } = _ref;
+  const {
+    active,
+    dragOverlay,
+    droppableRects,
+    over,
+    measureDroppableContainers
+  } = useDndContext();
+  const containerId = useUniqueId(ID_PREFIX, id);
+  const useDragOverlay = Boolean(dragOverlay.rect !== null);
+  const items = useMemo(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
+  const isDragging = active != null;
+  const activeIndex = active ? items.indexOf(active.id) : -1;
+  const overIndex = over ? items.indexOf(over.id) : -1;
+  const previousItemsRef = useRef(items);
+  const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
+  const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
+  const disabled = normalizeDisabled(disabledProp);
+  useIsomorphicLayoutEffect(() => {
+    if (itemsHaveChanged && isDragging) {
+      measureDroppableContainers(items);
+    }
+  }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
+  useEffect(() => {
+    previousItemsRef.current = items;
+  }, [items]);
+  const contextValue = useMemo(
+    () => ({
+      activeIndex,
+      containerId,
+      disabled,
+      disableTransforms,
+      items,
+      overIndex,
+      useDragOverlay,
+      sortedRects: getSortedRects(items, droppableRects),
+      strategy
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
+  );
+  return React.createElement(Context.Provider, {
+    value: contextValue
+  }, children);
+}
+const defaultNewIndexGetter = (_ref) => {
+  let {
+    id,
+    items,
+    activeIndex,
+    overIndex
+  } = _ref;
+  return arrayMove(items, activeIndex, overIndex).indexOf(id);
+};
+const defaultAnimateLayoutChanges = (_ref2) => {
+  let {
+    containerId,
+    isSorting,
+    wasDragging,
+    index,
+    items,
+    newIndex,
+    previousItems,
+    previousContainerId,
+    transition
+  } = _ref2;
+  if (!transition || !wasDragging) {
+    return false;
+  }
+  if (previousItems !== items && index === newIndex) {
+    return false;
+  }
+  if (isSorting) {
+    return true;
+  }
+  return newIndex !== index && containerId === previousContainerId;
+};
+const defaultTransition = {
+  duration: 200,
+  easing: "ease"
+};
+const transitionProperty = "transform";
+const disabledTransition = /* @__PURE__ */ CSS.Transition.toString({
+  property: transitionProperty,
+  duration: 0,
+  easing: "linear"
+});
+const defaultAttributes = {
+  roleDescription: "sortable"
+};
+function useDerivedTransform(_ref) {
+  let {
+    disabled,
+    index,
+    node,
+    rect
+  } = _ref;
+  const [derivedTransform, setDerivedtransform] = useState(null);
+  const previousIndex = useRef(index);
+  useIsomorphicLayoutEffect(() => {
+    if (!disabled && index !== previousIndex.current && node.current) {
+      const initial = rect.current;
+      if (initial) {
+        const current = getClientRect(node.current, {
+          ignoreTransform: true
+        });
+        const delta = {
+          x: initial.left - current.left,
+          y: initial.top - current.top,
+          scaleX: initial.width / current.width,
+          scaleY: initial.height / current.height
+        };
+        if (delta.x || delta.y) {
+          setDerivedtransform(delta);
+        }
+      }
+    }
+    if (index !== previousIndex.current) {
+      previousIndex.current = index;
+    }
+  }, [disabled, index, node, rect]);
+  useEffect(() => {
+    if (derivedTransform) {
+      setDerivedtransform(null);
+    }
+  }, [derivedTransform]);
+  return derivedTransform;
+}
+function useSortable(_ref) {
+  let {
+    animateLayoutChanges = defaultAnimateLayoutChanges,
+    attributes: userDefinedAttributes,
+    disabled: localDisabled,
+    data: customData,
+    getNewIndex = defaultNewIndexGetter,
+    id,
+    strategy: localStrategy,
+    resizeObserverConfig,
+    transition = defaultTransition
+  } = _ref;
+  const {
+    items,
+    containerId,
+    activeIndex,
+    disabled: globalDisabled,
+    disableTransforms,
+    sortedRects,
+    overIndex,
+    useDragOverlay,
+    strategy: globalStrategy
+  } = useContext(Context);
+  const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
+  const index = items.indexOf(id);
+  const data = useMemo(() => ({
+    sortable: {
+      containerId,
+      index,
+      items
+    },
+    ...customData
+  }), [containerId, customData, index, items]);
+  const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
+  const {
+    rect,
+    node,
+    isOver,
+    setNodeRef: setDroppableNodeRef
+  } = useDroppable({
+    id,
+    data,
+    disabled: disabled.droppable,
+    resizeObserverConfig: {
+      updateMeasurementsFor: itemsAfterCurrentSortable,
+      ...resizeObserverConfig
+    }
+  });
+  const {
+    active,
+    activatorEvent,
+    activeNodeRect,
+    attributes,
+    setNodeRef: setDraggableNodeRef,
+    listeners,
+    isDragging,
+    over,
+    setActivatorNodeRef,
+    transform
+  } = useDraggable({
+    id,
+    data,
+    attributes: {
+      ...defaultAttributes,
+      ...userDefinedAttributes
+    },
+    disabled: disabled.draggable
+  });
+  const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
+  const isSorting = Boolean(active);
+  const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
+  const shouldDisplaceDragSource = !useDragOverlay && isDragging;
+  const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
+  const strategy = localStrategy != null ? localStrategy : globalStrategy;
+  const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
+    rects: sortedRects,
+    activeNodeRect,
+    activeIndex,
+    overIndex,
+    index
+  }) : null;
+  const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
+    id,
+    items,
+    activeIndex,
+    overIndex
+  }) : index;
+  const activeId = active == null ? void 0 : active.id;
+  const previous = useRef({
+    activeId,
+    items,
+    newIndex,
+    containerId
+  });
+  const itemsHaveChanged = items !== previous.current.items;
+  const shouldAnimateLayoutChanges = animateLayoutChanges({
+    active,
+    containerId,
+    isDragging,
+    isSorting,
+    id,
+    index,
+    items,
+    newIndex: previous.current.newIndex,
+    previousItems: previous.current.items,
+    previousContainerId: previous.current.containerId,
+    transition,
+    wasDragging: previous.current.activeId != null
+  });
+  const derivedTransform = useDerivedTransform({
+    disabled: !shouldAnimateLayoutChanges,
+    index,
+    node,
+    rect
+  });
+  useEffect(() => {
+    if (isSorting && previous.current.newIndex !== newIndex) {
+      previous.current.newIndex = newIndex;
+    }
+    if (containerId !== previous.current.containerId) {
+      previous.current.containerId = containerId;
+    }
+    if (items !== previous.current.items) {
+      previous.current.items = items;
+    }
+  }, [isSorting, newIndex, containerId, items]);
+  useEffect(() => {
+    if (activeId === previous.current.activeId) {
+      return;
+    }
+    if (activeId && !previous.current.activeId) {
+      previous.current.activeId = activeId;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      previous.current.activeId = activeId;
+    }, 50);
+    return () => clearTimeout(timeoutId);
+  }, [activeId]);
+  return {
+    active,
+    activeIndex,
+    attributes,
+    data,
+    rect,
+    index,
+    newIndex,
+    items,
+    isOver,
+    isSorting,
+    isDragging,
+    listeners,
+    node,
+    overIndex,
+    over,
+    setNodeRef,
+    setActivatorNodeRef,
+    setDroppableNodeRef,
+    setDraggableNodeRef,
+    transform: derivedTransform != null ? derivedTransform : finalTransform,
+    transition: getTransition()
+  };
+  function getTransition() {
+    if (
+      // Temporarily disable transitions for a single frame to set up derived transforms
+      derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
+      itemsHaveChanged && previous.current.newIndex === index
+    ) {
+      return disabledTransition;
+    }
+    if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
+      return void 0;
+    }
+    if (isSorting || shouldAnimateLayoutChanges) {
+      return CSS.Transition.toString({
+        ...transition,
+        property: transitionProperty
+      });
+    }
+    return void 0;
+  }
+}
+function normalizeLocalDisabled(localDisabled, globalDisabled) {
+  var _localDisabled$dragga, _localDisabled$droppa;
+  if (typeof localDisabled === "boolean") {
+    return {
+      draggable: localDisabled,
+      // Backwards compatibility
+      droppable: false
+    };
+  }
+  return {
+    draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
+    droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
+  };
+}
+function hasSortableData(entry) {
+  if (!entry) {
+    return false;
+  }
+  const data = entry.data.current;
+  if (data && "sortable" in data && typeof data.sortable === "object" && "containerId" in data.sortable && "items" in data.sortable && "index" in data.sortable) {
+    return true;
+  }
+  return false;
+}
+const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+const sortableKeyboardCoordinates = (event, _ref) => {
+  let {
+    context: {
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers,
+      over,
+      scrollableAncestors
+    }
+  } = _ref;
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+    if (!active || !collisionRect) {
+      return;
+    }
+    const filteredContainers = [];
+    droppableContainers.getEnabled().forEach((entry) => {
+      if (!entry || entry != null && entry.disabled) {
+        return;
+      }
+      const rect = droppableRects.get(entry.id);
+      if (!rect) {
+        return;
+      }
+      switch (event.code) {
+        case KeyboardCode.Down:
+          if (collisionRect.top < rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Up:
+          if (collisionRect.top > rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Left:
+          if (collisionRect.left > rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Right:
+          if (collisionRect.left < rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    });
+    const collisions = closestCorners({
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null
+    });
+    let closestId = getFirstCollision(collisions, "id");
+    if (closestId === (over == null ? void 0 : over.id) && collisions.length > 1) {
+      closestId = collisions[1].id;
+    }
+    if (closestId != null) {
+      const activeDroppable = droppableContainers.get(active.id);
+      const newDroppable = droppableContainers.get(closestId);
+      const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
+      const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
+      if (newNode && newRect && activeDroppable && newDroppable) {
+        const newScrollAncestors = getScrollableAncestors(newNode);
+        const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
+        const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
+        const isAfterActive = isAfter(activeDroppable, newDroppable);
+        const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
+          x: 0,
+          y: 0
+        } : {
+          x: isAfterActive ? collisionRect.width - newRect.width : 0,
+          y: isAfterActive ? collisionRect.height - newRect.height : 0
+        };
+        const rectCoordinates = {
+          x: newRect.left,
+          y: newRect.top
+        };
+        const newCoordinates = offset.x && offset.y ? rectCoordinates : subtract(rectCoordinates, offset);
+        return newCoordinates;
+      }
+    }
+  }
+  return void 0;
+};
+function isSameContainer(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+  return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
+}
+function isAfter(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+  if (!isSameContainer(a, b)) {
+    return false;
+  }
+  return a.data.current.sortable.index < b.data.current.sortable.index;
+}
+const useBanners = () => {
+  const getUploadedFiles = async () => {
+    try {
+      const response = await fetch("/admin/banners", {
+        method: "GET",
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      const data = await response.json();
+      return data ?? {
+        banners: [],
+        count: 0
+      };
+    } catch (error) {
+      console.error("Error fetching banners:", error);
+      throw error;
+    }
+  };
+  return useQuery({
+    queryKey: ["banners"],
+    queryFn: getUploadedFiles,
+    // No need for the arrow function wrapper
+    retry: false
+  });
+};
+const DraggableItem = ({ banner }) => {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-lg shadow-md border border-gray-200 opacity-80 scale-105", children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: banner.url,
+        alt: `Banner ${banner.id}`,
+        className: "object-cover w-full h-48 rounded-t-lg"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "p-2 text-sm truncate", children: banner.id })
+  ] }) });
+};
+const GridItem = ({
+  banner,
+  isSelected,
+  onClick,
+  onSelect
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        relative overflow-hidden rounded-lg shadow-md cursor-pointer hover:shadow-lg 
+        transition-all duration-200 ease-in-out
+        ${isSelected ? "ring-2 ring-offset-2 ring-blue-500" : ""}
+      `,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: banner.url || "/placeholder.svg?height=200&width=300",
+              alt: `Banner ${banner.id}`,
+              className: "object-cover w-full h-48"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "truncate p-2 text-sm", children: banner.id })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+          absolute top-2 left-2 w-6 h-6 rounded-md flex items-center justify-center
+          ${isSelected ? "bg-blue-500 text-white" : "bg-white/80 border border-gray-300"}
+          ${isSelected ? "visible" : "invisible group-hover:visible"}
+          transition-opacity duration-200
+        `,
+            onClick: onSelect,
+            children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+const SortableItem = ({ banner }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: banner.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "rounded-lg shadow-md border border-gray-200 hover:border-gray-300 transition-all relative",
+      ...attributes,
+      children: /* @__PURE__ */ jsxs("div", { ...listeners, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: banner.url,
+            alt: `Banner ${banner.id}`,
+            className: "object-cover w-full h-48 rounded-t-lg"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "p-2 text-sm truncate", children: banner.id })
+      ] })
+    }
+  );
+};
+const UploadBannerDrawerContent = ({
+  maxFileSizeMb = 10,
+  onSuccess
+}) => {
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const onDrop = useCallback((acceptedFiles) => {
+    const newFiles = acceptedFiles.map((file) => {
+      const id = crypto.randomUUID();
+      let preview;
+      if (file.type.startsWith("image/")) {
+        preview = URL.createObjectURL(file);
+      }
+      return {
+        file,
+        id,
+        preview
+      };
+    });
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, []);
+  const removeFile = (id) => {
+    setFiles((files2) => {
+      const fileToRemove = files2.find((f) => f.id === id);
+      if (fileToRemove == null ? void 0 : fileToRemove.preview) {
+        URL.revokeObjectURL(fileToRemove.preview);
+      }
+      return files2.filter((f) => f.id !== id);
+    });
+  };
+  const handleResetFiles = () => {
+    setFiles([]);
+  };
+  const handleUploadFiles = async () => {
+    setIsLoading(true);
+    try {
+      const formData = new FormData();
+      files.forEach((file) => {
+        if (!file.file) {
+          return;
+        }
+        formData.append("files", file.file);
+      });
+      const { uploadedFiles } = await fetch("/admin/banners", {
+        method: "POST",
+        credentials: "include",
+        body: formData
+      }).then((res) => res.json());
+      onSuccess(uploadedFiles);
+      return {
+        files,
+        uploadedFiles
+      };
+    } catch (error) {
+      console.error(error);
+      alert("Error uploading files");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    isFocused
+  } = useDropzone({
+    onDrop,
+    accept: {
+      "image/*": []
+    },
+    maxSize: maxFileSizeMb * 1024 * 1024
+    // maxFileSizeMb
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: clx(
+          "border-2 border-dashed rounded-xl p-10 transition-all duration-150 ease-in-out cursor-pointer",
+          "flex flex-col items-center justify-center gap-4",
+          isDragActive ? "bg-primary/5 border-primary/50" : "bg-background hover:bg-muted/50",
+          isDragAccept ? "border-green-500 bg-green-50 dark:bg-green-950/20" : "",
+          isDragReject ? "border-red-500 bg-red-50 dark:bg-red-950/20" : "",
+          isFocused ? "ring-2 ring-ring ring-offset-2" : "",
+          "focus-visible:outline-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("input", { ...getInputProps(), disabled: isLoading }),
+          /* @__PURE__ */ jsx("div", { className: "rounded-full bg-primary/10 p-4", children: /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-primary" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-medium text-lg", children: isDragActive ? isDragAccept ? "Drop files to upload" : "This file type is not supported" : "Drag & drop images here" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              "or ",
+              /* @__PURE__ */ jsx("span", { className: "text-primary font-medium", children: "browse images" }),
+              " ",
+              "from your computer"
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              "(max ",
+              maxFileSizeMb,
+              "MB)"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "inline flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-lg font-medium", children: [
+            "Selected Files (",
+            files.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              isLoading,
+              variant: "primary",
+              onClick: handleUploadFiles,
+              children: "Confirm Upload"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            isLoading,
+            variant: "secondary",
+            onClick: handleResetFiles,
+            children: "Clear All"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 grid-cols-2 sm:grid-cols-3", children: files.map((fileItem) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden",
+          children: [
+            fileItem.preview ? /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: fileItem.preview || "/placeholder.svg",
+                alt: fileItem.file.name,
+                className: "h-full w-full object-contain transition-all hover:scale-105"
+              }
+            ) }) : /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full flex items-center justify-center bg-muted/50", children: [
+              /* @__PURE__ */ jsx(ImageIcon, { className: "h-6 w-6 text-primary" }),
+              ";"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1 overflow-hidden", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: fileItem.file.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  (fileItem.file.size / 1024).toFixed(1),
+                  " KB"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  isLoading,
+                  variant: "secondary",
+                  className: "size-7 rounded-full p-0.5 text-red-400 shrink-0",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeFile(fileItem.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Trash, {}),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove file" })
+                  ]
+                }
+              )
+            ] }) })
+          ]
+        },
+        fileItem.id
+      )) })
+    ] })
+  ] });
+};
+const BannerPage = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const [reorderMode, setReorderMode] = useState(false);
+  const [orderedBanners, setOrderedBanners] = useState([]);
+  const [activeBanner, setActiveBanner] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const dialog = usePrompt();
+  const { data: bannerData, refetch } = useBanners();
+  const { count = 0, banners = [] } = bannerData || {};
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+        // 8px movement required before drag starts
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const toggleImageSelection = (e, id) => {
+    e.stopPropagation();
+    const newSelectedIds = new Set(selectedIds);
+    if (newSelectedIds.has(id)) {
+      newSelectedIds.delete(id);
+    } else {
+      newSelectedIds.add(id);
+    }
+    setSelectedIds(newSelectedIds);
+  };
+  const selectAll = () => {
+    const allIds = banners.map((banner) => banner.id);
+    setSelectedIds(new Set(allIds));
+  };
+  const deselectAll = () => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  };
+  const openLightbox = (banner) => {
+    setSelectedImage(banner);
+  };
+  const closeLightbox = () => {
+    setSelectedImage(null);
+  };
+  const toggleReorderMode = async () => {
+    if (reorderMode) {
+      const confirmed = await dialog({
+        title: "Save Changes?",
+        description: "Do you want to save your reordering changes?",
+        variant: "confirmation",
+        confirmText: "Save",
+        cancelText: "Discard"
+      });
+      if (confirmed) {
+        saveNewOrder();
+      } else {
+        setOrderedBanners([]);
+        setReorderMode(false);
+      }
+    } else {
+      setOrderedBanners([...banners]);
+      setReorderMode(true);
+    }
+  };
+  const handleDragStart = (event) => {
+    const { active } = event;
+    const activeBanner2 = orderedBanners.find(
+      (banner) => banner.id === active.id
+    );
+    if (activeBanner2) {
+      setActiveBanner(activeBanner2);
+    }
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setOrderedBanners((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+    setActiveBanner(null);
+  };
+  const saveNewOrder = async () => {
+    try {
+      await fetch("/admin/banners/reorder", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({
+          ids: orderedBanners.map((banner) => banner.id)
+        })
+      });
+      setReorderMode(false);
+      refetch();
+    } catch (error) {
+      console.error("Failed to save new order:", error);
+    }
+  };
+  const handleDeleteMultiple = async () => {
+    const isConfirmed = await dialog({
+      title: "Confirm Deletion",
+      description: `Are you sure you want to delete ${selectedIds.size} selected images? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel"
+    });
+    if (!isConfirmed) return;
+    const ids2 = Array.from(selectedIds);
+    setIsLoading(true);
+    try {
+      await fetch("/admin/banners", {
+        method: "DELETE",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({ ids: ids2 })
+      });
+      setSelectedIds(/* @__PURE__ */ new Set());
+      refetch();
+    } catch {
+      console.error("Failed to delete banners");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold", children: [
+        "Banners (",
+        count,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Drawer,
+        {
+          open,
+          onOpenChange: (openChanged) => setOpen(openChanged),
+          children: [
+            /* @__PURE__ */ jsx(
+              Drawer.Trigger,
+              {
+                onClick: () => {
+                  setOpen(true);
+                },
+                asChild: true,
+                children: /* @__PURE__ */ jsx(Button, { isLoading, children: "Upload new banner" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+              /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { children: "Upload new banner" }) }),
+              /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsx(
+                UploadBannerDrawerContent,
+                {
+                  maxFileSizeMb: 10,
+                  onSuccess: () => {
+                    setOpen(false);
+                    refetch();
+                  }
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+        selectedIds.size > 0 && !reorderMode && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              isLoading,
+              onClick: selectAll,
+              disabled: count === 0,
+              children: "Select All"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              isLoading,
+              onClick: deselectAll,
+              disabled: selectedIds.size === 0,
+              children: "Deselect All"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              isLoading,
+              variant: "danger",
+              onClick: () => handleDeleteMultiple(),
+              disabled: selectedIds.size === 0,
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+                "Delete (",
+                selectedIds.size,
+                ")"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ml-auto", children: [
+          banners.length > 0 && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              isLoading,
+              onClick: toggleReorderMode,
+              variant: reorderMode ? "secondary" : "primary",
+              children: [
+                /* @__PURE__ */ jsx(MoveHorizontal, { className: "h-4 w-4 mr-2" }),
+                reorderMode ? "Exit Reorder" : "Reorder"
+              ]
+            }
+          ),
+          reorderMode && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              isLoading,
+              onClick: saveNewOrder,
+              variant: "primary",
+              className: "ml-2",
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-2" }),
+                "Save Order"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      reorderMode ? /* @__PURE__ */ jsxs(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          children: [
+            /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: orderedBanners.map((banner) => banner.id),
+                strategy: rectSortingStrategy,
+                children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 isolate", children: orderedBanners.map((banner) => /* @__PURE__ */ jsx(SortableItem, { banner }, banner.id)) })
+              }
+            ),
+            /* @__PURE__ */ jsx(DragOverlay, { children: activeBanner ? /* @__PURE__ */ jsx(DraggableItem, { banner: activeBanner }) : null })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 group", children: banners.map((banner) => /* @__PURE__ */ jsx(
+        GridItem,
+        {
+          banner,
+          isSelected: selectedIds.has(banner.id),
+          onClick: () => openLightbox(banner),
+          onSelect: (e) => toggleImageSelection(e, banner.id)
+        },
+        banner.id
+      )) }),
+      selectedImage && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4",
+          onClick: closeLightbox,
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                isLoading,
+                className: "absolute top-4 right-4 text-white bg-black/50 p-2 rounded-full hover:bg-black/70",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  closeLightbox();
+                },
+                children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "relative max-w-screen-xl max-h-screen overflow-auto",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: selectedImage.url || "/placeholder.svg",
+                    alt: `Banner ${selectedImage.id}`,
+                    className: "max-h-[90vh] max-w-full object-contain mx-auto"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
+};
+const BannerUpload = () => {
+  return /* @__PURE__ */ jsx(BannerPage, {});
+};
+const config = defineRouteConfig({
+  label: "Banner",
+  icon: StackPerspective
+});
+const widgetModule = { widgets: [] };
+const routeModule = {
+  routes: [
+    {
+      Component: BannerUpload,
+      path: "/banners"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/banners",
+      nested: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule
+};
+export {
+  plugin as default
+};