@reeboot/strapi-payment-plugin 0.0.0 → 0.0.1

package/dist/_chunks/{App-BGle38NN.js → App-KZVBFRwo.js}

@@ -6,164 +6,6 @@ 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("");
@@ -171,6 +13,7 @@ const ConfigurationPage = () => {
   const [paypalClientId, setPaypalClientId] = react.useState("");
   const [paypalClientSecret, setPaypalClientSecret] = react.useState("");
   const [paypalWebhookId, setPaypalWebhookId] = react.useState("");
+  const [returnURL, setReturnURL] = react.useState(`${window.location.origin}/strapi-payment-plugin/webhook/stripe`);
   const [configStatus, setConfigStatus] = react.useState({
     stripe: false,
     paypal: false
@@ -178,7 +21,7 @@ const ConfigurationPage = () => {
   react.useEffect(() => {
     const fetchConfigStatus = async () => {
       try {
-        const response = await fetch("/payment-plugin/config-status");
+        const response = await fetch("/strapi-payment-plugin/config-status");
         if (response.ok) {
           const data = await response.json();
           setConfigStatus(data);
@@ -190,7 +33,7 @@ const ConfigurationPage = () => {
     fetchConfigStatus();
   }, []);
   const handleSave = async () => {
-    const response = await fetch("/payment-plugin/config", {
+    const response = await fetch("/strapi-payment-plugin/config", {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
@@ -214,10 +57,90 @@ const ConfigurationPage = () => {
       alert("Failed to save configuration");
     }
   };
+  async function onclickTest() {
+    try {
+      const returnUrl = returnURL;
+      const response = await fetch("/strapi-payment-plugin/test-payment", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          amount: 1e3,
+          // $10.00
+          currency: "usd",
+          paymentMethod: "pm_card_visa",
+          // Test card
+          returnUrl
+        })
+      });
+      if (response.ok) {
+        const result = await response.json();
+        alert(`Payment successful!
+Payment ID: ${result.paymentId}
+Return URL: ${returnUrl}`);
+      } else {
+        const error = await response.json();
+        alert(`Payment failed:
+${error.message}`);
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        alert(`Error testing payment:
+${err.message}`);
+      } else {
+        alert("An unknown error occurred while testing payment");
+      }
+    }
+  }
+  async function onclickTestWithRedirect() {
+    try {
+      const returnUrl = returnURL;
+      const response = await fetch("/strapi-payment-plugin/test-payment-with-redirect", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          productId: "price_1Rryf5FYBY9tFLhrxZRaCvC8"
+          // Example product ID
+        })
+      });
+      if (response.ok) {
+        const result = await response.json();
+        if (result.paymentLink) {
+          window.location.href = result.paymentLink;
+        } else {
+          alert(`Payment successful!
+Payment ID: ${result.paymentId}`);
+        }
+      } else {
+        const error = await response.json();
+        alert(`Payment failed:
+${error.message}`);
+      }
+    } catch (err) {
+      if (err instanceof Error) {
+        alert(`Error testing payment:
+${err.message}`);
+      } else {
+        alert("An unknown error occurred while testing payment");
+      }
+    }
+  }
   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.jsx(
+        designSystem.Typography,
+        {
+          variant: "alpha",
+          as: "h1",
+          textColor: "primary600",
+          style: { marginBottom: "2rem" },
+          children: "Payment Configuration"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.Box,
         {
@@ -227,32 +150,67 @@ const ConfigurationPage = () => {
           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.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(
+                    "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.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"
+                    }
+                  )
                 ] })
               ] }) })
             ] }),
@@ -266,7 +224,16 @@ const ConfigurationPage = () => {
                   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.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,
@@ -325,7 +292,16 @@ const ConfigurationPage = () => {
                   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.jsx(
+                      designSystem.Typography,
+                      {
+                        variant: "gamma",
+                        as: "h3",
+                        textColor: "neutral800",
+                        style: { marginBottom: "1rem" },
+                        children: "PayPal Configuration (not implemented for now)"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 8, alignItems: "initial", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         designSystem.TextInput,
@@ -334,7 +310,7 @@ const ConfigurationPage = () => {
                           name: "paypalClientId",
                           value: paypalClientId,
                           onChange: (e) => setPaypalClientId(e.target.value),
-                          disabled: configStatus.paypal,
+                          disabled: true,
                           style: {
                             border: configStatus.paypal ? "2px solid #4CAF50" : "",
                             width: "100%"
@@ -350,7 +326,7 @@ const ConfigurationPage = () => {
                           value: paypalClientSecret,
                           onChange: (e) => setPaypalClientSecret(e.target.value),
                           type: "password",
-                          disabled: configStatus.paypal,
+                          disabled: true,
                           style: {
                             border: configStatus.paypal ? "2px solid #4CAF50" : ""
                           },
@@ -365,7 +341,7 @@ const ConfigurationPage = () => {
                           name: "paypalWebhookId",
                           value: paypalWebhookId,
                           onChange: (e) => setPaypalWebhookId(e.target.value),
-                          disabled: configStatus.paypal,
+                          disabled: true,
                           style: {
                             border: configStatus.paypal ? "2px solid #4CAF50" : ""
                           },
@@ -380,12 +356,63 @@ const ConfigurationPage = () => {
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSave, style: { marginTop: "1rem" }, children: "Save Configuration" })
           ]
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          borderRadius: "4px",
+          border: "1px solid #e0e0e0",
+          style: { marginTop: "2rem" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                variant: "beta",
+                as: "h2",
+                textColor: "neutral800",
+                style: { marginBottom: "1rem" },
+                children: "Stripe Payment Testing"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "1rem" }, children: "Test Stripe payment generation and handling" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                placeholder: "Return URL (e.g., https://example.com/return)",
+                name: "returnUrl",
+                id: "returnUrl",
+                style: { marginBottom: "1rem", width: "100%" },
+                value: returnURL,
+                onChange: (e) => setReturnURL(e.target.value),
+                defaultValue: `${window.location.origin}/strapi-payment-plugin/webhook/stripe`
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                onClick: onclickTest,
+                style: { marginBottom: "1rem" },
+                children: "Test Stripe Payment"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                onClick: onclickTestWithRedirect,
+                style: { marginBottom: "1rem", marginLeft: "1rem" },
+                children: "Test Stripe Payment with Redirect"
+              }
+            )
+          ]
+        }
       )
     ] }) })
   ] });
 };
 const TransactionList = ({ transactions, onViewDetails, onStatusUpdate }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { style: { fontSize: "14px" }, 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" }),
@@ -393,6 +420,7 @@ const TransactionList = ({ transactions, onViewDetails, onStatusUpdate }) => {
       /* @__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: "Gateway" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Actions" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: transactions.map((transaction) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
@@ -418,6 +446,7 @@ const TransactionList = ({ transactions, onViewDetails, onStatusUpdate }) => {
       ) : 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: transaction.gateway }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", size: "S", onClick: () => onViewDetails(transaction), children: "View" }) })
     ] }, transaction.id)) })
   ] });
@@ -492,7 +521,7 @@ const TransactionsPage = () => {
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch("/payment-plugin/transactions");
+      const response = await fetch("/strapi-payment-plugin/transactions?gateway=all&status=all");
       if (!response.ok) {
         throw new Error("Failed to fetch transactions");
       }
@@ -529,7 +558,7 @@ const TransactionsPage = () => {
   const handleRefund = async () => {
     if (!selectedTransaction) return;
     try {
-      const response = await fetch("/payment-plugin/refund", {
+      const response = await fetch("/strapi-payment-plugin/refund", {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -560,19 +589,6 @@ const TransactionsPage = () => {
       }
     }
   };
-  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: [
@@ -612,8 +628,7 @@ const TransactionsPage = () => {
                 TransactionList,
                 {
                   transactions: filteredTransactions,
-                  onViewDetails: handleViewDetails,
-                  onStatusUpdate: handleStatusUpdate
+                  onViewDetails: handleViewDetails
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No transactions found" }) })
             ] })
@@ -645,19 +660,14 @@ const DashboardPage = () => {
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch("/payment-plugin/transactions");
+      const response = await fetch("/strapi-payment-plugin/transactions?gateway=all&status=all");
       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 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,
@@ -690,53 +700,90 @@ const DashboardPage = () => {
           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" }),
+            /* @__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.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Box,
+                {
+                  padding: 4,
+                  background: "neutral0",
+                  borderRadius: "4px",
+                  border: "1px solid #e0e0e0",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", direction: "column", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral800", children: "Total Revenues" }),
+                    /* @__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.jsx(
+                designSystem.Box,
+                {
+                  padding: 4,
+                  background: "neutral0",
+                  borderRadius: "4px",
+                  border: "1px solid #e0e0e0",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", direction: "column", 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.jsx(
+                designSystem.Box,
+                {
+                  padding: 4,
+                  background: "neutral0",
+                  borderRadius: "4px",
+                  border: "1px solid #e0e0e0",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", direction: "column", 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" }) })
-          ]
-        }
-      )
+      /* @__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 [stripeProducts, setStripeProducts] = react.useState([]);
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [isModalOpen, setIsModalOpen] = react.useState(false);
@@ -745,7 +792,7 @@ const ProductsPage = () => {
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch("/payment-plugin/products");
+      const response = await fetch("/strapi-payment-plugin/products");
       if (!response.ok) {
         throw new Error("Failed to fetch products");
       }
@@ -761,17 +808,51 @@ const ProductsPage = () => {
       setLoading(false);
     }
   };
+  const fetchStripeProducts = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch("/strapi-payment-plugin/products/stripeProducts");
+      if (!response.ok) {
+        throw new Error("Failed to fetch Stripe products");
+      }
+      const data = await response.json();
+      console.log("Stripe Products:", data);
+      setStripeProducts(data);
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
   react.useEffect(() => {
     fetchProducts();
+    fetchStripeProducts();
   }, []);
-  const handleEdit = (product) => {
-    setCurrentProduct(product);
+  const handleCreate = () => {
+    setCurrentProduct({
+      documentId: "",
+      id: 0,
+      name: "",
+      description: "",
+      price: 0,
+      currency: "USD",
+      isSubscription: false,
+      subscriptionInterval: "month"
+    });
     setIsModalOpen(true);
   };
+  const handleEdit = (product) => {
+    location.href = `/admin/content-manager/collection-types/plugin::strapi-payment-plugin.product/${product.documentId}`;
+  };
   const handleDelete = async (id) => {
     if (confirm("Are you sure you want to delete this product?")) {
       try {
-        const response = await fetch(`/payment-plugin/products/${id}`, {
+        const response = await fetch(`/strapi-payment-plugin/products/${id}`, {
           method: "DELETE"
         });
         if (!response.ok) {
@@ -787,20 +868,179 @@ const ProductsPage = () => {
       }
     }
   };
+  const handleSync = async (id) => {
+    try {
+      const response = await fetch(`/strapi-payment-plugin/products/${id}/sync`, {
+        method: "POST"
+      });
+      if (!response.ok) {
+        throw new Error("Failed to sync product");
+      }
+      const result = await response.json();
+      alert(result.message);
+      fetchProducts();
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+  const handleImport = async (stripeProductId) => {
+    try {
+      const response = await fetch("/strapi-payment-plugin/products/import", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ stripeProductId })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to import product");
+      }
+      const result = await response.json();
+      alert(result.message);
+      fetchProducts();
+      fetchStripeProducts();
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError("An unknown error occurred");
+      }
+    }
+  };
+  const handleSubmit = async (values) => {
+    if (!currentProduct) return;
+    try {
+      const method = currentProduct.id ? "PUT" : "POST";
+      const url = currentProduct.id ? `/strapi-payment-plugin/products/${currentProduct.id}` : "/strapi-payment-plugin/products";
+      const response = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ data: values })
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to ${currentProduct.id ? "update" : "create"} product`);
+      }
+      setIsModalOpen(false);
+      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.Root, { open: isModalOpen, onOpenChange: setIsModalOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleCreate, 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.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: currentProduct ? currentProduct.id ? "Edit Product" : "Create Product" : "Product" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          formik.Formik,
+          {
+            initialValues: {
+              documentId: currentProduct?.documentId || "",
+              id: currentProduct?.id || 0,
+              name: currentProduct?.name || "",
+              description: currentProduct?.description || "",
+              price: currentProduct?.price || 0,
+              currency: currentProduct?.currency || "USD",
+              isSubscription: currentProduct?.isSubscription || false,
+              subscriptionInterval: currentProduct?.subscriptionInterval || "month"
+            },
+            onSubmit: handleSubmit,
+            children: ({ values, handleChange, setFieldValue }) => /* @__PURE__ */ jsxRuntime.jsx(formik.Form, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", direction: "column", gap: 4, col: 12, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  label: "Name",
+                  name: "name",
+                  placeHolder: "Product Name",
+                  value: values.name,
+                  onChange: handleChange,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Textarea,
+                {
+                  label: "Description",
+                  name: "description",
+                  placeholder: "Product Description",
+                  value: values.description,
+                  onChange: handleChange
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  label: "Price",
+                  name: "price",
+                  type: "number",
+                  placeholder: "Product Price",
+                  value: values.price,
+                  onChange: handleChange,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.SingleSelect,
+                {
+                  label: "Currency",
+                  name: "currency",
+                  placeholder: "Select Currency",
+                  value: values.currency,
+                  onChange: handleChange,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "USD", children: "USD" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "EUR", children: "EUR" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "GBP", children: "GBP" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral800", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  formik.Field,
+                  {
+                    type: "checkbox",
+                    name: "isSubscription",
+                    checked: values.isSubscription,
+                    onChange: () => setFieldValue("isSubscription", !values.isSubscription)
+                  }
+                ),
+                " Is Subscription"
+              ] }) }),
+              values.isSubscription && /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.SingleSelect,
+                {
+                  label: "Subscription Interval",
+                  name: "subscriptionInterval",
+                  value: values.subscriptionInterval,
+                  onChange: handleChange,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "day", children: "Day" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "week", children: "Week" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "month", children: "Month" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "year", children: "Year" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", style: { marginTop: "1rem" }, children: currentProduct?.id ? "Update" : "Create" })
+            ] }) })
+          }
+        ) })
       ] })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "primary600", style: { margin: "2rem 0 1rem" }, children: "Local Products" }),
     /* @__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,
       {
@@ -818,13 +1058,38 @@ const ProductsPage = () => {
             product.isSubscription ? `/ ${product.subscriptionInterval}` : ""
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", style: { marginTop: "1rem" }, children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", style: { marginTop: "1rem" }, children: product.stripeProductId ? "✅ Synced with Stripe" : "⚠️ Not synced with Stripe" }),
           /* @__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" })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger", onClick: () => handleDelete(product.id), children: "Delete" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleSync(product.id), children: product.stripeProductId ? "Sync" : "Create in Stripe" })
           ] })
         ]
       },
       product.id
+    ) }, product.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", textColor: "primary600", style: { margin: "2rem 0 1rem" }, children: "Stripe Products (Available for Import)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: stripeProducts.filter(
+      (product) => !products.some((localProduct) => localProduct.stripeProductId === product.id)
+    ).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: "red", children: [
+            product?.default_price?.unit_amount / 100,
+            " ",
+            product?.default_price?.currency
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", style: { marginTop: "1rem" }, children: product.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { style: { marginTop: "1rem", gap: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleImport(product.id), children: "Import from Stripe" }) })
+        ]
+      },
+      product.id
     ) }, product.id)) })
   ] }) });
 };
@@ -839,7 +1104,7 @@ const SubscriptionsPage = () => {
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch("/payment-plugin/subscriptions");
+      const response = await fetch("/strapi-payment-plugin/subscriptions");
       if (!response.ok) {
         throw new Error("Failed to fetch subscriptions");
       }
@@ -857,7 +1122,7 @@ const SubscriptionsPage = () => {
   };
   const fetchProducts = async () => {
     try {
-      const response = await fetch("/payment-plugin/products");
+      const response = await fetch("/strapi-payment-plugin/products");
       if (!response.ok) {
         throw new Error("Failed to fetch products");
       }
@@ -878,7 +1143,7 @@ const SubscriptionsPage = () => {
   const handleDelete = async (id) => {
     if (confirm("Are you sure you want to delete this subscription?")) {
       try {
-        const response = await fetch(`/payment-plugin/subscriptions/${id}`, {
+        const response = await fetch(`/strapi-payment-plugin/subscriptions/${id}`, {
           method: "DELETE"
         });
         if (!response.ok) {
@@ -898,7 +1163,7 @@ const SubscriptionsPage = () => {
     if (!currentSubscription) return;
     try {
       const method = currentSubscription.id ? "PUT" : "POST";
-      const url = currentSubscription.id ? `/payment-plugin/subscriptions/${currentSubscription.id}` : "/payment-plugin/subscriptions";
+      const url = currentSubscription.id ? `/strapi-payment-plugin/subscriptions/${currentSubscription.id}` : "/strapi-payment-plugin/subscriptions";
       const response = await fetch(url, {
         method,
         headers: {
@@ -919,6 +1184,25 @@ const SubscriptionsPage = () => {
       }
     }
   };
+  const handleSync = async (id) => {
+    try {
+      const response = await fetch(`/strapi-payment-plugin/subscriptions/${id}/sync`, {
+        method: "POST"
+      });
+      if (!response.ok) {
+        throw new Error("Failed to sync subscription");
+      }
+      const result = await response.json();
+      alert(result.message);
+      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 }),
@@ -932,7 +1216,7 @@ const SubscriptionsPage = () => {
           {
             initialValues: {
               id: currentSubscription?.id || 0,
-              product: currentSubscription?.product || { id: 0, name: "" },
+              product: currentSubscription?.product || { documentId: "", name: "", description: "", id: 0 },
               user: currentSubscription?.user || { id: 0, email: "" },
               status: currentSubscription?.status || "active",
               startDate: currentSubscription?.startDate || (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
@@ -944,18 +1228,16 @@ const SubscriptionsPage = () => {
                 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: "" });
+                  name: "product.documentId",
+                  value: values.product.documentId || "",
+                  onChange: (selectedDocumentId) => {
+                    setFieldValue("product", products.find((product) => product.documentId === selectedDocumentId));
+                    setFieldValue("product.documentId", selectedDocumentId);
                   },
                   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.SingleSelectOption, { value: "", children: "Select a product" }),
+                    products.map((product) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: product.documentId, children: product.name }, product.id))
                   ]
                 }
               ),
@@ -975,13 +1257,15 @@ const SubscriptionsPage = () => {
                   placeholder: "Status",
                   name: "status",
                   value: values.status,
-                  onChange: handleChange,
+                  onChange: (selectedStatus) => {
+                    setFieldValue("status", selectedStatus);
+                  },
                   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.SingleSelectOption, { value: "active", children: "Active" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "canceled", children: "Canceled" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "past_due", children: "Past Due" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "unpaid", children: "Unpaid" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "trialing", children: "Trialing" })
                   ]
                 }
               ),
@@ -1037,9 +1321,11 @@ const SubscriptionsPage = () => {
             "End Date: ",
             subscription.endDate
           ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", style: { marginTop: "1rem" }, children: subscription.stripeSubscriptionId ? "✅ Synced with Stripe" : "⚠️ Not synced with Stripe" }),
           /* @__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" })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger", onClick: () => handleDelete(subscription.id), children: "Delete" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: () => handleSync(subscription.id), children: subscription.stripeSubscriptionId ? "Sync" : "Create in Stripe" })
           ] })
         ]
       },
@@ -1064,18 +1350,7 @@ const NavigationMenu = () => {
           /* @__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",
+              to: "/plugins/strapi-payment-plugin/dashboard",
               style: ({ isActive }) => ({
                 color: isActive ? "#7b79ff" : "inherit",
                 textDecoration: "none"
@@ -1086,7 +1361,7 @@ const NavigationMenu = () => {
           /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactRouterDom.NavLink,
             {
-              to: "/plugins/payment-plugin/transactions",
+              to: "/plugins/strapi-payment-plugin/transactions",
               style: ({ isActive }) => ({
                 color: isActive ? "#7b79ff" : "inherit",
                 textDecoration: "none"
@@ -1097,7 +1372,7 @@ const NavigationMenu = () => {
           /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactRouterDom.NavLink,
             {
-              to: "/plugins/payment-plugin/products",
+              to: "/plugins/strapi-payment-plugin/products",
               style: ({ isActive }) => ({
                 color: isActive ? "#7b79ff" : "inherit",
                 textDecoration: "none"
@@ -1108,7 +1383,7 @@ const NavigationMenu = () => {
           /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             reactRouterDom.NavLink,
             {
-              to: "/plugins/payment-plugin/subscriptions",
+              to: "/plugins/strapi-payment-plugin/subscriptions",
               style: ({ isActive }) => ({
                 color: isActive ? "#7b79ff" : "inherit",
                 textDecoration: "none"
@@ -1119,7 +1394,7 @@ const NavigationMenu = () => {
           /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
             reactRouterDom.NavLink,
             {
-              to: "/plugins/payment-plugin/configuration",
+              to: "/plugins/strapi-payment-plugin/configuration",
               style: ({ isActive }) => ({
                 color: isActive ? "#7b79ff" : "inherit",
                 textDecoration: "none"
@@ -1136,7 +1411,7 @@ 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, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "dashboard" }) }),
       /* @__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, {}) }),