crud

admin crud ops implemented partialy

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

@@ -1,88 +1,102 @@
-'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 PieData {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 interface MembershipDistributionChartProps {
-  data: PieData[]
-  title?: string
+  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}%`
+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",
           },
-        },
-        highlightStyle: {
-          item: {
-            fillOpacity: 0.8,
-            stroke: '#000000',
-            strokeWidth: 2,
+          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}%`;
+            },
           },
-        },
-        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">
+          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>`
+            </div>`;
+            },
           },
         },
+      ],
+      legend: {
+        enabled: true,
+        position: "right",
+        fontSize: 12,
+        marker: {
+          shape: "square",
+          size: 12,
+        },
       },
-    ],
-    legend: {
-      enabled: true,
-      position: 'right',
-      fontSize: 12,
-      marker: {
-        shape: 'square',
-        size: 12,
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
       },
-    },
-    padding: {
-      top: 20,
-      right: 20,
-      bottom: 20,
-      left: 20,
-    },
-  }), [data, title])
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}

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

@@ -1,99 +1,105 @@
-'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 BarData {
-  category: string
-  value: number
-  color?: string
+  category: string;
+  value: number;
+  color?: string;
 }
 
 interface RevenueChartProps {
-  data: BarData[]
-  title?: string
+  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,
+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">
+          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>`
+            </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,
       },
-    ],
-    axes: [
-      {
-        type: 'category',
-        position: 'bottom',
-        title: {
-          text: 'Month',
-          fontSize: 14,
-        },
-        label: {
-          fontSize: 12,
-          rotation: 45,
-        },
+      padding: {
+        top: 20,
+        right: 20,
+        bottom: 60,
+        left: 80,
       },
-      {
-        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])
+    }),
+    [data, title],
+  );
 
-  return <AgChartsReact options={chartOptions} />
-}
+  return <AgCharts options={chartOptions} />;
+}

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