@reeboot/strapi-payment-plugin 0.0.4 → 0.0.6

package/dist/_chunks/{Orders-CBkT2YfP.mjs → Orders-65mNfu2i.mjs}

@@ -1,9 +1,117 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Box, Flex, Loader, EmptyStateLayout, Button, Typography, Card, Grid, TextInput, SingleSelect, SingleSelectOption, Table, Thead, Tr, Th, Tbody, Td, Pagination, Badge } from "@strapi/design-system";
+import { Box, Typography, Table, Thead, Tr, Th, Tbody, Td, Flex, Badge, Loader, EmptyStateLayout, Button, Card, Grid, TextInput, SingleSelect, SingleSelectOption, Pagination } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-DS_PYNkf.mjs";
+import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
+const OrderList = ({ orders, onOrderClick, compact = false }) => {
+  const { formatMessage } = useIntl();
+  console.log("Orders:", orders);
+  const formatCurrency = (amount, currency = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).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" }
+      }
+    };
+    let config;
+    if (type === "order") {
+      config = configs.order[status] || configs.order.pending;
+    } else {
+      config = configs.payment[status] || configs.payment.unpaid;
+    }
+    return /* @__PURE__ */ jsx(Badge, { size: compact ? "S" : "M", backgroundColor: config.color, children: config.label });
+  };
+  const handleOrderClick = (order) => {
+    if (onOrderClick) {
+      onOrderClick(order);
+    }
+  };
+  if (orders.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { padding: 4, textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.orderList.empty", defaultMessage: "No orders found" }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.orderNumber", defaultMessage: "Order #" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.customer", defaultMessage: "Customer" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.items", defaultMessage: "Items" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.total", defaultMessage: "Total" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.status", defaultMessage: "Status" }) }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.paymentStatus", defaultMessage: "Payment" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: orders.map((order) => /* @__PURE__ */ jsxs(
+      Tr,
+      {
+        onClick: () => handleOrderClick(order),
+        style: { cursor: onOrderClick ? "pointer" : "default" },
+        children: [
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              textColor: "neutral800",
+              fontWeight: "bold",
+              fontFamily: "monospace",
+              fontSize: compact ? "0.875rem" : "1rem",
+              children: order.order_number
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                textColor: "neutral800",
+                fontWeight: compact ? "normal" : "bold",
+                fontSize: compact ? "0.875rem" : "1rem",
+                children: order.customerName || "Unknown"
+              }
+            ),
+            compact && /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", fontSize: "0.75rem", children: order.customerEmail })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
+            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__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              textColor: "neutral800",
+              fontWeight: "bold",
+              fontSize: compact ? "0.875rem" : "1rem",
+              children: formatCurrency(order.total_amount, order.currency)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.order_status, "order") }),
+          /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.paymentStatus, "payment") })
+        ]
+      },
+      order.id
+    )) })
+  ] });
+};
 const Orders = () => {
   const { formatMessage } = useIntl();
   const { get } = useFetchClient();
@@ -15,7 +123,7 @@ const Orders = () => {
   const [pageSize, setPageSize] = useState(25);
   const [totalCount, setTotalCount] = useState(0);
   const [filters, setFilters] = useState({
-    status: "",
+    order_status: "",
     paymentStatus: "",
     dateRange: { from: null, to: null },
     search: "",
@@ -33,22 +141,17 @@ const Orders = () => {
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         pageSize: pageSize.toString(),
-        ...filters.status && { status: filters.status }
+        ...filters.order_status && { order_status: filters.order_status }
       });
       const { data } = await get(`/${PLUGIN_ID}/admin/orders?${queryParams}`);
       if (data.success && data.data) {
         const formattedOrders = data.data.map((o) => ({
+          ...o,
           id: o.documentId,
-          orderNumber: o.order_number,
           customerEmail: o.customer?.email || "N/A",
-          customerName: o.customer ? `${o.customer.firstName || ""} ${o.customer.lastName || ""}`.trim() : "N/A",
-          status: o.status,
-          totalAmount: o.total_amount,
-          currency: o.currency,
-          paymentStatus: o.status === "completed" ? "paid" : "unpaid",
-          items: Array.isArray(o.items) ? o.items : [],
-          createdAt: o.createdAt,
-          updatedAt: o.updatedAt
+          customerName: o.customer ? `${o.customer.first_name || ""} ${o.customer.last_name || ""}`.trim() : "N/A",
+          paymentStatus: o.payment_status || (o.order_status === "completed" ? "paid" : "unpaid"),
+          items: Array.isArray(o.items) ? o.items : []
         }));
         setOrders(formattedOrders);
         setTotalCount(data.meta.pagination.total);
@@ -64,11 +167,11 @@ const Orders = () => {
     if (filters.search) {
       const searchLower = filters.search.toLowerCase();
       filtered = filtered.filter(
-        (order) => order.orderNumber.toLowerCase().includes(searchLower) || order.customerEmail.toLowerCase().includes(searchLower) || order.customerName?.toLowerCase().includes(searchLower)
+        (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.status) {
-      filtered = filtered.filter((order) => order.status === filters.status);
+    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);
@@ -88,11 +191,8 @@ const Orders = () => {
     }
     setFilteredOrders(filtered);
   };
-  const formatCurrency = (amount, currency = "usd") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.toUpperCase()
-    }).format(amount);
+  const handleOrderClick = (order) => {
+    console.log("Clicked order:", order);
   };
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString("en-US", {
@@ -103,33 +203,13 @@ const Orders = () => {
       minute: "2-digit"
     });
   };
-  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 config = type === "order" ? configs.order[status] || configs.order.pending : configs.payment[status] || configs.payment.unpaid;
-    return /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: config.color, children: config.label });
-  };
   const handleFilterChange = (key, value) => {
     setFilters((prev) => ({ ...prev, [key]: value }));
     setCurrentPage(1);
   };
   const clearFilters = () => {
     setFilters({
-      status: "",
+      order_status: "",
       paymentStatus: "",
       dateRange: { from: null, to: null },
       search: "",
@@ -141,12 +221,12 @@ const Orders = () => {
     const csvContent = [
       ["Order Number", "Customer Email", "Customer Name", "Status", "Payment Status", "Total Amount", "Currency", "Date"],
       ...filteredOrders.map((order) => [
-        order.orderNumber,
-        order.customerEmail,
+        order.order_number || "",
+        order.customerEmail || "",
         order.customerName || "",
-        order.status,
-        order.paymentStatus,
-        (order.totalAmount / 100).toString(),
+        order.order_status,
+        order.paymentStatus || "",
+        order.total_amount.toString(),
         order.currency,
         formatDate(order.createdAt)
       ])
@@ -164,10 +244,10 @@ const Orders = () => {
   const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
   const totalPages = Math.ceil(filteredOrders.length / pageSize);
   if (loading && orders.length === 0) {
-    return /* @__PURE__ */ jsx(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
         title: "Error loading orders",
@@ -176,7 +256,7 @@ const Orders = () => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+  return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.orders.title", defaultMessage: "Orders" }) }),
@@ -187,7 +267,7 @@ const Orders = () => {
       ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: exportOrders, children: formatMessage({ id: "payment-plugin.orders.export", defaultMessage: "Export" }) }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.orders.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsx(Button, { onClick: fetchOrders })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
@@ -209,8 +289,8 @@ const Orders = () => {
             id: "payment-plugin.orders.status.placeholder",
             defaultMessage: "All Statuses"
           }),
-          value: filters.status,
-          onChange: (value) => handleFilterChange("status", value),
+          value: filters.order_status,
+          onChange: (value) => handleFilterChange("order_status", value),
           children: [
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: formatMessage({ id: "payment-plugin.orders.all", defaultMessage: "All" }) }),
             /* @__PURE__ */ jsx(SingleSelectOption, { value: "pending", children: formatMessage({ id: "payment-plugin.orders.pending", defaultMessage: "Pending" }) }),
@@ -266,33 +346,13 @@ const Orders = () => {
         total: filteredOrders.length
       }
     ) }) }),
-    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.orderNumber", defaultMessage: "Order #" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.customer", defaultMessage: "Customer" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.items", defaultMessage: "Items" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.total", defaultMessage: "Total" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.status", defaultMessage: "Order Status" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.paymentStatus", defaultMessage: "Payment Status" }) }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.date", defaultMessage: "Date" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(Tbody, { children: paginatedOrders.map((order) => /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", fontFamily: "monospace", children: order.orderNumber }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: order.customerName || "Unknown -" }),
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", variant: "epsilon", children: order.customerEmail })
-        ] }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Typography, { textColor: "neutral600", children: [
-          order.items.length,
-          " ",
-          order.items.length === 1 ? "item" : "items"
-        ] }) }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(order.totalAmount, order.currency) }) }),
-        /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.status, "order") }),
-        /* @__PURE__ */ jsx(Td, { children: getStatusBadge(order.paymentStatus, "payment") }),
-        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatDate(order.createdAt) }) })
-      ] }, order.id)) })
-    ] }) }) }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(
+      OrderList,
+      {
+        orders: paginatedOrders,
+        onOrderClick: handleOrderClick
+      }
+    ) }),
     totalPages > 1 && /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
       Pagination,
       {

package/dist/_chunks/{Orders-OG-pwV-B.js → Orders-CitNCdWE.js}

@@ -5,7 +5,115 @@ 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-BqqrpI6D.js");
+const index = require("./index-CHEgJ7e5.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",
+      currency: currency.toUpperCase()
+    }).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" }
+      }
+    };
+    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 handleOrderClick = (order) => {
+    if (onOrderClick) {
+      onOrderClick(order);
+    }
+  };
+  if (orders.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.orderList.empty", defaultMessage: "No orders found" }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.orderNumber", defaultMessage: "Order #" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.customer", defaultMessage: "Customer" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.items", defaultMessage: "Items" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.total", defaultMessage: "Total" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.status", defaultMessage: "Status" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: compact ? "epsilon" : "delta", children: formatMessage({ id: "payment-plugin.orderList.paymentStatus", defaultMessage: "Payment" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: orders.map((order) => /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Tr,
+      {
+        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.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.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: getStatusBadge(order.order_status, "order") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(order.paymentStatus, "payment") })
+        ]
+      },
+      order.id
+    )) })
+  ] });
+};
 const Orders = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { get } = admin.useFetchClient();
@@ -17,7 +125,7 @@ const Orders = () => {
   const [pageSize, setPageSize] = React.useState(25);
   const [totalCount, setTotalCount] = React.useState(0);
   const [filters, setFilters] = React.useState({
-    status: "",
+    order_status: "",
     paymentStatus: "",
     dateRange: { from: null, to: null },
     search: "",
@@ -35,22 +143,17 @@ const Orders = () => {
       const queryParams = new URLSearchParams({
         page: currentPage.toString(),
         pageSize: pageSize.toString(),
-        ...filters.status && { status: filters.status }
+        ...filters.order_status && { order_status: filters.order_status }
       });
       const { data } = await get(`/${index.PLUGIN_ID}/admin/orders?${queryParams}`);
       if (data.success && data.data) {
         const formattedOrders = data.data.map((o) => ({
+          ...o,
           id: o.documentId,
-          orderNumber: o.order_number,
           customerEmail: o.customer?.email || "N/A",
-          customerName: o.customer ? `${o.customer.firstName || ""} ${o.customer.lastName || ""}`.trim() : "N/A",
-          status: o.status,
-          totalAmount: o.total_amount,
-          currency: o.currency,
-          paymentStatus: o.status === "completed" ? "paid" : "unpaid",
-          items: Array.isArray(o.items) ? o.items : [],
-          createdAt: o.createdAt,
-          updatedAt: o.updatedAt
+          customerName: o.customer ? `${o.customer.first_name || ""} ${o.customer.last_name || ""}`.trim() : "N/A",
+          paymentStatus: o.payment_status || (o.order_status === "completed" ? "paid" : "unpaid"),
+          items: Array.isArray(o.items) ? o.items : []
         }));
         setOrders(formattedOrders);
         setTotalCount(data.meta.pagination.total);
@@ -66,11 +169,11 @@ const Orders = () => {
     if (filters.search) {
       const searchLower = filters.search.toLowerCase();
       filtered = filtered.filter(
-        (order) => order.orderNumber.toLowerCase().includes(searchLower) || order.customerEmail.toLowerCase().includes(searchLower) || order.customerName?.toLowerCase().includes(searchLower)
+        (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.status) {
-      filtered = filtered.filter((order) => order.status === filters.status);
+    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);
@@ -90,11 +193,8 @@ const Orders = () => {
     }
     setFilteredOrders(filtered);
   };
-  const formatCurrency = (amount, currency = "usd") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: currency.toUpperCase()
-    }).format(amount);
+  const handleOrderClick = (order) => {
+    console.log("Clicked order:", order);
   };
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString("en-US", {
@@ -105,33 +205,13 @@ const Orders = () => {
       minute: "2-digit"
     });
   };
-  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 config = type === "order" ? configs.order[status] || configs.order.pending : configs.payment[status] || configs.payment.unpaid;
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", backgroundColor: config.color, children: config.label });
-  };
   const handleFilterChange = (key, value) => {
     setFilters((prev) => ({ ...prev, [key]: value }));
     setCurrentPage(1);
   };
   const clearFilters = () => {
     setFilters({
-      status: "",
+      order_status: "",
       paymentStatus: "",
       dateRange: { from: null, to: null },
       search: "",
@@ -143,12 +223,12 @@ const Orders = () => {
     const csvContent = [
       ["Order Number", "Customer Email", "Customer Name", "Status", "Payment Status", "Total Amount", "Currency", "Date"],
       ...filteredOrders.map((order) => [
-        order.orderNumber,
-        order.customerEmail,
+        order.order_number || "",
+        order.customerEmail || "",
         order.customerName || "",
-        order.status,
-        order.paymentStatus,
-        (order.totalAmount / 100).toString(),
+        order.order_status,
+        order.paymentStatus || "",
+        order.total_amount.toString(),
         order.currency,
         formatDate(order.createdAt)
       ])
@@ -166,10 +246,10 @@ const Orders = () => {
   const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
   const totalPages = Math.ceil(filteredOrders.length / pageSize);
   if (loading && orders.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
+    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, {}) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
         title: "Error loading orders",
@@ -178,7 +258,7 @@ const Orders = () => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, paddingBottom: 10, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.orders.title", defaultMessage: "Orders" }) }),
@@ -189,7 +269,7 @@ 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: () => window.location.reload(), children: formatMessage({ id: "payment-plugin.orders.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchOrders })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
@@ -211,8 +291,8 @@ const Orders = () => {
             id: "payment-plugin.orders.status.placeholder",
             defaultMessage: "All Statuses"
           }),
-          value: filters.status,
-          onChange: (value) => handleFilterChange("status", value),
+          value: filters.order_status,
+          onChange: (value) => handleFilterChange("order_status", value),
           children: [
             /* @__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" }) }),
@@ -268,33 +348,13 @@ const Orders = () => {
         total: filteredOrders.length
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.orderNumber", defaultMessage: "Order #" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.customer", defaultMessage: "Customer" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.items", defaultMessage: "Items" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.total", defaultMessage: "Total" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.status", defaultMessage: "Order Status" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.paymentStatus", defaultMessage: "Payment Status" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.orders.date", defaultMessage: "Date" }) }) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: paginatedOrders.map((order) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", fontFamily: "monospace", children: order.orderNumber }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "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", children: [
-          order.items.length,
-          " ",
-          order.items.length === 1 ? "item" : "items"
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", children: formatCurrency(order.totalAmount, order.currency) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(order.status, "order") }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: getStatusBadge(order.paymentStatus, "payment") }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatDate(order.createdAt) }) })
-      ] }, order.id)) })
-    ] }) }) }),
+    /* @__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,
       {