feat: add currency support to CardReport and update dashboard data structure

app/components/ui/card-report.tsx

@@ -5,6 +5,7 @@ import { formatNumberWithPeriods } from '~/utils/formatter'
 type CardReportProperty = {
   title: string
   amount: number
+  currency?: string
   icon: (
     properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
   ) => JSX.Element
@@ -13,7 +14,7 @@ type CardReportProperty = {
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount, icon: Icon, counter } = properties
+  const { title, amount, icon: Icon, counter, currency } = properties
   return (
     <div className="rounded bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
@@ -22,15 +23,17 @@ export const CardReport = (properties: CardReportProperty) => {
           height={48}
           width={48}
         />
-        <div className="ml-10">
+        <div className="ml-7">
           <h2 className="text-lg font-semibold">{title}</h2>
           <p className="text-2xl font-bold text-[#2E2F7C]">
-            Rp. {formatNumberWithPeriods(amount)}
+            {currency
+              ? `${currency} ${formatNumberWithPeriods(amount)}`
+              : formatNumberWithPeriods(amount)}
           </p>
         </div>
       </div>
       {counter?.length && (
-        <div className="flex items-center">
+        <div className="flex items-center pt-2">
           Pribadi: {counter[0]} | Perusahaan: {counter[1]}
         </div>
       )}

app/components/ui/chart.tsx

@@ -215,7 +215,7 @@ export const ChartSubscription = () => {
     <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: '200px', width: '100%' }}>
+        <div style={{ height: 'auto', width: '100%' }}>
           <Doughnut
             data={data}
             options={options}