@reeboot/strapi-payment-plugin 0.0.0

package/dist/_chunks/App-BGle38NN.js

@@ -0,0 +1,1149 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const admin = require("@strapi/strapi/admin");
+const reactRouterDom = require("react-router-dom");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const formik = require("formik");
+const HomePage = () => {
+  const [transactions, setTransactions] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [stats, setStats] = react.useState({
+    totalRevenue: 0,
+    totalTransactions: 0,
+    successRate: 0
+  });
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const [filter, setFilter] = react.useState("all");
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/payment-plugin/transactions");
+      if (!response.ok) {
+        throw new Error("Failed to fetch transactions");
+      }
+      const data = await response.json();
+      setTransactions(data.data);
+      const totalAmount = data.data.reduce(
+        (sum, t) => sum + t.amount,
+        0
+      );
+      const successCount = data.data.filter(
+        (t) => t.status === "completed"
+      ).length;
+      const successRate = data.data.length > 0 ? successCount / data.data.length * 100 : 0;
+      setStats({
+        totalRevenue: totalAmount,
+        totalTransactions: data.data.length,
+        successRate
+      });
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchData();
+  }, []);
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value);
+  };
+  const handleFilterChange = (e) => {
+    setFilter(e.target.value);
+  };
+  const filteredTransactions = transactions.filter((transaction) => {
+    const matchesSearch = [
+      transaction.id,
+      transaction.customer,
+      transaction.amount.toString()
+    ].some(
+      (field) => field.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    const matchesFilter = filter === "all" || transaction.status === filter;
+    return matchesSearch && matchesFilter;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Payment Plugin Home" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        borderRadius: "4px",
+        border: "1px solid #e0e0e0",
+        style: { marginBottom: "2rem" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Payment Statistics" }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading statistics..." }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "red" }, children: error }),
+          !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Total Revenue" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: [
+                "$",
+                stats.totalRevenue.toFixed(2)
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Total Transactions" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: stats.totalTransactions })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Successful Payments" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: [
+                stats.successRate.toFixed(2),
+                "%"
+              ] })
+            ] }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        borderRadius: "4px",
+        border: "1px solid #e0e0e0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Transactions" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                label: "Search Transactions",
+                value: searchTerm,
+                onChange: handleSearch,
+                placeholder: "Search by ID, email, or amount",
+                style: { flex: 1, minWidth: "200px" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("select", { value: filter, onChange: handleFilterChange, style: { minWidth: "150px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All Transactions" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "completed", children: "Successful" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "failed", children: "Failed" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "Pending" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { overflowX: "auto" }, children: [
+            loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading transactions..." }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "red" }, children: error }),
+            !loading && !error && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredTransactions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "ID" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Amount" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Currency" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Status" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Date" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Customer" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: filteredTransactions.map((transaction) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.id }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Td, { children: [
+                  "$",
+                  transaction.amount.toFixed(2)
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.currency }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.status }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: new Date(transaction.date).toLocaleDateString() }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.customer })
+              ] }, transaction.id)) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No transactions found" }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+const ConfigurationPage = () => {
+  const [stripeSecretKey, setStripeSecretKey] = react.useState("");
+  const [stripePublishableKey, setStripePublishableKey] = react.useState("");
+  const [stripeWebhookSecret, setStripeWebhookSecret] = react.useState("");
+  const [paypalClientId, setPaypalClientId] = react.useState("");
+  const [paypalClientSecret, setPaypalClientSecret] = react.useState("");
+  const [paypalWebhookId, setPaypalWebhookId] = react.useState("");
+  const [configStatus, setConfigStatus] = react.useState({
+    stripe: false,
+    paypal: false
+  });
+  react.useEffect(() => {
+    const fetchConfigStatus = async () => {
+      try {
+        const response = await fetch("/payment-plugin/config-status");
+        if (response.ok) {
+          const data = await response.json();
+          setConfigStatus(data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch config status:", error);
+      }
+    };
+    fetchConfigStatus();
+  }, []);
+  const handleSave = async () => {
+    const response = await fetch("/payment-plugin/config", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        stripe: {
+          secretKey: stripeSecretKey,
+          publishableKey: stripePublishableKey,
+          webhookSecret: stripeWebhookSecret
+        },
+        paypal: {
+          clientId: paypalClientId,
+          clientSecret: paypalClientSecret,
+          webhookId: paypalWebhookId
+        }
+      })
+    });
+    if (response.ok) {
+      alert("Configuration saved successfully");
+    } else {
+      alert("Failed to save configuration");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { title: "Payment Plugin Configuration" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Payment Configuration" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          borderRadius: "4px",
+          border: "1px solid #e0e0e0",
+          style: { marginBottom: "2rem" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Payment Configuration" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, style: { marginBottom: "2rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "gamma", as: "h3", textColor: "neutral800", children: "Stripe Status  " }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "50%",
+                    backgroundColor: configStatus.stripe ? "green" : "red",
+                    marginRight: "8px"
+                  } }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: configStatus.stripe ? "success600" : "danger600", children: configStatus.stripe ? "Connected" : "Not Connected" })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "gamma", as: "h3", textColor: "neutral800", children: "PayPal Status  " }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "50%",
+                    backgroundColor: configStatus.paypal ? "green" : "red",
+                    marginRight: "8px"
+                  } }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: configStatus.paypal ? "success600" : "danger600", children: configStatus.paypal ? "Connected" : "Not Connected" })
+                ] })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Box,
+                {
+                  padding: 6,
+                  background: "neutral0",
+                  borderRadius: "4px",
+                  border: "1px solid #e0e0e0",
+                  style: { marginBottom: "1rem", width: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "gamma", as: "h3", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Stripe Configuration" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 8, alignItems: "initial", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Secret Key",
+                          name: "stripeSecretKey",
+                          value: stripeSecretKey,
+                          onChange: (e) => setStripeSecretKey(e.target.value),
+                          type: "password",
+                          disabled: configStatus.stripe,
+                          style: {
+                            border: configStatus.stripe ? "2px solid #4CAF50" : ""
+                          },
+                          hint: configStatus.stripe ? "This value is controlled by environment variables" : ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Publishable Key",
+                          name: "stripePublishableKey",
+                          value: stripePublishableKey,
+                          onChange: (e) => setStripePublishableKey(e.target.value),
+                          disabled: configStatus.stripe,
+                          style: {
+                            border: configStatus.stripe ? "2px solid #4CAF50" : ""
+                          },
+                          hint: configStatus.stripe ? "This value is controlled by environment variables" : ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Webhook Secret",
+                          name: "stripeWebhookSecret",
+                          value: stripeWebhookSecret,
+                          onChange: (e) => setStripeWebhookSecret(e.target.value),
+                          type: "password",
+                          disabled: configStatus.stripe,
+                          style: {
+                            border: configStatus.stripe ? "2px solid #4CAF50" : ""
+                          },
+                          hint: configStatus.stripe ? "This value is controlled by environment variables" : ""
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Box,
+                {
+                  padding: 6,
+                  background: "neutral0",
+                  borderRadius: "4px",
+                  border: "1px solid #e0e0e0",
+                  style: { marginBottom: "1rem", width: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "gamma", as: "h3", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "PayPal Configuration" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 8, alignItems: "initial", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Client ID",
+                          name: "paypalClientId",
+                          value: paypalClientId,
+                          onChange: (e) => setPaypalClientId(e.target.value),
+                          disabled: configStatus.paypal,
+                          style: {
+                            border: configStatus.paypal ? "2px solid #4CAF50" : "",
+                            width: "100%"
+                          },
+                          hint: configStatus.paypal ? "This value is controlled by environment variables" : ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Client Secret",
+                          name: "paypalClientSecret",
+                          value: paypalClientSecret,
+                          onChange: (e) => setPaypalClientSecret(e.target.value),
+                          type: "password",
+                          disabled: configStatus.paypal,
+                          style: {
+                            border: configStatus.paypal ? "2px solid #4CAF50" : ""
+                          },
+                          width: "80%",
+                          hint: configStatus.paypal ? "This value is controlled by environment variables" : ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "Webhook ID",
+                          name: "paypalWebhookId",
+                          value: paypalWebhookId,
+                          onChange: (e) => setPaypalWebhookId(e.target.value),
+                          disabled: configStatus.paypal,
+                          style: {
+                            border: configStatus.paypal ? "2px solid #4CAF50" : ""
+                          },
+                          hint: configStatus.paypal ? "This value is controlled by environment variables" : ""
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSave, style: { marginTop: "1rem" }, children: "Save Configuration" })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+};
+const TransactionList = ({ transactions, onViewDetails, onStatusUpdate }) => {
+  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: "ID" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Amount" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Currency" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Status" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Date" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Customer" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Actions" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: transactions.map((transaction) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.id }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Td, { children: [
+        "$",
+        transaction.amount.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.currency }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: onStatusUpdate ? /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.SingleSelect,
+        {
+          value: transaction.status,
+          onChange: (e) => onStatusUpdate(transaction.id, e.target.value),
+          style: { minWidth: "120px" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "Pending" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "completed", children: "Completed" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "failed", children: "Failed" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "refunded", children: "Refunded" })
+          ]
+        }
+      ) : transaction.status }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: new Date(transaction.date).toLocaleDateString() }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: transaction.customer }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", size: "S", onClick: () => onViewDetails(transaction), children: "View" }) })
+    ] }, transaction.id)) })
+  ] });
+};
+const TransactionDetailsModal = ({
+  isOpen,
+  onClose,
+  transaction,
+  onRefund
+}) => {
+  if (!transaction) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { onClick: onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", children: "Transaction Details" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", children: "Details" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Amount:" }),
+          " $",
+          transaction.amount.toFixed(2),
+          " ",
+          transaction.currency
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Status:" }),
+          " ",
+          transaction.status
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Date:" }),
+          " ",
+          new Date(transaction.date).toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Customer:" }),
+          " ",
+          transaction.customer
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Payment Method:" }),
+          " ",
+          transaction.paymentMethod
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Gateway:" }),
+          " ",
+          transaction.gateway
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { style: { marginTop: "2rem", gap: "1rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: onClose, children: "Close" }),
+        transaction.status === "completed" && transaction.gateway !== "paypal" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger", onClick: onRefund, style: { marginLeft: "auto" }, children: "Refund" })
+      ] })
+    ] }) })
+  ] }) });
+};
+const TransactionsPage = () => {
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const [filter, setFilter] = react.useState("all");
+  const [transactions, setTransactions] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [selectedTransaction, setSelectedTransaction] = react.useState(null);
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value);
+  };
+  const handleFilterChange = (value) => {
+    setFilter(value);
+  };
+  const fetchTransactions = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/payment-plugin/transactions");
+      if (!response.ok) {
+        throw new Error("Failed to fetch transactions");
+      }
+      const data = await response.json();
+      setTransactions(data.data);
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchTransactions();
+  }, []);
+  const filteredTransactions = transactions.filter((transaction) => {
+    const matchesSearch = [
+      transaction.id,
+      transaction.customer,
+      transaction.amount.toString()
+    ].some(
+      (field) => field.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    const matchesFilter = filter === "all" || transaction.status === filter;
+    return matchesSearch && matchesFilter;
+  });
+  const handleViewDetails = (transaction) => {
+    setSelectedTransaction(transaction);
+    setIsModalOpen(true);
+  };
+  const handleRefund = async () => {
+    if (!selectedTransaction) return;
+    try {
+      const response = await fetch("/payment-plugin/refund", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          gateway: selectedTransaction.gateway,
+          transactionId: selectedTransaction.id,
+          amount: selectedTransaction.amount
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to process refund");
+      }
+      const result = await response.json();
+      if (result.success) {
+        setTransactions(transactions.map(
+          (t) => t.id === selectedTransaction.id ? { ...t, status: "refunded" } : t
+        ));
+        setIsModalOpen(false);
+      } else {
+        throw new Error(result.message || "Refund failed");
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+  const handleStatusUpdate = async (transactionId, newStatus) => {
+    try {
+      setTransactions(transactions.map(
+        (t) => t.id === transactionId ? { ...t, status: newStatus } : t
+      ));
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { title: "Transactions" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Transactions" }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", style: { marginBottom: "1rem" }, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          borderRadius: "4px",
+          border: "1px solid #e0e0e0",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Transaction List" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "1rem", display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  label: "Search Transactions",
+                  value: searchTerm,
+                  onChange: handleSearch,
+                  placeholder: "Search by ID, email, or amount",
+                  style: { flex: 1, minWidth: "200px" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { value: filter, onChange: handleFilterChange, style: { minWidth: "150px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "all", children: "All Transactions" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "completed", children: "Successful" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "failed", children: "Failed" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "pending", children: "Pending" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "refunded", children: "Refunded" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading transactions..." }),
+              !loading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredTransactions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                TransactionList,
+                {
+                  transactions: filteredTransactions,
+                  onViewDetails: handleViewDetails,
+                  onStatusUpdate: handleStatusUpdate
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No transactions found" }) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TransactionDetailsModal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        transaction: selectedTransaction,
+        onRefund: handleRefund
+      }
+    )
+  ] });
+};
+const DashboardPage = () => {
+  const [transactions, setTransactions] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [stats, setStats] = react.useState({
+    totalRevenue: 0,
+    totalTransactions: 0,
+    successRate: 0
+  });
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/payment-plugin/transactions");
+      if (!response.ok) {
+        throw new Error("Failed to fetch transactions");
+      }
+      const data = await response.json();
+      setTransactions(data.data.slice(0, 5));
+      const totalAmount = data.data.reduce(
+        (sum, t) => sum + t.amount,
+        0
+      );
+      const successCount = data.data.filter(
+        (t) => t.status === "completed"
+      ).length;
+      const successRate = data.data.length > 0 ? successCount / data.data.length * 100 : 0;
+      setStats({
+        totalRevenue: totalAmount,
+        totalTransactions: data.data.length,
+        successRate
+      });
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchData();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { title: "Payment Dashboard" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Payment Dashboard" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          borderRadius: "4px",
+          border: "1px solid #e0e0e0",
+          style: { marginBottom: "2rem" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Payment Statistics" }),
+            loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading statistics..." }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "red" }, children: error }),
+            !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Total Revenue" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: [
+                  "$",
+                  stats.totalRevenue.toFixed(2)
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Total Transactions" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: stats.totalTransactions })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", borderRadius: "4px", border: "1px solid #e0e0e0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Successful Payments" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", textColor: "primary600", children: [
+                  stats.successRate.toFixed(2),
+                  "%"
+                ] })
+              ] }) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          borderRadius: "4px",
+          border: "1px solid #e0e0e0",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", style: { marginBottom: "1rem" }, children: "Recent Transactions" }),
+            loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading transactions..." }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "red" }, children: error }),
+            !loading && !error && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(TransactionList, { transactions, onViewDetails: () => {
+            } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No recent transactions" }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const ProductsPage = () => {
+  const [products, setProducts] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [currentProduct, setCurrentProduct] = react.useState(null);
+  const fetchProducts = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/payment-plugin/products");
+      if (!response.ok) {
+        throw new Error("Failed to fetch products");
+      }
+      const data = await response.json();
+      setProducts(data);
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchProducts();
+  }, []);
+  const handleEdit = (product) => {
+    setCurrentProduct(product);
+    setIsModalOpen(true);
+  };
+  const handleDelete = async (id) => {
+    if (confirm("Are you sure you want to delete this product?")) {
+      try {
+        const response = await fetch(`/payment-plugin/products/${id}`, {
+          method: "DELETE"
+        });
+        if (!response.ok) {
+          throw new Error("Failed to delete product");
+        }
+        fetchProducts();
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Products" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", style: { marginBottom: "1rem" }, children: error }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading products..." }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { children: "Create product" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Header, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: currentProduct ? currentProduct.id ? "Edit Product" : "Create Product" : "Product" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.CloseButton, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        borderRadius: "4px",
+        border: "1px solid #e0e0e0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", children: product.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            product.price,
+            " ",
+            product.currency,
+            " ",
+            product.isSubscription ? `/ ${product.subscriptionInterval}` : ""
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", style: { marginTop: "1rem" }, children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { style: { marginTop: "1rem", gap: "1rem" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => handleEdit(product), children: "Edit" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger", onClick: () => handleDelete(product.id), children: "Delete" })
+          ] })
+        ]
+      },
+      product.id
+    ) }, product.id)) })
+  ] }) });
+};
+const SubscriptionsPage = () => {
+  const [subscriptions, setSubscriptions] = react.useState([]);
+  const [products, setProducts] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [currentSubscription, setCurrentSubscription] = react.useState(null);
+  const fetchSubscriptions = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/payment-plugin/subscriptions");
+      if (!response.ok) {
+        throw new Error("Failed to fetch subscriptions");
+      }
+      const data = await response.json();
+      setSubscriptions(data);
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const fetchProducts = async () => {
+    try {
+      const response = await fetch("/payment-plugin/products");
+      if (!response.ok) {
+        throw new Error("Failed to fetch products");
+      }
+      const data = await response.json();
+      setProducts(data);
+    } catch (err) {
+      console.error("Failed to fetch products:", err);
+    }
+  };
+  react.useEffect(() => {
+    fetchSubscriptions();
+    fetchProducts();
+  }, []);
+  const handleEdit = (subscription) => {
+    setCurrentSubscription(subscription);
+    setIsModalOpen(true);
+  };
+  const handleDelete = async (id) => {
+    if (confirm("Are you sure you want to delete this subscription?")) {
+      try {
+        const response = await fetch(`/payment-plugin/subscriptions/${id}`, {
+          method: "DELETE"
+        });
+        if (!response.ok) {
+          throw new Error("Failed to delete subscription");
+        }
+        fetchSubscriptions();
+      } catch (err) {
+        if (err instanceof Error) {
+          setError(err.message);
+        } else {
+          setError("An unknown error occurred");
+        }
+      }
+    }
+  };
+  const handleSubmit = async (values) => {
+    if (!currentSubscription) return;
+    try {
+      const method = currentSubscription.id ? "PUT" : "POST";
+      const url = currentSubscription.id ? `/payment-plugin/subscriptions/${currentSubscription.id}` : "/payment-plugin/subscriptions";
+      const response = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ data: values })
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to ${currentSubscription.id ? "update" : "create"} subscription`);
+      }
+      setIsModalOpen(false);
+      fetchSubscriptions();
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, background: "neutral0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", as: "h1", textColor: "primary600", style: { marginBottom: "2rem" }, children: "Subscriptions" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", style: { marginBottom: "1rem" }, children: error }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loading subscriptions..." }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { children: "Create subscription" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: currentSubscription ? currentSubscription.id ? "Edit Subscription" : "Create Subscription" : "Subscription" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+          formik.Formik,
+          {
+            initialValues: {
+              id: currentSubscription?.id || 0,
+              product: currentSubscription?.product || { id: 0, name: "" },
+              user: currentSubscription?.user || { id: 0, email: "" },
+              status: currentSubscription?.status || "active",
+              startDate: currentSubscription?.startDate || (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+              endDate: currentSubscription?.endDate || ""
+            },
+            onSubmit: handleSubmit,
+            children: ({ values, handleChange, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsx(formik.Form, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.SingleSelect,
+                {
+                  placeholder: "Product",
+                  name: "product.id",
+                  value: values.product.id || "",
+                  onChange: (e) => {
+                    const selectedProduct = products.find(
+                      (p) => p.id === parseInt(e.target.value)
+                    );
+                    setFieldValue("product", selectedProduct || { id: 0, name: "" });
+                  },
+                  required: true,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a product" }),
+                    products.map((product) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: product.id, children: product.name }, product.id))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  placeholder: "User Email",
+                  name: "user.email",
+                  value: values.user.email,
+                  onChange: handleChange,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.SingleSelect,
+                {
+                  placeholder: "Status",
+                  name: "status",
+                  value: values.status,
+                  onChange: handleChange,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "active", children: "Active" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "canceled", children: "Canceled" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "past_due", children: "Past Due" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unpaid", children: "Unpaid" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "trialing", children: "Trialing" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  placeholder: "Start Date",
+                  name: "startDate",
+                  type: "date",
+                  value: values.startDate,
+                  onChange: handleChange,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  placeholder: "End Date",
+                  name: "endDate",
+                  type: "date",
+                  value: values.endDate,
+                  onChange: handleChange
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", style: { marginTop: "1rem" }, children: currentSubscription?.id ? "Update" : "Create" })
+            ] }) })
+          }
+        ) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: subscriptions.map((subscription) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        borderRadius: "4px",
+        border: "1px solid #e0e0e0",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "neutral800", children: subscription.product.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            "User: ",
+            subscription.user.email
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            "Status: ",
+            subscription.status
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            "Start Date: ",
+            subscription.startDate
+          ] }),
+          subscription.endDate && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
+            "End Date: ",
+            subscription.endDate
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { style: { marginTop: "1rem", gap: "1rem" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => handleEdit(subscription), children: "Edit" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger", onClick: () => handleDelete(subscription.id), children: "Delete" })
+          ] })
+        ]
+      },
+      subscription.id
+    ) }, subscription.id)) })
+  ] }) });
+};
+const NavigationMenu = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      background: "neutral100",
+      padding: 4,
+      width: "200px",
+      height: "100vh",
+      position: "fixed",
+      top: 0,
+      left: 100,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h1", style: { marginBottom: "2rem" }, children: "Payment Plugin" }),
+        /* @__PURE__ */ jsxRuntime.jsx("nav", { children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { style: { listStyle: "none", padding: 0, fontSize: "14px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Home"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/dashboard",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Dashboard"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/transactions",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Transactions"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/products",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Products"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/subscriptions",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Subscriptions"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.NavLink,
+            {
+              to: "/plugins/payment-plugin/configuration",
+              style: ({ isActive }) => ({
+                color: isActive ? "#7b79ff" : "inherit",
+                textDecoration: "none"
+              }),
+              children: "Configuration"
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+};
+const App = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "200px", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/dashboard", element: /* @__PURE__ */ jsxRuntime.jsx(DashboardPage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/transactions", element: /* @__PURE__ */ jsxRuntime.jsx(TransactionsPage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/products", element: /* @__PURE__ */ jsxRuntime.jsx(ProductsPage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/subscriptions", element: /* @__PURE__ */ jsxRuntime.jsx(SubscriptionsPage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/configuration", element: /* @__PURE__ */ jsxRuntime.jsx(ConfigurationPage, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+    ] }) })
+  ] });
+};
+exports.App = App;