basic stracture and auth

in memory db :)

apps/admin/src/components/charts/MembershipDistributionChart.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { AgChartsReact } from 'ag-charts-react'
+import { AgChartOptions } from 'ag-charts-community'
+
+interface PieData {
+  label: string
+  value: number
+  color?: string
+}
+
+interface MembershipDistributionChartProps {
+  data: PieData[]
+  title?: string
+}
+
+export function MembershipDistributionChart({ data, title = 'Membership Distribution' }: MembershipDistributionChartProps) {
+  const chartOptions: AgChartOptions = useMemo(() => ({
+    title: {
+      text: title,
+      fontSize: 18,
+      fontWeight: 'bold',
+    },
+    data,
+    series: [
+      {
+        type: 'pie',
+        calloutLabelKey: 'label',
+        angleKey: 'value',
+        sectorLabelKey: 'label',
+        fills: data.map(item => item.color || '#3b82f6'),
+        strokes: ['#ffffff'],
+        strokeWidth: 2,
+        calloutLabel: {
+          enabled: true,
+          fontSize: 12,
+          fontWeight: 'bold',
+        },
+        sectorLabel: {
+          enabled: true,
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#ffffff',
+          formatter: (params: any) => {
+            const percentage = ((params.datum.value / data.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)
+            return `${params.datum.label}: ${percentage}%`
+          },
+        },
+        highlightStyle: {
+          item: {
+            fillOpacity: 0.8,
+            stroke: '#000000',
+            strokeWidth: 2,
+          },
+        },
+        tooltip: {
+          enabled: true,
+          renderer: (params: any) => {
+            const percentage = ((params.datum.value / data.reduce((sum, item) => sum + item.value, 0)) * 100).toFixed(1)
+            return `<div class="bg-white p-2 rounded shadow-lg border">
+              <div class="font-bold">${params.datum.label}</div>
+              <div class="text-sm">Count: ${params.datum.value}</div>
+              <div class="text-sm">Percentage: ${percentage}%</div>
+            </div>`
+          },
+        },
+      },
+    ],
+    legend: {
+      enabled: true,
+      position: 'right',
+      fontSize: 12,
+      marker: {
+        shape: 'square',
+        size: 12,
+      },
+    },
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 20,
+      left: 20,
+    },
+  }), [data, title])
+
+  return <AgChartsReact options={chartOptions} />
+}

apps/admin/src/components/charts/RevenueChart.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { AgChartsReact } from 'ag-charts-react'
+import { AgChartOptions } from 'ag-charts-community'
+
+interface BarData {
+  category: string
+  value: number
+  color?: string
+}
+
+interface RevenueChartProps {
+  data: BarData[]
+  title?: string
+}
+
+export function RevenueChart({ data, title = 'Monthly Revenue' }: RevenueChartProps) {
+  const chartOptions: AgChartOptions = useMemo(() => ({
+    title: {
+      text: title,
+      fontSize: 18,
+      fontWeight: 'bold',
+    },
+    data,
+    series: [
+      {
+        type: 'bar',
+        xKey: 'category',
+        yKey: 'value',
+        fills: data.map(item => item.color || '#10b981'),
+        strokes: ['#ffffff'],
+        strokeWidth: 2,
+        cornerRadius: 4,
+        highlightStyle: {
+          item: {
+            fill: '#059669',
+            stroke: '#ffffff',
+            strokeWidth: 2,
+          },
+        },
+        label: {
+          enabled: true,
+          position: 'top',
+          fontSize: 12,
+          fontWeight: 'bold',
+          color: '#374151',
+          formatter: (params: any) => `$${params.value.toLocaleString()}`,
+        },
+        tooltip: {
+          enabled: true,
+          renderer: (params: any) => {
+            return `<div class="bg-white p-2 rounded shadow-lg border">
+              <div class="font-bold">${params.datum.category}</div>
+              <div class="text-sm">Revenue: $${params.datum.value.toLocaleString()}</div>
+            </div>`
+          },
+        },
+      },
+    ],
+    axes: [
+      {
+        type: 'category',
+        position: 'bottom',
+        title: {
+          text: 'Month',
+          fontSize: 14,
+        },
+        label: {
+          fontSize: 12,
+          rotation: 45,
+        },
+      },
+      {
+        type: 'number',
+        position: 'left',
+        title: {
+          text: 'Revenue ($)',
+          fontSize: 14,
+        },
+        label: {
+          fontSize: 12,
+          formatter: (params: any) => `$${params.value.toLocaleString()}`,
+        },
+      },
+    ],
+    legend: {
+      enabled: false,
+    },
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 60,
+      left: 80,
+    },
+  }), [data, title])
+
+  return <AgChartsReact options={chartOptions} />
+}

apps/admin/src/components/charts/UserGrowthChart.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { AgChartsReact } from 'ag-charts-react'
+import { AgChartOptions } from 'ag-charts-community'
+
+interface ChartData {
+  label: string
+  value: number
+  color?: string
+}
+
+interface UserGrowthChartProps {
+  data: ChartData[]
+  title?: string
+}
+
+export function UserGrowthChart({ data, title = 'User Growth' }: UserGrowthChartProps) {
+  const chartOptions: AgChartOptions = useMemo(() => ({
+    title: {
+      text: title,
+      fontSize: 18,
+      fontWeight: 'bold',
+    },
+    data,
+    series: [
+      {
+        type: 'line',
+        xKey: 'label',
+        yKey: 'value',
+        stroke: '#3b82f6',
+        strokeWidth: 3,
+        marker: {
+          size: 6,
+          fill: '#3b82f6',
+          stroke: '#ffffff',
+          strokeWidth: 2,
+        },
+        highlightStyle: {
+          item: {
+            fill: '#1d4ed8',
+            stroke: '#ffffff',
+            strokeWidth: 2,
+          },
+        },
+      },
+    ],
+    axes: [
+      {
+        type: 'category',
+        position: 'bottom',
+        title: {
+          text: 'Time Period',
+          fontSize: 14,
+        },
+      },
+      {
+        type: 'number',
+        position: 'left',
+        title: {
+          text: 'Number of Users',
+          fontSize: 14,
+        },
+      },
+    ],
+    legend: {
+      enabled: false,
+    },
+    padding: {
+      top: 20,
+      right: 20,
+      bottom: 20,
+      left: 20,
+    },
+  }), [data, title])
+
+  return <AgChartsReact options={chartOptions} />
+}