crud

admin crud ops implemented partialy

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

@@ -1,78 +1,84 @@
-'use client'
+"use client";
 
-import React, { useMemo } from 'react'
-import { AgChartsReact } from 'ag-charts-react'
-import { AgChartOptions } from 'ag-charts-community'
+import React, { useMemo } from "react";
+import { AgCharts } from "ag-charts-react";
+import { AgChartOptions } from "ag-charts-community";
 
 interface ChartData {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 interface UserGrowthChartProps {
-  data: ChartData[]
-  title?: string
+  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',
+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,
+      ],
+      axes: [
+        {
+          type: "category",
+          position: "bottom",
+          title: {
+            text: "Time Period",
+            fontSize: 14,
+          },
         },
-      },
-      {
-        type: 'number',
-        position: 'left',
-        title: {
-          text: 'Number of Users',
-          fontSize: 14,
+        {
+          type: "number",
+          position: "left",
+          title: {
+            text: "Number of Users",
+            fontSize: 14,
+          },
         },
+      ],
+      legend: {
+        enabled: false,
       },
-    ],
-    legend: {
-      enabled: false,
-    },
-    padding: {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 20,
-    },
-  }), [data, title])
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+      },
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}