@reeboot/strapi-payment-plugin 0.0.0 → 0.0.2

package/dist/_chunks/App-BGle38NN.js

@@ -1,1149 +0,0 @@
-"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;