hey-pharmacist-ecommerce 1.1.12 → 1.1.13

package/dist/index.js

@@ -10216,29 +10216,43 @@ function ProfileScreen() {
   )))));
 }
 function OrderCard({ order }) {
-  const { buildPath } = useBasePath();
   const config = order.orderStatus;
+  const itemCount = order.items?.length || 0;
+  const showPriceBreakdown = order.shippingCost && order.shippingCost > 0 || order.tax && order.tax > 0 || order.discountedAmount && order.discountedAmount > 0;
   return /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
-      whileHover: { y: -4 },
-      className: "bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100"
+      className: "rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-shadow"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between items-start mb-4" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-bold text-gray-900 flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "w-5 h-5 text-primary-600" }), "Order #", order?._id?.slice(0, 6) || ""), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1 flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Calendar, { className: "w-4 h-4" }), formatDate(order.createdAt || /* @__PURE__ */ new Date(), "long"))), /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: config }, config)),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2 mb-4" }, order.items?.slice(0, 2).map((item) => /* @__PURE__ */ React21__default.default.createElement("div", { key: item.productVariantId, className: "flex items-center gap-3 text-sm" }, /* @__PURE__ */ React21__default.default.createElement(Image3__default.default, { src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg", alt: item?.productVariantData?.name || "Product image", width: 48, height: 48, className: "w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-medium text-gray-900 truncate" }, item.productVariantData.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Qty: ", item.quantity)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-gray-900" }, formatPrice(item.productVariantData.finalPrice)))), order.items?.length && order.items?.length > 2 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 pl-15" }, "+", order.items.length - 2, " more item", order.items.length - 2 > 1 ? "s" : "")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between items-center pt-4 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500" }, "Total Amount"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-2xl font-bold text-gray-900" }, formatPrice(order.grandTotal || 0))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex gap-2" }, order.payment.paymentStatus !== "Paid" /* Paid */ && order.payment.paymentMethod === "Card" /* Card */ && /* @__PURE__ */ React21__default.default.createElement(
-      "a",
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between mb-4 pb-4 border-b border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-base font-bold text-slate-900" }, "Order #", order?._id?.slice(0, 8) || ""), /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: config }, config), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs text-gray-500" }, formatDate(order.createdAt || /* @__PURE__ */ new Date(), "short"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-slate-900" }, formatPrice(order.grandTotal || 0)), itemCount > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500" }, itemCount, " ", itemCount === 1 ? "item" : "items"))),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2 mb-4" }, order.items && order.items.length > 0 ? order.items.slice(0, 3).map((item) => {
+      const itemPrice = item.productVariantData?.finalPrice || 0;
+      const itemTotal = itemPrice * item.quantity;
+      return /* @__PURE__ */ React21__default.default.createElement("div", { key: item.productVariantId || item._id, className: "flex items-center gap-2 text-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden" }, /* @__PURE__ */ React21__default.default.createElement(
+        Image3__default.default,
+        {
+          src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg",
+          alt: item?.productVariantData?.name || "Product image",
+          fill: true,
+          className: "object-cover",
+          sizes: "48px"
+        }
+      )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-medium text-slate-900 truncate text-sm" }, item.productVariantData?.name || "Unknown Product"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500" }, "Qty: ", item.quantity)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-slate-900 text-sm" }, formatPrice(itemTotal)));
+    }) : /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 text-center py-2" }, "No items found"), order.items && order.items.length > 3 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500 text-center pt-1" }, "+", order.items.length - 3, " more ", order.items.length - 3 === 1 ? "item" : "items")),
+    showPriceBreakdown && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 pb-4 border-b border-gray-200 space-y-1 text-xs" }, order.shippingCost !== void 0 && order.shippingCost > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-gray-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(order.shippingCost))), order.tax !== void 0 && order.tax > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-gray-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Tax"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(order.tax))), order.discountedAmount !== void 0 && order.discountedAmount > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-green-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Discount"), /* @__PURE__ */ React21__default.default.createElement("span", null, "-", formatPrice(order.discountedAmount)))),
+    order.payment?.paymentStatus !== "Paid" /* Paid */ && order.payment?.paymentMethod === "Card" /* Card */ && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React21__default.default.createElement(
+      "button",
       {
-        href: order?.payment?.paymentIntent?.hostedInvoiceUrl || "",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        onClick: () => {
+          window.open(order?.payment?.hostedInvoiceUrl || "", "_blank");
+        },
+        className: "inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm font-medium transition-colors"
       },
       /* @__PURE__ */ React21__default.default.createElement(lucideReact.CreditCard, { className: "w-4 h-4" }),
       "Pay Now"
-    )))
+    ))
   );
 }
 function useOrders(page = 1, limit = 10, orderStatus, paymentStatus) {
@@ -10268,6 +10282,7 @@ function useOrders(page = 1, limit = 10, orderStatus, paymentStatus) {
         resolvedUserId
       );
       setOrders(response.data.data || []);
+      console.log(response.data);
       setPagination({
         page: response.data.page || page,
         limit: response.data.limit || limit,
@@ -10345,9 +10360,7 @@ function FilterChips({
   variant = "primary"
 }) {
   const [isOverflowOpen, setIsOverflowOpen] = React21.useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = React21.useState("");
   const overflowMenuRef = React21.useRef(null);
-  const color = variant === "primary" ? "primary" : "secondary";
   const { visibleFilters, overflowFilters } = React21.useMemo(() => {
     const basePrimary = filters.slice(0, maxVisible);
     if (basePrimary.includes(selected)) {
@@ -10368,17 +10381,6 @@ function FilterChips({
       overflowFilters: filters.filter((filter) => !uniquePrimary.includes(filter))
     };
   }, [filters, maxVisible, selected]);
-  const filteredOverflowFilters = React21.useMemo(() => {
-    if (!filterSearchTerm.trim()) return overflowFilters;
-    return overflowFilters.filter(
-      (filter) => filter.toLowerCase().includes(filterSearchTerm.toLowerCase())
-    );
-  }, [filterSearchTerm, overflowFilters]);
-  React21.useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm("");
-    }
-  }, [isOverflowOpen]);
   React21.useEffect(() => {
     function handleClickOutside(event) {
       if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target)) {
@@ -10392,69 +10394,63 @@ function FilterChips({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOverflowOpen]);
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:gap-4" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-4 w-4" }), label), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, visibleFilters.map((filter) => /* @__PURE__ */ React21__default.default.createElement(
+  const isPrimary = variant === "primary";
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-4 w-4 text-slate-500" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-700" }, label), selected !== "All" && /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      key: filter,
       type: "button",
-      onClick: () => onSelect(filter),
-      className: `rounded-full border px-3 py-1 text-sm font-medium transition ${selected === filter ? `border-${color}-600 bg-${color}-600 text-white shadow-lg shadow-${color}-500/30` : `border-slate-200 bg-slate-50 text-slate-600 hover:border-${color}-300 hover:text-${color}-600`}`
+      onClick: () => onSelect("All"),
+      className: "ml-auto text-xs text-primary-600 hover:text-primary-700 font-medium"
     },
-    filter
-  ))), overflowFilters.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative", ref: overflowMenuRef }, /* @__PURE__ */ React21__default.default.createElement(
+    "Clear"
+  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-2" }, visibleFilters.map((filter) => {
+    const isSelected = selected === filter;
+    return /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        key: filter,
+        type: "button",
+        onClick: () => onSelect(filter),
+        className: `inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${isSelected ? isPrimary ? "border-primary-500 bg-primary-500 text-white shadow-sm" : "border-secondary-500 bg-secondary-500 text-white shadow-sm" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`
+      },
+      filter,
+      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.X, { className: "h-3.5 w-3.5" })
+    );
+  }), overflowFilters.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative", ref: overflowMenuRef }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       type: "button",
       onClick: () => setIsOverflowOpen((prev) => !prev),
-      className: `flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium transition ${overflowFilters.includes(selected) ? `border-${color}-600 bg-${color}-50 text-${color}-700 shadow-lg shadow-${color}-500/20` : "border-slate-200 bg-white text-slate-600 hover:border-slate-300"}`
+      className: `inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${overflowFilters.includes(selected) ? isPrimary ? "border-primary-500 bg-primary-50 text-primary-700" : "border-secondary-500 bg-secondary-50 text-secondary-700" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`
     },
     /* @__PURE__ */ React21__default.default.createElement("span", null, overflowFilters.includes(selected) ? selected : "More"),
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: `inline-flex h-5 min-w-[1.5rem] items-center justify-center rounded-full bg-${color}-100 px-1 text-xs font-semibold text-${color}-600` }, overflowFilters.length)
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${isOverflowOpen ? "rotate-180" : ""}` })
   ), /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, isOverflowOpen && /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
-      initial: { opacity: 0, y: 8 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: 8 },
+      initial: { opacity: 0, y: 8, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 8, scale: 0.95 },
       transition: { duration: 0.15 },
-      className: "absolute right-0 z-50 mt-2 w-64 rounded-2xl border border-slate-100 bg-white shadow-xl shadow-primary-50"
+      className: "absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "border-b border-slate-100 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React21__default.default.createElement(
-      "input",
-      {
-        type: "text",
-        placeholder: `Search ${label.toLowerCase()}`,
-        value: filterSearchTerm,
-        onChange: (event) => setFilterSearchTerm(event.target.value),
-        className: "w-full rounded-full border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-600 outline-none transition focus:border-primary-300 focus:bg-white focus:ring-2 focus:ring-primary-200"
-      }
-    ))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-60 overflow-y-auto px-2 py-2" }, filteredOverflowFilters.length > 0 ? filteredOverflowFilters.map((filter) => /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        key: filter,
-        type: "button",
-        onClick: () => {
-          onSelect(filter);
-          setIsOverflowOpen(false);
-        },
-        className: `flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${selected === filter ? `bg-${color}-600 text-white shadow-lg shadow-${color}-500/30` : "text-slate-600 hover:bg-slate-100"}`
-      },
-      /* @__PURE__ */ React21__default.default.createElement("span", null, filter),
-      selected === filter && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4" })
-    )) : /* @__PURE__ */ React21__default.default.createElement("p", { className: "px-3 py-4 text-sm text-slate-500" }, "No items found.")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400" }, "Quick actions"), /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          onSelect("All");
-          setIsOverflowOpen(false);
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-64 overflow-y-auto p-1.5" }, overflowFilters.map((filter) => {
+      const isSelected = selected === filter;
+      return /* @__PURE__ */ React21__default.default.createElement(
+        "button",
+        {
+          key: filter,
+          type: "button",
+          onClick: () => {
+            onSelect(filter);
+            setIsOverflowOpen(false);
+          },
+          className: `flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition ${isSelected ? isPrimary ? "bg-primary-500 text-white" : "bg-secondary-500 text-white" : "text-slate-700 hover:bg-slate-100"}`
         },
-        className: "text-xs font-semibold uppercase tracking-wide text-primary-600 hover:text-primary-700"
-      },
-      "Reset to All"
-    ))
+        /* @__PURE__ */ React21__default.default.createElement("span", null, filter),
+        isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4" })
+      );
+    }))
   )))));
 }
 var STATUS_FILTERS = ["All", ...Object.values(ManualOrderDTOOrderStatusEnum)];
@@ -10471,9 +10467,6 @@ function OrdersScreen() {
     selectedFilter,
     selectedPaymentFilter
   );
-  const [isOverflowOpen, setIsOverflowOpen] = React21.useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = React21.useState("");
-  const overflowMenuRef = React21.useRef(null);
   const filteredOrders = React21.useMemo(() => {
     return orders.filter((order) => {
       const matchesStatus = selectedFilter === "All" || order?.orderStatus?.toLowerCase() === selectedFilter.toLowerCase();
@@ -10483,44 +10476,18 @@ function OrdersScreen() {
   }, [orders, selectedFilter, selectedPaymentFilter]);
   const hasOrders = filteredOrders.length > 0;
   const MAX_VISIBLE_FILTERS = 4;
-  React21.useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm("");
-    }
-  }, [isOverflowOpen]);
-  React21.useEffect(() => {
-    function handleClickOutside(event) {
-      if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target)) {
-        setIsOverflowOpen(false);
-      }
-    }
-    if (isOverflowOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOverflowOpen]);
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen  bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative  overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8 max-w-6xl" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CalendarDays, { className: "h-4 w-4" }), "Order history"),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "All of your pharmacy orders"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "Access receipts, shipping statuses, and reorder suggestions in one organized timeline curated by our pharmacists.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white/15 p-6 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick tip"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm text-white/80" }, "Use filters to review previous prescriptions, reorder favorites, or download invoices for insurance claims.")))
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-16 container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 text-sm text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Explore your complete order archive with pharmacist notes.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:items-end" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Orders"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, filteredOrders.length, " ", filteredOrders.length === 1 ? "order" : "orders")),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6" }, /* @__PURE__ */ React21__default.default.createElement(
       FilterChips,
       {
-        label: "Status filters",
+        label: "Order Status",
         icon: lucideReact.Filter,
         filters: STATUS_FILTERS,
         selected: selectedFilter,
@@ -10534,7 +10501,7 @@ function OrdersScreen() {
     ), /* @__PURE__ */ React21__default.default.createElement(
       FilterChips,
       {
-        label: "Payment status",
+        label: "Payment Status",
         icon: lucideReact.CreditCard,
         filters: PAYMENT_FILTERS,
         selected: selectedPaymentFilter,
@@ -10545,8 +10512,8 @@ function OrdersScreen() {
         maxVisible: MAX_VISIBLE_FILTERS,
         variant: "primary"
       }
-    ))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-4" }, isLoading ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(OrderCardSkeleton, { key: index })) : hasOrders ? filteredOrders.map((order) => /* @__PURE__ */ React21__default.default.createElement(OrderCard, { key: order.id, order })) : /* @__PURE__ */ React21__default.default.createElement(
+    )),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, isLoading ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(OrderCardSkeleton, { key: index })) : hasOrders ? filteredOrders.map((order) => /* @__PURE__ */ React21__default.default.createElement(OrderCard, { key: order.id, order })) : /* @__PURE__ */ React21__default.default.createElement(
       EmptyState,
       {
         icon: lucideReact.Package,
@@ -10556,26 +10523,28 @@ function OrdersScreen() {
         onAction: () => router.push(buildPath("/shop"))
       }
     )),
-    !isLoading && pagination.totalPages > 1 && hasOrders && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-10 flex flex-wrap items-center justify-center gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
+    !isLoading && pagination.totalPages > 1 && hasOrders && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
         variant: "outline",
         onClick: () => setPage((current) => Math.max(1, current - 1)),
-        disabled: page === 1
+        disabled: page === 1,
+        className: "rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronLeft, { className: "h-5 w-5" }),
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronLeft, { className: "h-4 w-4 mr-2" }),
       "Previous"
-    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-semibold text-slate-600" }, "Page ", page, " of ", pagination.totalPages), /* @__PURE__ */ React21__default.default.createElement(
+    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-600" }, "Page ", page, " of ", pagination.totalPages), /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
         variant: "outline",
         onClick: () => setPage((current) => Math.min(pagination.totalPages, current + 1)),
-        disabled: page === pagination.totalPages
+        disabled: page === pagination.totalPages,
+        className: "rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       },
       "Next",
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-5 w-5" })
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-4 w-4 ml-2" })
     ))
-  ))));
+  )));
 }
 function CurrentOrdersScreen() {
   const router = navigation.useRouter();