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

app/pages/dashboard/index.tsx

@@ -1,10 +1,8 @@
 import { CardReport } from '~/components/ui/card-report'
-import {
-  ChartSubscription,
-  UiChartBar,
-  UiChartPie,
-} from '~/components/ui/chart'
 
+import { ChartBar } from './chart-bar'
+import { ChartDonut } from './chart-donut'
+import { ChartPie } from './chart-pie'
 import { HISTORY, REPORT } from './data'
 export const DashboardPage = () => {
   return (
@@ -46,16 +44,16 @@ export const DashboardPage = () => {
           />
         ))}
         <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
-          <UiChartPie />
+          <ChartPie />
         </div>
       </div>
 
       <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
         <div className="h-full w-full sm:w-[60%]">
-          <UiChartBar />
+          <ChartBar />
         </div>
         <div className="w-ful h-full sm:w-[40%]">
-          <ChartSubscription />
+          <ChartDonut />
         </div>
       </div>
     </div>