basic stracture and auth

in memory db :)

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} />
+}