@ammarkhalidfarooq/dashboard-package 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @ammarkhalidfarooq/dashboard-package
+
+A reusable React Dashboard component library.
+
+## Installation
+
+```bash
+npm install @ammarkhalidfarooq/dashboard-package
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import { Dashboard } from "@ammarkhalidfarooq/dashboard-package";
+
+const App = () => {
+  return <Dashboard />;
+};
+
+export default App;
+```
+
+## Development
+
+To preview the component locally:
+
+```bash
+npm run dev
+```
+
+To build the package:
+
+```bash
+npm run build
+```
+
+The build outputs both ESM and CommonJS bundles in the `dist` folder.

package/dist/index.cjs.js

@@ -0,0 +1,600 @@
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var iconsMaterial = require('@mui/icons-material');
+var styles = require('@mui/material/styles');
+var Chart = require('react-apexcharts');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var theme = styles.createTheme({
+  cssVariables: true,
+  // Enable CSS variables for better SSR support
+  typography: {
+    fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)",
+    // Added as a fallback for Arabic text
+    "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
+  },
+  palette: {
+    primary: {
+      main: "#6363E6",
+      mainLight: "#F7F7FF",
+      light: "#FFFFFF",
+      gray: "#A1A1A8",
+      lightGreen: "#E1FBF2",
+      green: "#0CAB72",
+      red: "#E61D1D",
+      lightRed: "#FFEDED",
+      lightGray: "#E9E9EB",
+      darkGray: "#606062",
+      dark: "#090909"
+    },
+    text: {
+      primary: "#666666"
+    },
+    secondary: {
+      main: "#E0C2FF",
+      light: "#F5EBFF",
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: "#47008F"
+    },
+    white: {
+      main: "#FFFFFF",
+      light: "#F8F8F8"
+    },
+    gradients: {
+      primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
+      secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
+      // You can add more gradients if needed
+    }
+  }
+});
+
+var MetricSelector = function MetricSelector(_ref) {
+  var metric = _ref.metric,
+    onMetricChange = _ref.onMetricChange,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? ['Revenue', 'Donations'] : _ref$options;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  var open = Boolean(anchorEl);
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose(value) {
+    if (typeof value === 'string') {
+      onMetricChange(value);
+    }
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    id: "metric-button",
+    "aria-controls": open ? 'metric-menu' : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": open ? 'true' : undefined,
+    onClick: handleClick,
+    variant: "outlined",
+    sx: {
+      borderRadius: '8px',
+      borderColor: '#E9E9EB',
+      color: '#000',
+      textTransform: 'none',
+      fontWeight: 600,
+      px: 2,
+      height: '40px',
+      '&:hover': {
+        borderColor: 'primary.main',
+        bgcolor: 'rgba(99, 99, 230, 0.04)'
+      }
+    }
+  }, "Metric: ", metric), /*#__PURE__*/React.createElement(material.Menu, {
+    id: "metric-menu",
+    anchorEl: anchorEl,
+    open: open,
+    onClose: function onClose() {
+      return handleClose();
+    },
+    MenuListProps: {
+      'aria-labelledby': 'metric-button'
+    },
+    PaperProps: {
+      sx: {
+        borderRadius: '8px',
+        mt: 1,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+        minWidth: '150px'
+      }
+    }
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(material.MenuItem, {
+      key: option,
+      onClick: function onClick() {
+        return handleClose(option);
+      },
+      sx: {
+        fontWeight: metric === option ? 700 : 400
+      }
+    }, option);
+  })));
+};
+
+var RevenueChart = function RevenueChart(_ref) {
+  var metric = _ref.metric,
+    data = _ref.data,
+    series = _ref.series,
+    categories = _ref.categories,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 350 : _ref$height,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
+  var theme = styles.useTheme();
+  var chartOptions = {
+    chart: {
+      id: 'revenue-chart',
+      stacked: stacked,
+      toolbar: {
+        show: false
+      },
+      sparkline: {
+        enabled: false
+      }
+    },
+    stroke: {
+      curve: 'straight',
+      width: 2
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.8,
+        opacityTo: 0.4,
+        stops: [0, 100]
+      }
+    },
+    xaxis: {
+      categories: categories,
+      axisBorder: {
+        show: false
+      },
+      axisTicks: {
+        show: false
+      },
+      labels: {
+        style: {
+          colors: '#A1A1A8',
+          fontSize: '12px'
+        }
+      }
+    },
+    yaxis: {
+      show: true,
+      labels: {
+        style: {
+          colors: '#A1A1A8',
+          fontSize: '12px'
+        },
+        formatter: function formatter(value) {
+          return metric === 'Revenue' ? "$".concat(value) : value;
+        }
+      }
+    },
+    grid: {
+      show: true,
+      borderColor: '#f1f1f1',
+      strokeDashArray: 4,
+      position: 'back'
+    },
+    // Use primary main and a darker version of it for differentiation
+    colors: [theme.palette.primary.main, '#4B4BC2'],
+    dataLabels: {
+      enabled: false
+    },
+    tooltip: {
+      theme: 'light',
+      y: {
+        formatter: function formatter(value) {
+          return metric === 'Revenue' ? "$".concat(value) : value;
+        }
+      }
+    },
+    legend: {
+      show: stacked,
+      position: 'top',
+      horizontalAlign: 'left'
+    }
+  };
+  var chartSeries = series || [{
+    name: metric,
+    data: data
+  }];
+  return /*#__PURE__*/React.createElement(Chart, {
+    options: chartOptions,
+    series: chartSeries,
+    type: "area",
+    height: height,
+    width: "100%"
+  });
+};
+
+var Dashboard = function Dashboard(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Overview" : _ref$title,
+    _ref$initialMetric = _ref.initialMetric,
+    initialMetric = _ref$initialMetric === void 0 ? 'Revenue' : _ref$initialMetric,
+    _ref$revenueData = _ref.revenueData,
+    revenueData = _ref$revenueData === void 0 ? [3000, 4500, 4200, 5800, 5200, 7100, 8500, 9200, 5000] : _ref$revenueData,
+    _ref$donationsData = _ref.donationsData,
+    donationsData = _ref$donationsData === void 0 ? [15, 22, 18, 30, 25, 35, 42, 45, 28] : _ref$donationsData,
+    _ref$categories = _ref.categories,
+    categories = _ref$categories === void 0 ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'] : _ref$categories;
+  var _React$useState = React.useState(initialMetric),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    metric = _React$useState2[0],
+    setMetric = _React$useState2[1];
+  var currentData = metric === 'Revenue' ? revenueData : donationsData;
+  var primaryCharts = [{
+    label: 'Total Revenue',
+    value: '$9,200.00',
+    subValue: 'Total Donations: 215',
+    data: currentData,
+    categories: categories,
+    showSelector: true
+  }, {
+    label: 'First installments',
+    value: '$510.00',
+    data: currentData.slice(-7),
+    categories: categories.slice(-7)
+  }, {
+    label: 'One-time donations',
+    value: '$7,100.00',
+    data: currentData,
+    categories: categories
+  }];
+  var secondaryCharts = [{
+    label: 'New vs Returning Donors',
+    series: [{
+      name: 'New Donors',
+      data: [10, 15, 12, 20, 18, 25, 30, 35, 20]
+    }, {
+      name: 'Returning',
+      data: [5, 7, 6, 10, 7, 10, 12, 10, 8]
+    }],
+    categories: categories,
+    stacked: true,
+    footer: {
+      left: 'New donors: 195',
+      right: 'Returning donors: 20'
+    }
+  }, {
+    label: 'Average Donation Amount',
+    value: '$42.80',
+    data: currentData.map(function (v) {
+      return v * 0.5;
+    }),
+    categories: categories
+  }, {
+    label: 'Tip Amount',
+    value: '$1,250.00',
+    subValue: 'Number of Tips: 110',
+    data: currentData.map(function (v) {
+      return v * 0.2;
+    }),
+    categories: categories
+  }];
+  var tertiaryCharts = [{
+    label: 'Conversion Rate',
+    value: '2%',
+    data: [1.5, 1.8, 1.7, 2.1, 2.0, 1.9, 2.2, 2.5, 2.0],
+    categories: categories
+  }, {
+    label: 'Organic vs Paid Traffic',
+    series: [{
+      name: 'Organic',
+      data: [500, 600, 550, 700, 800, 750, 900, 1000, 950]
+    }, {
+      name: 'Paid',
+      data: [200, 250, 220, 300, 350, 320, 400, 450, 420]
+    }],
+    categories: categories,
+    stacked: true
+  }, {
+    label: 'Organic Donations',
+    value: '120',
+    data: [8, 12, 10, 15, 14, 18, 22, 20, 12],
+    categories: categories
+  }];
+  var quaternaryCharts = [{
+    label: 'Email Marketing',
+    value: '56',
+    data: [45, 48, 52, 50, 56, 54, 58, 60, 56],
+    categories: categories
+  }, {
+    label: 'Traffic source',
+    value: '23%',
+    data: [18, 22, 20, 25, 23, 21, 24, 26, 23],
+    categories: categories
+  }, {
+    label: 'URL',
+    value: '10%',
+    data: [8, 9, 11, 10, 10, 12, 9, 11, 10],
+    categories: categories
+  }];
+  var renderChartCard = function renderChartCard(item, index) {
+    var isPrimary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    return /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 4,
+      key: item.label + index,
+      sx: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement(material.Card, {
+      sx: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
+        borderRadius: 4,
+        border: '1px solid #f0f0f0'
+      }
+    }, /*#__PURE__*/React.createElement(material.CardContent, {
+      sx: {
+        p: 3,
+        flexGrow: 1,
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        mb: 2
+      }
+    }, /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        textAlign: 'left'
+      }
+    }, /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "subtitle2",
+      sx: {
+        color: '#000000',
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+        mb: 0.5
+      }
+    }, item.label), item.value && /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "subtitle2",
+      sx: {
+        fontWeight: 600,
+        color: '#000000',
+        mb: 0.5
+      }
+    }, item.value), item.subValue && /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "subtitle2",
+      sx: {
+        color: '#000000',
+        fontWeight: 600
+      }
+    }, item.subValue)), /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        display: 'flex',
+        gap: 1
+      }
+    }, item.showSelector && /*#__PURE__*/React.createElement(MetricSelector, {
+      metric: metric,
+      onMetricChange: setMetric,
+      options: ['Revenue', 'Donations']
+    }), /*#__PURE__*/React.createElement(material.IconButton, {
+      sx: {
+        border: '1px solid #E9E9EB',
+        borderRadius: '8px',
+        color: '#000',
+        height: '40px',
+        width: '40px',
+        '&:hover': {
+          borderColor: 'primary.main',
+          bgcolor: 'rgba(99, 99, 230, 0.04)'
+        }
+      }
+    }, /*#__PURE__*/React.createElement(iconsMaterial.MoreHoriz, {
+      sx: {
+        fontSize: '1.2rem'
+      }
+    })))), /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        flexGrow: 1,
+        minHeight: isPrimary ? '250px' : '200px'
+      }
+    }, /*#__PURE__*/React.createElement(RevenueChart, {
+      metric: item.label.includes('Rate') || item.label.includes('Performance') || item.label.includes('source') || item.label === 'URL' ? 'Percent' : item.stacked ? item.label.includes('Traffic') ? 'Visitors' : 'Donors' : metric,
+      data: item.data,
+      series: item.series,
+      categories: item.categories,
+      height: isPrimary ? 250 : 200,
+      stacked: item.stacked
+    })), item.footer && /*#__PURE__*/React.createElement(material.Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        mt: 2,
+        pt: 2,
+        borderTop: '1px solid #f0f0f0'
+      }
+    }, /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "caption",
+      sx: {
+        color: '#606062',
+        fontWeight: 600
+      }
+    }, item.footer.left), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "caption",
+      sx: {
+        color: '#606062',
+        fontWeight: 600
+      }
+    }, item.footer.right)))));
+  };
+  return /*#__PURE__*/React.createElement(material.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      p: 4,
+      bgcolor: 'primary.mainLight',
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h4",
+    gutterBottom: true,
+    sx: {
+      fontWeight: 'bold',
+      color: 'primary.main',
+      mb: 4
+    }
+  }, title), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 3,
+    sx: {
+      mb: 1
+    }
+  }, primaryCharts.map(function (item, index) {
+    return renderChartCard(item, index, true);
+  })), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 3,
+    sx: {
+      mt: 1
+    }
+  }, secondaryCharts.map(function (item, index) {
+    return renderChartCard(item, index, false);
+  })), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 3,
+    sx: {
+      mt: 1
+    }
+  }, tertiaryCharts.map(function (item, index) {
+    return renderChartCard(item, index, false);
+  })), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 3,
+    sx: {
+      mt: 1
+    }
+  }, quaternaryCharts.map(function (item, index) {
+    return renderChartCard(item, index, false);
+  }))));
+};
+
+/**
+ * Theme colors for server components
+ *
+ * These are plain JavaScript objects that can be safely imported
+ * in both server and client components without triggering
+ * client-only code in server components.
+ *
+ * For client components, use the full theme from @/config/customTheme
+ */
+
+var themeColors = {
+  primary: {
+    main: "#6363E6",
+    mainLight: "#F7F7FF",
+    light: "#FFFFFF",
+    gray: "#A1A1A8",
+    lightGreen: "#E1FBF2",
+    green: "#0CAB72",
+    red: "#E61D1D",
+    lightRed: "#FFEDED",
+    lightGray: "#E9E9EB",
+    darkGray: "#606062",
+    dark: "#090909"
+  },
+  text: {
+    primary: "#666666"
+  },
+  secondary: {
+    main: "#E0C2FF",
+    light: "#F5EBFF",
+    contrastText: "#47008F"
+  },
+  white: {
+    main: "#FFFFFF",
+    light: "#F8F8F8"
+  },
+  gradients: {
+    primary: "linear-gradient(90deg, #6363E6 0.05%, #59C9F9 99.96%)",
+    secondary: "linear-gradient(180deg, #E9E9FF 0%, #C9EEFF 100%)"
+  }
+};
+
+// Typography settings for server components
+var themeTypography = {
+  fontFamily: ["var(--font-league-spartan)", "var(--font-noto-sans-arabic)", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"].join(",")
+};
+
+exports.Dashboard = Dashboard;
+exports.DashboardTheme = theme;
+exports.MetricSelector = MetricSelector;
+exports.RevenueChart = RevenueChart;
+exports.themeColors = themeColors;
+exports.themeTypography = themeTypography;
+//# sourceMappingURL=index.cjs.js.map