@reeboot/strapi-payment-plugin 0.0.4 → 0.0.6

package/dist/_chunks/{Analytics-nBSdLT2v.js → Analytics-CLjtRWYA.js}

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-BqqrpI6D.js");
+const index = require("./index-CHEgJ7e5.js");
 const AnalyticsChart = ({ data, currency = "usd", type }) => {
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("en-US", {
@@ -17,42 +18,49 @@ const AnalyticsChart = ({ data, currency = "usd", type }) => {
     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__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Revenue Trend" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "row", gap: 8, children: trendData.labels.map((label, index2) => {
+    const maxRevenue = Math.max(...trendData.revenue, 1);
+    const maxPayments = Math.max(...trendData.payments, 1);
+    const maxCustomers = Math.max(...trendData.customers, 1);
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Daily Revenue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, children: trendData.labels.map((label, index2) => {
           const revenueValue = trendData.revenue[index2];
           const percentage = revenueValue / maxRevenue * 100;
-          console.log("Revenue Value:", revenueValue, "Percentage:", percentage);
-          console.log("trend data:", trendData);
           return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", fontWeight: "bold", children: formatCurrency(revenueValue) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage })
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: formatCurrency(revenueValue) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage, size: "S" })
           ] }, index2);
         }) })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Payments Trend" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: trendData.labels.map((label, index2) => {
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Daily Transactions" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, children: trendData.labels.map((label, index2) => {
           const paymentsValue = trendData.payments[index2];
           const percentage = paymentsValue / maxPayments * 100;
           return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", fontWeight: "bold", children: formatNumber(paymentsValue) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage })
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: formatNumber(paymentsValue) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage, size: "S" })
           ] }, index2);
         }) })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", fontWeight: "bold", children: "Customer Growth" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, children: trendData.labels.map((label, index2) => {
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Customers" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, children: trendData.labels.map((label, index2) => {
           const customersValue = trendData.customers[index2];
           const percentage = customersValue / maxCustomers * 100;
           return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", fontWeight: "bold", children: formatNumber(customersValue) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage })
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: formatNumber(customersValue) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ProgressBar, { value: percentage, size: "S" })
           ] }, index2);
         }) })
       ] }) })
@@ -213,10 +221,10 @@ const Analytics = () => {
     window.URL.revokeObjectURL(url);
   };
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.EmptyStateLayout,
       {
         title: "Error loading analytics",
@@ -226,7 +234,7 @@ const Analytics = () => {
     ) });
   }
   if (!analyticsData) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.analytics.title", defaultMessage: "Analytics" }) }),
@@ -261,38 +269,47 @@ const Analytics = () => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: exportReport, children: formatMessage({ id: "payment-plugin.analytics.export", defaultMessage: "Export Report" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.refresh", defaultMessage: "Refresh" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Download, {}), onClick: exportReport, children: formatMessage({ id: "payment-plugin.analytics.export", defaultMessage: "Export Report" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}), onClick: fetchAnalyticsData, children: formatMessage({ id: "payment-plugin.analytics.refresh", defaultMessage: "Refresh" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, marginBottom: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { size: "S", backgroundColor: "success", children: [
-            "+",
-            analyticsData.revenue.growth,
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, marginBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%", borderLeft: "4px solid #4945FF" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { size: "S", backgroundColor: "success", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.TrendUp, { width: "12px", height: "12px" }),
+              analyticsData.revenue.growth,
+              "%"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "vs prev period" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChartPie, { width: "24px", height: "24px" }) })
+      ] }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%", borderLeft: "4px solid #0F9D58" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.successRate", defaultMessage: "Success Rate" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: [
+            analyticsData.payments.successRate,
             "%"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: analyticsData.revenue.period })
-        ] })
-      ] }) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.successRate", defaultMessage: "Success Rate" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: [
-          analyticsData.payments.successRate,
-          "%"
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: formatMessage(
+            { id: "payment-plugin.analytics.outOfPayments", defaultMessage: "{total} total payments" },
+            { total: analyticsData.payments.total }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
-          { id: "payment-plugin.analytics.outOfPayments", defaultMessage: "{total} payments" },
-          { total: analyticsData.payments.total }
-        ) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckCircle, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({ id: "payment-plugin.analytics.averageAmount", defaultMessage: "Average Amount" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: analyticsData.payments.period })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { style: { width: "100%", borderLeft: "4px solid #9C27B0" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.averageAmount", defaultMessage: "Avg. Transaction" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Per successful payment" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, backgroundColor: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, { width: "24px", height: "24px" }) })
       ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, marginBottom: 4, children: [

package/dist/_chunks/{Analytics-DSJqY9ng.mjs → Analytics-CQmAVKsq.mjs}

@@ -1,9 +1,10 @@
 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 { Download, ArrowClockwise, TrendUp, ChartPie, CheckCircle, User } from "@strapi/icons";
 import { useIntl } from "react-intl";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID } from "./index-DS_PYNkf.mjs";
+import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
 const AnalyticsChart = ({ data, currency = "usd", type }) => {
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("en-US", {
@@ -15,42 +16,49 @@ const AnalyticsChart = ({ data, currency = "usd", type }) => {
     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 maxRevenue = Math.max(...trendData.revenue, 1);
+    const maxPayments = Math.max(...trendData.payments, 1);
+    const maxCustomers = Math.max(...trendData.customers, 1);
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Daily Revenue" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, 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 })
+            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatCurrency(revenueValue) })
+            ] }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage, size: "S" })
           ] }, 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) => {
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Daily Transactions" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, 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 })
+            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatNumber(paymentsValue) })
+            ] }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage, size: "S" })
           ] }, 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) => {
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral100", borderRadius: "4px", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", fontWeight: "bold", marginBottom: 4, display: "block", children: "Customers" }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, 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 })
+            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginBottom: 1, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: formatNumber(customersValue) })
+            ] }),
+            /* @__PURE__ */ jsx(ProgressBar, { value: percentage, size: "S" })
           ] }, index);
         }) })
       ] }) })
@@ -211,10 +219,10 @@ const Analytics = () => {
     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, {}) }) });
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "400px" }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       EmptyStateLayout,
       {
         title: "Error loading analytics",
@@ -224,7 +232,7 @@ const Analytics = () => {
     ) });
   }
   if (!analyticsData) return null;
-  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 10, paddingRight: 10, paddingTop: 4, children: [
+  return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: formatMessage({ id: "payment-plugin.analytics.title", defaultMessage: "Analytics" }) }),
@@ -259,38 +267,47 @@ const Analytics = () => {
             ]
           }
         ),
-        /* @__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__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Download, {}), onClick: exportReport, children: formatMessage({ id: "payment-plugin.analytics.export", defaultMessage: "Export Report" }) }),
+        /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(ArrowClockwise, {}), 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__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderLeft: "4px solid #4945FF" }, children: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.totalRevenue", defaultMessage: "Total Revenue" }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.revenue.total, currency) }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: "success", children: /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(TrendUp, { width: "12px", height: "12px" }),
+              analyticsData.revenue.growth,
+              "%"
+            ] }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "vs prev period" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "primary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(ChartPie, { width: "24px", height: "24px" }) })
+      ] }) }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderLeft: "4px solid #0F9D58" }, children: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.successRate", defaultMessage: "Success Rate" }) }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "alpha", fontWeight: "bold", children: [
+            analyticsData.payments.successRate,
             "%"
           ] }),
-          /* @__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: "pi", textColor: "neutral600", children: formatMessage(
+            { id: "payment-plugin.analytics.outOfPayments", defaultMessage: "{total} total payments" },
+            { total: analyticsData.payments.total }
+          ) })
         ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage(
-          { id: "payment-plugin.analytics.outOfPayments", defaultMessage: "{total} payments" },
-          { total: analyticsData.payments.total }
-        ) })
+        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "success100", borderRadius: "50%", children: /* @__PURE__ */ jsx(CheckCircle, { width: "24px", height: "24px" }) })
       ] }) }) }) }),
-      /* @__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__ */ jsx(Grid.Item, { col: 4, children: /* @__PURE__ */ jsx(Card, { style: { width: "100%", borderLeft: "4px solid #9C27B0" }, children: /* @__PURE__ */ jsx(Box, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", children: formatMessage({ id: "payment-plugin.analytics.averageAmount", defaultMessage: "Avg. Transaction" }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: formatCurrency(analyticsData.payments.averageAmount, currency) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Per successful payment" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { padding: 2, backgroundColor: "secondary100", borderRadius: "50%", children: /* @__PURE__ */ jsx(User, { width: "24px", height: "24px" }) })
       ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginBottom: 4, children: [

package/dist/_chunks/App-DXN62SV6.mjs

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, Suspense } from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useIntl } from "react-intl";
+import { Flex, Divider, Box, Searchbar, Loader } from "@strapi/design-system";
+import { SubNav } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID } from "./index-2Zd_T7bD.mjs";
+const Dashboard = React.lazy(() => import("./Dashboard-CuHC-dit.mjs").then((m) => ({ default: m.Dashboard })));
+const Payments = React.lazy(() => import("./Payments-FnhoV_2B.mjs").then((m) => ({ default: m.Payments })));
+const Orders = React.lazy(() => import("./Orders-65mNfu2i.mjs").then((m) => ({ default: m.Orders })));
+const Customers = React.lazy(() => import("./Customers-BQzVBQDT.mjs").then((m) => ({ default: m.Customers })));
+const Analytics = React.lazy(() => import("./Analytics-CQmAVKsq.mjs").then((m) => ({ default: m.Analytics })));
+const Settings = React.lazy(() => import("./Settings-EoLSuZLe.mjs").then((m) => ({ default: m.Settings })));
+const App = () => {
+  const { formatMessage } = useIntl();
+  const [searchValue, setSearchValue] = useState("");
+  const managementLinks = [
+    {
+      to: `/plugins/${PLUGIN_ID}/dashboard`,
+      label: formatMessage({ id: "payment-plugin.dashboard.title", defaultMessage: "Dashboard" })
+    },
+    {
+      to: `/plugins/${PLUGIN_ID}/payments`,
+      label: formatMessage({ id: "payment-plugin.payments.title", defaultMessage: "Payments" })
+    },
+    {
+      to: `/plugins/${PLUGIN_ID}/orders`,
+      label: formatMessage({ id: "payment-plugin.orders.title", defaultMessage: "Orders" })
+    },
+    {
+      to: `/plugins/${PLUGIN_ID}/customers`,
+      label: formatMessage({ id: "payment-plugin.customers.title", defaultMessage: "Customers" })
+    }
+  ];
+  const insightLinks = [
+    {
+      to: `/plugins/${PLUGIN_ID}/analytics`,
+      label: formatMessage({ id: "payment-plugin.analytics.title", defaultMessage: "Analytics" })
+    }
+  ];
+  const configLinks = [
+    {
+      to: `/plugins/${PLUGIN_ID}/settings`,
+      label: formatMessage({ id: "payment-plugin.settings.title", defaultMessage: "Settings" })
+    }
+  ];
+  const filterLinks = (links) => {
+    return links.filter(
+      (link) => link.label.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  };
+  const filteredManagementLinks = filterLinks(managementLinks);
+  const filteredInsightLinks = filterLinks(insightLinks);
+  const filteredConfigLinks = filterLinks(configLinks);
+  const pluginName = formatMessage({
+    id: "payment-plugin.plugin.name",
+    defaultMessage: "Payment Plugin"
+  });
+  return /* @__PURE__ */ jsxs(Flex, { alignItems: "stretch", children: [
+    /* @__PURE__ */ jsxs(SubNav.Main, { "aria-label": formatMessage({ id: "payment-plugin.nav.aria", defaultMessage: "Payment navigation" }), children: [
+      /* @__PURE__ */ jsx(SubNav.Header, { label: pluginName }),
+      /* @__PURE__ */ jsx(Divider, { background: "neutral150" }),
+      /* @__PURE__ */ jsxs(SubNav.Content, { children: [
+        /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(
+          Searchbar,
+          {
+            name: "searchbar",
+            onClear: () => setSearchValue(""),
+            value: searchValue,
+            onChange: (e) => setSearchValue(e.target.value),
+            clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+            placeholder: formatMessage({ id: "payment-plugin.nav.search.placeholder", defaultMessage: "Search..." }),
+            size: "S",
+            children: formatMessage({ id: "payment-plugin.nav.search.placeholder", defaultMessage: "Search..." })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(SubNav.Sections, { children: [
+          filteredManagementLinks.length > 0 && /* @__PURE__ */ jsx(SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.management", defaultMessage: "Management" }), children: filteredManagementLinks.map((link) => /* @__PURE__ */ jsx(
+            SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) }),
+          filteredInsightLinks.length > 0 && /* @__PURE__ */ jsx(SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.insights", defaultMessage: "Insights" }), children: filteredInsightLinks.map((link) => /* @__PURE__ */ jsx(
+            SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) }),
+          filteredConfigLinks.length > 0 && /* @__PURE__ */ jsx(SubNav.Section, { label: formatMessage({ id: "payment-plugin.nav.configuration", defaultMessage: "Configuration" }), children: filteredConfigLinks.map((link) => /* @__PURE__ */ jsx(
+            SubNav.Link,
+            {
+              to: link.to,
+              label: link.label
+            },
+            link.to
+          )) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flex: "1", padding: 5, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 12, children: /* @__PURE__ */ jsx(Loader, {}) }), children: /* @__PURE__ */ jsxs(Routes, { children: [
+      /* @__PURE__ */ jsx(Route, { path: "dashboard", element: /* @__PURE__ */ jsx(Dashboard, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "payments", element: /* @__PURE__ */ jsx(Payments, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "orders", element: /* @__PURE__ */ jsx(Orders, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "customers", element: /* @__PURE__ */ jsx(Customers, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "analytics", element: /* @__PURE__ */ jsx(Analytics, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "settings", element: /* @__PURE__ */ jsx(Settings, {}) }),
+      /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Navigate, { to: "dashboard", replace: true }) })
+    ] }) }) })
+  ] });
+};
+export {
+  App
+};