initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,98 @@
+'use client'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardHeader from '@mui/material/CardHeader'
+import CardContent from '@mui/material/CardContent'
+import { useTheme } from '@mui/material/styles'
+
+// Third Party Imports
+import type { ApexOptions } from 'apexcharts'
+
+// Components Imports
+import OptionMenu from '@core/components/option-menu'
+
+// Styled Component Imports
+const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))
+
+// Vars
+const series = [
+  { name: 'Sales', data: [32, 27, 27, 30, 25, 25] },
+  { name: 'Visits', data: [25, 35, 20, 20, 20, 20] }
+]
+
+const RadarSalesChart = () => {
+  // Hooks
+  const theme = useTheme()
+
+  // Vars
+  const textDisabled = 'var(--mui-palette-text-disabled)'
+  const divider = 'var(--mui-palette-divider)'
+
+  const options: ApexOptions = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false }
+    },
+    colors: ['var(--mui-palette-primary-main)', 'var(--mui-palette-info-main)'],
+    plotOptions: {
+      radar: {
+        polygons: {
+          connectorColors: divider,
+          strokeColors: divider
+        }
+      }
+    },
+    stroke: { width: 0 },
+    fill: {
+      opacity: [1, 0.85]
+    },
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    markers: { size: 0 },
+    legend: {
+      fontSize: '13px',
+      labels: { colors: 'var(--mui-palette-text-secondary)' },
+      markers: { offsetY: -1, offsetX: theme.direction === 'rtl' ? 7 : -4 },
+      itemMargin: { horizontal: 9 }
+    },
+    grid: { show: false },
+    xaxis: {
+      labels: {
+        show: true,
+        style: {
+          fontSize: '13px',
+          colors: [textDisabled, textDisabled, textDisabled, textDisabled, textDisabled, textDisabled]
+        }
+      }
+    },
+    yaxis: { show: false },
+    responsive: [
+      {
+        breakpoint: 1200,
+        options: {
+          chart: {
+            height: 332
+          }
+        }
+      }
+    ]
+  }
+
+  return (
+    <Card>
+      <CardHeader
+        title='Sales'
+        subheader='Last 6 Months'
+        action={<OptionMenu options={['Last Month', 'Last 6 months', 'Last Year']} />}
+      />
+      <CardContent>
+        <AppReactApexCharts type='radar' height={373} width='100%' series={series} options={options} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default RadarSalesChart