@reeboot/strapi-payment-plugin 0.0.6 → 0.0.8

package/dist/_chunks/{Dashboard-CuHC-dit.mjs → Dashboard-DAjD8Q_6.mjs}

@@ -4,9 +4,9 @@ import { Box, Flex, Loader, EmptyStateLayout, Button, Typography, Grid, Card, Ba
 import { Plus, PriceTag, ShoppingCart, ArrowClockwise, ChartPie } from "@strapi/icons";
 import { useFetchClient } from "@strapi/strapi/admin";
 import { useIntl } from "react-intl";
-import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
 import { loadStripe } from "@stripe/stripe-js";
-import { P as PaymentList } from "./PaymentList-B0CAzInT.mjs";
+import { P as PLUGIN_ID } from "./index-CB6TMitx.mjs";
+import { P as PaymentList } from "./PaymentList-3HWK7PMz.mjs";
 const Dashboard = () => {
   const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
@@ -15,25 +15,26 @@ const Dashboard = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [creatingTest, setCreatingTest] = useState(false);
+  const [testMessage, setTestMessage] = useState(null);
   useEffect(() => {
     fetchDashboardData();
   }, []);
   const fetchDashboardData = async () => {
     try {
       setLoading(true);
+      setError(null);
       const { data } = await get(`/${PLUGIN_ID}/admin/dashboard`);
       if (data.success && data.data) {
+        const total = data.data.summary.totalPayments;
+        const succeeded = data.data.summary.successfulPayments;
+        const failed = data.data.summary.failedPayments;
         setStats({
           totalRevenue: data.data.summary.totalRevenue,
-          totalPayments: data.data.summary.totalPayments,
-          successfulPayments: data.data.summary.successfulPayments,
-          pendingPayments: data.data.summary.totalPayments - data.data.summary.successfulPayments - data.data.summary.failedPayments,
-          failedPayments: data.data.summary.failedPayments,
-          totalCustomers: data.data.topCustomers.length,
-          // Rough estimate
-          totalOrders: data.data.summary.totalPayments,
-          // Rough estimate
-          averageOrderValue: data.data.summary.totalPayments > 0 ? data.data.summary.totalRevenue / data.data.summary.totalPayments : 0
+          totalPayments: total,
+          successfulPayments: succeeded,
+          pendingPayments: Math.max(0, total - succeeded - failed),
+          failedPayments: failed,
+          averageOrderValue: total > 0 ? data.data.summary.totalRevenue / total : 0
         });
         const formattedPayments = data.data.recentTransactions.map((p) => ({
           ...p,
@@ -52,6 +53,7 @@ const Dashboard = () => {
   const createTestPayment = async () => {
     try {
       setCreatingTest(true);
+      setTestMessage(null);
       const { data } = await post(`/${PLUGIN_ID}/admin/create-sample-payment`);
       if (!data.success) throw new Error(data.error?.message || "Failed to process payment");
       const { publishableKey, clientSecret } = data.data;
@@ -62,22 +64,14 @@ const Dashboard = () => {
         throw new Error("Client secret not returned from server");
       }
       const stripe = await loadStripe(publishableKey);
-      if (stripe === null) {
-        throw new Error("Failed to load Stripe.js");
-      }
+      if (stripe === null) throw new Error("Failed to load Stripe.js");
       const elements = stripe.elements({
         clientSecret,
-        appearance: {
-          theme: "stripe"
-        }
-      });
-      const paymentElement = elements.create("payment", {
-        layout: "tabs"
+        appearance: { theme: "stripe" }
       });
+      const paymentElement = elements.create("payment", { layout: "tabs" });
       const existingModal = document.getElementById("stripe-payment-modal");
-      if (existingModal) {
-        document.body.removeChild(existingModal);
-      }
+      if (existingModal) document.body.removeChild(existingModal);
       const modal = document.createElement("div");
       modal.id = "stripe-payment-modal";
       Object.assign(modal.style, {
@@ -99,26 +93,19 @@ const Dashboard = () => {
         borderRadius: "8px",
         minWidth: "400px",
         maxWidth: "500px",
-        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
       });
       const title = document.createElement("h2");
       title.textContent = "Test Payment - $25.00";
-      title.style.marginBottom = "1.5rem";
-      title.style.fontSize = "1.25rem";
-      title.style.fontWeight = "600";
-      title.style.color = "#333";
+      title.style.cssText = "margin-bottom:1.5rem;font-size:1.25rem;font-weight:600;color:#333";
       container.appendChild(title);
       const form = document.createElement("form");
       const paymentContainer = document.createElement("div");
-      const elementId = `payment-element-${Date.now()}`;
-      paymentContainer.id = elementId;
-      paymentContainer.style.marginBottom = "1.5rem";
-      paymentContainer.style.minHeight = "200px";
+      paymentContainer.id = `payment-element-${Date.now()}`;
+      paymentContainer.style.cssText = "margin-bottom:1.5rem;min-height:200px";
       form.appendChild(paymentContainer);
       const buttonContainer = document.createElement("div");
-      buttonContainer.style.display = "flex";
-      buttonContainer.style.gap = "1rem";
-      buttonContainer.style.marginTop = "1rem";
+      buttonContainer.style.cssText = "display:flex;gap:1rem;margin-top:1rem";
       const submitButton = document.createElement("button");
       submitButton.type = "submit";
       submitButton.textContent = "Loading...";
@@ -133,7 +120,6 @@ const Dashboard = () => {
         cursor: "not-allowed",
         fontSize: "16px",
         fontWeight: "500",
-        transition: "background 0.2s",
         opacity: "0.7"
       });
       const cancelButton = document.createElement("button");
@@ -147,8 +133,7 @@ const Dashboard = () => {
         borderRadius: "4px",
         cursor: "pointer",
         fontSize: "16px",
-        fontWeight: "500",
-        transition: "background 0.2s"
+        fontWeight: "500"
       });
       cancelButton.onclick = () => {
         document.body.removeChild(modal);
@@ -160,61 +145,46 @@ const Dashboard = () => {
       container.appendChild(form);
       modal.appendChild(container);
       document.body.appendChild(modal);
-      try {
-        console.log("Mounting payment element to container:", paymentContainer);
-        paymentElement.mount(paymentContainer);
-      } catch (e) {
-        console.error("Error mounting payment element:", e);
-        alert("Failed to mount Stripe payment form");
-        document.body.removeChild(modal);
-        return;
-      }
+      paymentElement.mount(paymentContainer);
       paymentElement.on("ready", () => {
-        console.log("Payment Element is ready");
         submitButton.disabled = false;
         submitButton.textContent = "Pay $25.00";
         submitButton.style.cursor = "pointer";
         submitButton.style.opacity = "1";
       });
-      paymentElement.on("loaderror", (event) => {
-        console.error("Payment Element load error:", event);
-        const errorMessage = event?.error?.message || "Unknown error loading Stripe form";
-        alert(`Failed to load payment form: ${errorMessage}. Please check your keys and network.`);
-        document.body.removeChild(modal);
-      });
       setCreatingTest(false);
       form.onsubmit = async (e) => {
         e.preventDefault();
         submitButton.disabled = true;
         submitButton.textContent = "Processing...";
         try {
-          const result = await stripe.confirmPayment({
-            elements,
-            redirect: "if_required"
-          });
+          const result = await stripe.confirmPayment({ elements, redirect: "if_required" });
           if (result.error) {
-            alert(`Payment failed: ${result.error.message}`);
+            const errDiv = document.createElement("p");
+            errDiv.style.cssText = "color:#ef4444;margin-top:0.5rem;font-size:14px";
+            errDiv.textContent = `Payment failed: ${result.error.message}`;
+            form.appendChild(errDiv);
             submitButton.disabled = false;
             submitButton.textContent = "Pay $25.00";
-          } else if (result.paymentIntent && result.paymentIntent.status === "succeeded") {
-            alert("Payment successful! ✓");
+          } else if (result.paymentIntent?.status === "succeeded") {
             document.body.removeChild(modal);
+            setTestMessage({ type: "success", text: "Test payment successful!" });
+            setTimeout(() => setTestMessage(null), 4e3);
             await fetchDashboardData();
           } else {
-            alert("Payment is being processed...");
             submitButton.disabled = false;
             submitButton.textContent = "Pay $25.00";
           }
         } catch (err) {
-          console.error("Payment confirmation error:", err);
-          alert(`Error: ${err instanceof Error ? err.message : "Payment confirmation failed"}`);
           submitButton.disabled = false;
           submitButton.textContent = "Pay $25.00";
         }
       };
     } catch (err) {
-      console.error("Payment initialization error:", err);
-      alert(err instanceof Error ? err.message : "An error occurred during payment initialization");
+      setTestMessage({
+        type: "error",
+        text: err instanceof Error ? err.message : "An error occurred during payment initialization"
+      });
       setCreatingTest(false);
     }
   };
@@ -231,8 +201,7 @@ const Dashboard = () => {
     return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
-        title: "Error loading dashboard",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsx(Button, { onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -246,16 +215,26 @@ const Dashboard = () => {
           defaultMessage: "Overview of your payment operations"
         }) })
       ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: createTestPayment,
-          loading: creatingTest,
-          variant: "secondary",
-          startIcon: /* @__PURE__ */ jsx(Plus, {}),
-          children: formatMessage({ id: "payment-plugin.dashboard.initPayment", defaultMessage: "Initialize Sample Payment" })
-        }
-      )
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-end", gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: createTestPayment,
+            loading: creatingTest,
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            children: formatMessage({ id: "payment-plugin.dashboard.initPayment", defaultMessage: "Initialize Sample Payment" })
+          }
+        ),
+        testMessage && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "pi",
+            textColor: testMessage.type === "success" ? "success600" : "danger600",
+            children: testMessage.text
+          }
+        )
+      ] })
     ] }) }),
     /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 8, children: [
       /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
@@ -279,15 +258,12 @@ const Dashboard = () => {
           /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.successRate", defaultMessage: "Success Rate" }) }),
           /* @__PURE__ */ jsx(Box, { padding: 2, background: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ArrowClockwise, { width: "1rem", height: "1rem" }) })
         ] }),
-        /* @__PURE__ */ jsxs(Typography, { variant: "alpha", fontWeight: "bold", children: [
-          stats ? Math.round(stats.successfulPayments / stats.totalPayments * 100) : 0,
-          "%"
-        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats && stats.totalPayments > 0 ? `${Math.round(stats.successfulPayments / stats.totalPayments * 100)}%` : "0%" }),
         /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Good" })
       ] }) }) }),
       /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 12, children: /* @__PURE__ */ jsx(Card, { padding: 4, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "start", gap: 2, children: [
         /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.averageOrderValue", defaultMessage: "AVO" }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.dashboard.averageOrderValue", defaultMessage: "Avg. Order Value" }) }),
           /* @__PURE__ */ jsx(Box, { padding: 2, background: "warning100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ChartPie, { width: "1rem", height: "1rem" }) })
         ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(stats?.averageOrderValue || 0) }),
@@ -300,7 +276,7 @@ const Dashboard = () => {
           /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: "payment-plugin.dashboard.recentPayments", defaultMessage: "Recent Payments" }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Latest transactions from your customers" })
         ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", children: formatMessage({ id: "payment-plugin.dashboard.viewAll", defaultMessage: "View All" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: fetchDashboardData, children: formatMessage({ id: "payment-plugin.dashboard.refresh", defaultMessage: "Refresh" }) })
       ] }),
       /* @__PURE__ */ jsx(PaymentList, { payments: recentPayments, compact: true })
     ] }) })

package/dist/_chunks/{Orders-CitNCdWE.js → Orders-DZXb54VO.js}

@@ -5,10 +5,9 @@ const React = require("react");
 const designSystem = require("@strapi/design-system");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-CHEgJ7e5.js");
+const index = require("./index-D-fFikb8.js");
 const OrderList = ({ orders, onOrderClick, compact = false }) => {
   const { formatMessage } = reactIntl.useIntl();
-  console.log("Orders:", orders);
   const formatCurrency = (amount, currency = "usd") => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -16,29 +15,24 @@ const OrderList = ({ orders, onOrderClick, compact = false }) => {
     }).format(amount);
   };
   const getStatusBadge = (status, type) => {
-    const configs = {
-      order: {
-        pending: { color: "warning", label: "Pending" },
-        processing: { color: "info", label: "Processing" },
-        shipped: { color: "secondary", label: "Shipped" },
-        delivered: { color: "success", label: "Delivered" },
-        cancelled: { color: "danger", label: "Cancelled" },
-        refunded: { color: "neutral", label: "Refunded" }
-      },
-      payment: {
-        unpaid: { color: "danger", label: "Unpaid" },
-        paid: { color: "success", label: "Paid" },
-        partially_paid: { color: "warning", label: "Partially Paid" },
-        refunded: { color: "neutral", label: "Refunded" }
-      }
+    const orderVariants = {
+      pending: { variant: "warning", label: "Pending" },
+      processing: { variant: "secondary", label: "Processing" },
+      shipped: { variant: "secondary", label: "Shipped" },
+      delivered: { variant: "success", label: "Delivered" },
+      completed: { variant: "success", label: "Completed" },
+      cancelled: { variant: "danger", label: "Cancelled" },
+      failed: { variant: "danger", label: "Failed" },
+      refunded: { variant: "neutral", label: "Refunded" }
     };
-    let config;
-    if (type === "order") {
-      config = configs.order[status] || configs.order.pending;
-    } else {
-      config = configs.payment[status] || configs.payment.unpaid;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", backgroundColor: config.color, children: config.label });
+    const paymentVariants = {
+      unpaid: { variant: "danger", label: "Unpaid" },
+      paid: { variant: "success", label: "Paid" },
+      partially_paid: { variant: "warning", label: "Partially Paid" },
+      refunded: { variant: "neutral", label: "Refunded" }
+    };
+    const config = type === "order" ? orderVariants[status] || orderVariants.pending : paymentVariants[status] || paymentVariants.unpaid;
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: compact ? "S" : "M", variant: config.variant, children: config.label });
   };
   const handleOrderClick = (order) => {
     if (onOrderClick) {
@@ -63,49 +57,17 @@ const OrderList = ({ orders, onOrderClick, compact = false }) => {
         onClick: () => handleOrderClick(order),
         style: { cursor: onOrderClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontFamily: "monospace",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: order.order_number
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", fontFamily: "monospace", children: order.order_number }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Typography,
-              {
-                textColor: "neutral800",
-                fontWeight: compact ? "normal" : "bold",
-                fontSize: compact ? "0.875rem" : "1rem",
-                children: order.customerName || "Unknown"
-              }
-            ),
-            compact && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", fontSize: "0.75rem", children: order.customerEmail })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: compact ? "normal" : "bold", children: order.customerName || "Unknown" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "epsilon", children: order.customerEmail })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Typography,
-            {
-              textColor: "neutral600",
-              fontSize: compact ? "0.75rem" : "0.875rem",
-              children: [
-                order.items ? order.items.length : 0,
-                " ",
-                order.items && order.items.length === 1 ? "item" : "items"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              textColor: "neutral800",
-              fontWeight: "bold",
-              fontSize: compact ? "0.875rem" : "1rem",
-              children: formatCurrency(order.total_amount, order.currency)
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            order.items ? order.items.length : 0,
+            " ",
+            order.items && order.items.length === 1 ? "item" : "items"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(order.total_amount, order.currency) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(order.order_status, "order") }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(order.paymentStatus, "payment") })
         ]
@@ -118,32 +80,29 @@ const Orders = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { get } = admin.useFetchClient();
   const [orders, setOrders] = React.useState([]);
-  const [filteredOrders, setFilteredOrders] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [currentPage, setCurrentPage] = React.useState(1);
-  const [pageSize, setPageSize] = React.useState(25);
+  const pageSize = 25;
   const [totalCount, setTotalCount] = React.useState(0);
   const [filters, setFilters] = React.useState({
     order_status: "",
     paymentStatus: "",
-    dateRange: { from: null, to: null },
     search: "",
     currency: ""
   });
   React.useEffect(() => {
     fetchOrders();
-  }, [currentPage, pageSize, filters]);
-  React.useEffect(() => {
-    applyFilters();
-  }, [orders, filters]);
+  }, [currentPage, filters]);
   const fetchOrders = async () => {
     try {
       setLoading(true);
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         pageSize: pageSize.toString(),
-        ...filters.order_status && { order_status: filters.order_status }
+        ...filters.order_status && { order_status: filters.order_status },
+        ...filters.search && { search: filters.search },
+        ...filters.currency && { currency: filters.currency }
       });
       const { data } = await get(`/${index.PLUGIN_ID}/admin/orders?${queryParams}`);
       if (data.success && data.data) {
@@ -156,7 +115,7 @@ const Orders = () => {
           items: Array.isArray(o.items) ? o.items : []
         }));
         setOrders(formattedOrders);
-        setTotalCount(data.meta.pagination.total);
+        setTotalCount(data.meta?.pagination?.total || 0);
       }
       setLoading(false);
     } catch (err) {
@@ -164,38 +123,7 @@ const Orders = () => {
       setLoading(false);
     }
   };
-  const applyFilters = () => {
-    let filtered = [...orders];
-    if (filters.search) {
-      const searchLower = filters.search.toLowerCase();
-      filtered = filtered.filter(
-        (order) => order.order_number && order.order_number.toLowerCase().includes(searchLower) || order.customerEmail && order.customerEmail.toLowerCase().includes(searchLower) || order.customerName && order.customerName.toLowerCase().includes(searchLower)
-      );
-    }
-    if (filters.order_status) {
-      filtered = filtered.filter((order) => order.order_status === filters.order_status);
-    }
-    if (filters.paymentStatus) {
-      filtered = filtered.filter((order) => order.paymentStatus === filters.paymentStatus);
-    }
-    if (filters.currency) {
-      filtered = filtered.filter((order) => order.currency === filters.currency);
-    }
-    if (filters.dateRange.from) {
-      filtered = filtered.filter(
-        (order) => new Date(order.createdAt) >= filters.dateRange.from
-      );
-    }
-    if (filters.dateRange.to) {
-      filtered = filtered.filter(
-        (order) => new Date(order.createdAt) <= filters.dateRange.to
-      );
-    }
-    setFilteredOrders(filtered);
-  };
-  const handleOrderClick = (order) => {
-    console.log("Clicked order:", order);
-  };
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -210,19 +138,13 @@ const Orders = () => {
     setCurrentPage(1);
   };
   const clearFilters = () => {
-    setFilters({
-      order_status: "",
-      paymentStatus: "",
-      dateRange: { from: null, to: null },
-      search: "",
-      currency: ""
-    });
+    setFilters({ order_status: "", paymentStatus: "", search: "", currency: "" });
     setCurrentPage(1);
   };
   const exportOrders = () => {
     const csvContent = [
       ["Order Number", "Customer Email", "Customer Name", "Status", "Payment Status", "Total Amount", "Currency", "Date"],
-      ...filteredOrders.map((order) => [
+      ...orders.map((order) => [
         order.order_number || "",
         order.customerEmail || "",
         order.customerName || "",
@@ -241,10 +163,6 @@ const Orders = () => {
     a.click();
     window.URL.revokeObjectURL(url);
   };
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(filteredOrders.length / pageSize);
   if (loading && orders.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
   }
@@ -252,8 +170,7 @@ const Orders = () => {
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
-        title: "Error loading orders",
-        subtitle: error,
+        content: error,
         action: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchOrders, children: formatMessage({ id: "payment-plugin.orders.retry", defaultMessage: "Retry" }) })
       }
     ) });
@@ -269,13 +186,14 @@ const Orders = () => {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: exportOrders, children: formatMessage({ id: "payment-plugin.orders.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchOrders })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchOrders, children: formatMessage({ id: "payment-plugin.orders.refresh", defaultMessage: "Refresh" }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.TextInput,
         {
+          label: formatMessage({ id: "payment-plugin.orders.search.label", defaultMessage: "Search" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.search.placeholder",
             defaultMessage: "Search orders..."
@@ -287,6 +205,7 @@ const Orders = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.status.label", defaultMessage: "Order Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.status.placeholder",
             defaultMessage: "All Statuses"
@@ -297,8 +216,7 @@ const Orders = () => {
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.orders.all", defaultMessage: "All" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "pending", children: formatMessage({ id: "payment-plugin.orders.pending", defaultMessage: "Pending" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "processing", children: formatMessage({ id: "payment-plugin.orders.processing", defaultMessage: "Processing" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "shipped", children: formatMessage({ id: "payment-plugin.orders.shipped", defaultMessage: "Shipped" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "delivered", children: formatMessage({ id: "payment-plugin.orders.delivered", defaultMessage: "Delivered" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "completed", children: formatMessage({ id: "payment-plugin.orders.completed", defaultMessage: "Completed" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "cancelled", children: formatMessage({ id: "payment-plugin.orders.cancelled", defaultMessage: "Cancelled" }) })
           ]
         }
@@ -306,9 +224,10 @@ const Orders = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.paymentStatus.label", defaultMessage: "Payment Status" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.paymentStatus.placeholder",
-            defaultMessage: "All Payment Statuses"
+            defaultMessage: "All"
           }),
           value: filters.paymentStatus,
           onChange: (value) => handleFilterChange("paymentStatus", value),
@@ -324,6 +243,7 @@ const Orders = () => {
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.SingleSelect,
         {
+          label: formatMessage({ id: "payment-plugin.orders.currency.label", defaultMessage: "Currency" }),
           placeholder: formatMessage({
             id: "payment-plugin.orders.currency.placeholder",
             defaultMessage: "All Currencies"
@@ -338,31 +258,38 @@ const Orders = () => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.orders.clearFilters", defaultMessage: "Clear" }) }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, alignItems: "flex-end", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: clearFilters, children: formatMessage({ id: "payment-plugin.orders.clearFilters", defaultMessage: "Clear" }) }) }) })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, marginBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
-      { id: "payment-plugin.orders.results", defaultMessage: "Showing {start}-{end} of {total} orders" },
-      {
-        start: startIndex + 1,
-        end: Math.min(endIndex, filteredOrders.length),
-        total: filteredOrders.length
-      }
+      { id: "payment-plugin.orders.results", defaultMessage: "{total} orders" },
+      { total: totalCount }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      OrderList,
-      {
-        orders: paginatedOrders,
-        onOrderClick: handleOrderClick
-      }
-    ) }),
-    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Pagination,
-      {
-        currentPage,
-        pageCount: totalPages,
-        onPageChange: setCurrentPage
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(OrderList, { orders }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Pagination, { activePage: currentPage, pageCount: totalPages, label: "Orders pagination", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.PreviousLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.max(1, p - 1))
+        }
+      ),
+      Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.PageLink,
+        {
+          number: page,
+          as: "button",
+          onClick: () => setCurrentPage(page)
+        },
+        page
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.NextLink,
+        {
+          as: "button",
+          onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1))
+        }
+      )
+    ] }) }) })
   ] });
 };
 exports.Orders = Orders;