feat: add bar, donut, and pie charts to dashboard for enhanced data visualization

app/components/ui/card-report.tsx

@@ -16,7 +16,7 @@ type CardReportProperty = {
 export const CardReport = (properties: CardReportProperty) => {
   const { title, amount, icon: Icon, counter, currency } = properties
   return (
-    <div className="rounded-lg bg-white px-4 py-6 shadow-sm">
+    <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
         <Icon
           className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"

app/components/ui/chart.tsx

@@ -1,227 +0,0 @@
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  type ChartOptions,
-  type ChartEvent,
-  type ActiveElement,
-} from 'chart.js'
-import { useState } from 'react'
-import { Bar, Doughnut, Pie } from 'react-chartjs-2'
-ChartJS.register(
-  ArcElement,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-)
-
-type HandleChartClick = (event: ChartEvent, elements: ActiveElement[]) => void
-
-export const UiChartPie = () => {
-  const data = {
-    labels: [
-      'Pidana',
-      'Perdata',
-      'Perceraian',
-      'Surat Bisnis',
-      'Surat Tanah',
-      'Lainnya',
-    ],
-    datasets: [
-      {
-        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
-        backgroundColor: [
-          '#FFB300',
-          '#4CAF50',
-          '#3F51B5',
-          '#F44336',
-          '#2196F3',
-          '#FF9800',
-        ],
-        hoverOffset: 4,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'pie'> = {
-    maintainAspectRatio: true,
-    responsive: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          padding: 20,
-        },
-      },
-    },
-    layout: {
-      padding: 0,
-    },
-  }
-
-  return (
-    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 px-4 py-6 text-center shadow-sm">
-      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
-      <Pie
-        height={225}
-        width={450}
-        data={data}
-        options={options}
-      />
-    </div>
-  )
-}
-
-export const UiChartBar = () => {
-  const yearlyData = {
-    labels: ['2022', '2023', '2024'],
-    datasets: [
-      {
-        label: 'Total Sales',
-        data: [800, 950, 1200],
-        backgroundColor: '#1E3A8A',
-      },
-    ],
-  }
-
-  const monthlyData = {
-    labels: [
-      'Jan',
-      'Feb',
-      'Mar',
-      'Apr',
-      'May',
-      'Jun',
-      'Jul',
-      'Aug',
-      'Sep',
-      'Oct',
-      'Nov',
-      'Dec',
-    ],
-    datasets: [
-      {
-        label: 'Monthly Sales',
-        data: [70, 90, 750, 80, 90, 95, 75, 85, 78, 88, 95, 0],
-        backgroundColor: '#2E2F7C',
-      },
-    ],
-  }
-
-  const [view, setView] = useState('month') // Default tampil bulanan
-  const [selectedYear, setSelectedYear] = useState('')
-
-  const handleChartClick: HandleChartClick = (event, elements) => {
-    if (elements.length > 0 && view === 'year') {
-      const clickedIndex = elements[0].index
-      const year = yearlyData.labels[clickedIndex]
-      setSelectedYear(year)
-      setView('month')
-    }
-  }
-
-  const handleBackToYear = () => {
-    setView('year')
-    setSelectedYear('')
-  }
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    onClick: handleChartClick,
-    scales: {
-      y: {
-        beginAtZero: true,
-        max: view == 'month' ? 100 : 1500,
-        ticks: {
-          stepSize: 25,
-        },
-      },
-    },
-  }
-
-  return (
-    <div className="rounded-lg bg-white p-6 shadow-sm">
-      <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-bold">
-          {view === 'year'
-            ? 'Penjualan Tahunan'
-            : `Penjualan Bulanan ${selectedYear || '2024'}`}
-        </h2>
-        {view === 'month' && (
-          <button
-            className="rounded-lg bg-gray-200 px-4 py-2"
-            onClick={handleBackToYear}
-          >
-            Tahun
-          </button>
-        )}
-      </div>
-
-      <div>
-        <Bar
-          data={view === 'year' ? yearlyData : monthlyData}
-          options={options}
-        />
-      </div>
-    </div>
-  )
-}
-
-export const ChartSubscription = () => {
-  const data = {
-    labels: ['Selesai', 'Belum Selesai'],
-    datasets: [
-      {
-        data: [70, 30],
-        backgroundColor: ['#1e3a8a', '#e5e7eb'],
-        borderWidth: 0,
-        cutout: '70%',
-        circumference: 180,
-        rotation: 270,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'doughnut'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          boxWidth: 10,
-        },
-      },
-      tooltip: {
-        enabled: false,
-      },
-    },
-  }
-
-  return (
-    <div className="rounded-xl bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
-      <div className="flex items-center justify-between">
-        <div style={{ height: 'auto', width: '100%' }}>
-          <Doughnut
-            data={data}
-            options={options}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}