@reeboot/strapi-payment-plugin 0.0.1 → 0.0.3

package/dist/_chunks/Analytics-DSJqY9ng.mjs

@@ -0,0 +1,355 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Box, Typography, Flex, ProgressBar, Grid, Loader, EmptyStateLayout, Button, SingleSelect, SingleSelectOption, Card, Badge, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
+import { useIntl } from "react-intl";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID } from "./index-DS_PYNkf.mjs";
+const AnalyticsChart = ({ data, currency = "usd", type }) => {
+  const formatCurrency = (amount) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency.toUpperCase()
+    }).format(amount);
+  };
+  const formatNumber = (num) => {
+    return new Intl.NumberFormat("en-US").format(num);
+  };
+  const renderLineChart = (trendData) => {
+    const maxRevenue = Math.max(...trendData.revenue);
+    const maxPayments = Math.max(...trendData.payments);
+    const maxCustomers = Math.max(...trendData.customers);
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Revenue Trend" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "row", gap: 8, children: trendData.labels.map((label, index) => {
+          const revenueValue = trendData.revenue[index];
+          const percentage = revenueValue / maxRevenue * 100;
+          console.log("Revenue Value:", revenueValue, "Percentage:", percentage);
+          console.log("trend data:", trendData);
+          return /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", fontWeight: "bold", children: formatCurrency(revenueValue) }) }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage })
+          ] }, index);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Payments Trend" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: trendData.labels.map((label, index) => {
+          const paymentsValue = trendData.payments[index];
+          const percentage = paymentsValue / maxPayments * 100;
+          return /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", fontWeight: "bold", children: formatNumber(paymentsValue) }) }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage })
+          ] }, index);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Customer Growth" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: trendData.labels.map((label, index) => {
+          const customersValue = trendData.customers[index];
+          const percentage = customersValue / maxCustomers * 100;
+          return /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", fontWeight: "bold", children: formatNumber(customersValue) }) }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage })
+          ] }, index);
+        }) })
+      ] }) })
+    ] }) });
+  };
+  const renderPieChart = (paymentData) => {
+    const colors = ["#4945FF", "#0F9D58", "#FF6B35", "#9C27B0", "#FF9800"];
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 3, children: paymentData.map((item, index) => /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                width: "12px",
+                height: "12px",
+                backgroundColor: colors[index % colors.length],
+                borderRadius: "50%"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", fontWeight: "bold", children: item.method })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", textColor: "neutral600", children: [
+          item.percentage,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { value: item.percentage }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "epsilon", textColor: "neutral600", marginTop: 1, children: [
+        formatNumber(item.count),
+        " transactions"
+      ] })
+    ] }, index)) }) });
+  };
+  const renderBarChart = (chartData) => {
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: "Bar chart visualization coming soon..." }) });
+  };
+  const renderChart = () => {
+    switch (type) {
+      case "line":
+        return renderLineChart(data);
+      case "pie":
+        return renderPieChart(data);
+      case "bar":
+        return renderBarChart();
+      default:
+        return /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "danger500", children: "Invalid chart type" });
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { children: renderChart() });
+};
+const Analytics = () => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const [analyticsData, setAnalyticsData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [dateRange, setDateRange] = useState("30d");
+  const [currency, setCurrency] = useState("usd");
+  useEffect(() => {
+    fetchAnalyticsData();
+  }, [dateRange, currency]);
+  const fetchAnalyticsData = async () => {
+    try {
+      setLoading(true);
+      const { data } = await get(`/${PLUGIN_ID}/admin/analytics?period=${dateRange}`);
+      if (data.success && data.data) {
+        const dailyStats = data.data.dailyStats || {};
+        const labels = Object.keys(dailyStats).sort();
+        const revenue = labels.map((label) => dailyStats[label].amount);
+        const payments = labels.map((label) => dailyStats[label].count);
+        setAnalyticsData({
+          revenue: {
+            total: data.data.totalVolume,
+            growth: 0,
+            period: `Last ${dateRange}`
+          },
+          payments: {
+            total: data.data.totalTransactions,
+            successRate: 100,
+            averageAmount: data.data.averageTransaction,
+            period: `Last ${dateRange}`
+          },
+          customers: {
+            total: 0,
+            newCustomers: 0,
+            returningCustomers: 0,
+            period: `Last ${dateRange}`
+          },
+          trends: {
+            labels,
+            revenue,
+            payments,
+            customers: Array(labels.length).fill(0)
+          },
+          topProducts: [],
+          paymentMethods: [],
+          geographicData: []
+        });
+      }
+      setLoading(false);
+    } catch (err) {
+      setError("Failed to fetch analytics data");
+      setLoading(false);
+    }
+  };
+  const formatCurrency = (amount, currency2 = "usd") => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currency2.toUpperCase()
+    }).format(amount);
+  };
+  const exportReport = () => {
+    if (!analyticsData) return;
+    const csvContent = [
+      ["Analytics Report", (/* @__PURE__ */ new Date()).toLocaleDateString()],
+      [""],
+      ["SUMMARY"],
+      ["Total Revenue", formatCurrency(analyticsData.revenue.total, currency)],
+      ["Revenue Growth", `${analyticsData.revenue.growth}%`],
+      ["Total Payments", analyticsData.payments.total.toString()],
+      ["Success Rate", `${analyticsData.payments.successRate}%`],
+      ["Average Amount", formatCurrency(analyticsData.payments.averageAmount, currency)],
+      ["Total Customers", analyticsData.customers.total.toString()],
+      ["New Customers", analyticsData.customers.newCustomers.toString()],
+      [""],
+      ["TOP PRODUCTS"],
+      ["Product Name", "Revenue", "Quantity Sold"],
+      ...analyticsData.topProducts.map((product) => [
+        product.name,
+        formatCurrency(product.revenue, currency),
+        product.quantity.toString()
+      ]),
+      [""],
+      ["PAYMENT METHODS"],
+      ["Method", "Count", "Percentage"],
+      ...analyticsData.paymentMethods.map((method) => [
+        method.method,
+        method.count.toString(),
+        `${method.percentage}%`
+      ]),
+      [""],
+      ["GEOGRAPHIC DATA"],
+      ["Country", "Revenue", "Transactions"],
+      ...analyticsData.geographicData.map((geo) => [
+        geo.country,
+        formatCurrency(geo.revenue, currency),
+        geo.transactions.toString()
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `payment-analytics-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(
+      EmptyStateLayout,
+      {
+        title: "Error loading analytics",
+        subtitle: error,
+        action: /* @__PURE__ */ jsx(Button, { onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.retry", defaultMessage: "Retry" }) })
+      }
+    ) });
+  }
+  if (!analyticsData) return null;
+  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, children: [
+    /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.analytics.title", defaultMessage: "Analytics" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+          id: "payment-plugin.analytics.subtitle",
+          defaultMessage: "Payment insights and performance metrics"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: dateRange,
+            onChange: (value) => setDateRange(value),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "7d", children: "Last 7 days" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "30d", children: "Last 30 days" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "90d", children: "Last 90 days" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "1y", children: "Last year" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: currency,
+            onChange: (value) => setCurrency(value),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "usd", children: "USD" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "eur", children: "EUR" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "gbp", children: "GBP" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: exportReport, children: formatMessage({ id: "payment-plugin.analytics.export", defaultMessage: "Export Report" }) }),
+        /* @__PURE__ */ jsx(Button, { onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.refresh", defaultMessage: "Refresh" }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(Badge, { size: "S", backgroundColor: "success", children: [
+            "+",
+            analyticsData.revenue.growth,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: analyticsData.revenue.period })
+        ] })
+      ] }) }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.successRate", defaultMessage: "Success Rate" }) }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "delta", fontWeight: "bold", children: [
+          analyticsData.payments.successRate,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
+          { id: "payment-plugin.analytics.outOfPayments", defaultMessage: "{total} payments" },
+          { total: analyticsData.payments.total }
+        ) })
+      ] }) }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.averageAmount", defaultMessage: "Average Amount" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: analyticsData.payments.period })
+      ] }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 8, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(Box, { padding: 4, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.analytics.trends", defaultMessage: "Revenue Trends" }) }),
+        /* @__PURE__ */ jsx(
+          AnalyticsChart,
+          {
+            data: analyticsData.trends,
+            currency,
+            type: "line"
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.analytics.paymentMethods", defaultMessage: "Payment Methods" }) }),
+        /* @__PURE__ */ jsx(
+          AnalyticsChart,
+          {
+            data: analyticsData.paymentMethods,
+            type: "pie"
+          }
+        )
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.analytics.topProducts", defaultMessage: "Top Products" }) }),
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.product", defaultMessage: "Product" }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.revenue", defaultMessage: "Revenue" }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.quantity", defaultMessage: "Quantity" }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: analyticsData.topProducts.map((product, index) => /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: product.name }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatCurrency(product.revenue, currency) }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: product.quantity }) })
+          ] }, index)) })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", marginBottom: 4, children: formatMessage({ id: "payment-plugin.analytics.geographic", defaultMessage: "Geographic Distribution" }) }),
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.country", defaultMessage: "Country" }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.revenue", defaultMessage: "Revenue" }) }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: formatMessage({ id: "payment-plugin.analytics.transactions", defaultMessage: "Transactions" }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: analyticsData.geographicData.map((geo, index) => /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", children: geo.country }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatCurrency(geo.revenue, currency) }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: geo.transactions }) })
+          ] }, index)) })
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  Analytics
+};