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

app/pages/dashboard/data.ts

@@ -2,20 +2,25 @@ import { DoctorIcon } from '~/components/icons/doctor'
 import { GraphIcon } from '~/components/icons/graph'
 
 export const REPORT = [
-  { title: 'Total Transaksi', amount: 10_800_000_000, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
+  { title: 'Total User', amount: 10_800, icon: GraphIcon },
+  { title: '⁠Total User Subscribe', amount: 5000, icon: GraphIcon },
+  {
+    title: 'Total Nilai Subscribe',
+    amount: 250_000_000,
+    icon: GraphIcon,
+    currency: 'Rp. ',
+  },
 ]
 
 export const HISTORY = [
   {
-    title: 'Total Kunjungan',
+    title: 'Total Content Biasa',
     amount: 2890,
     icon: GraphIcon,
     counter: [2190, 700],
   },
   {
-    title: 'Total User Memesan',
+    title: 'Total Content Premium',
     amount: 274,
     icon: DoctorIcon,
     counter: [211, 54],

app/pages/dashboard/index.tsx

@@ -24,12 +24,13 @@ export const DashboardPage = () => {
         </div>
       </section>
       <div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
-        {REPORT.map(({ title, amount, icon }, index) => (
+        {REPORT.map(({ title, amount, icon, currency }, index) => (
           <CardReport
             key={index}
             title={title}
             amount={amount}
             icon={icon}
+            currency={currency}
           />
         ))}
       </div>
@@ -49,19 +50,15 @@ export const DashboardPage = () => {
         </div>
       </div>
 
-      <div className="mt-5 grid max-h-[280px] grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
-        <div className="sm:col-span-3">
-          <div className="h-30 w-full">
-            <div className="shadow-sm">
-              <UiChartBar />
-            </div>
+      <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
+        <div className="h-full w-full sm:w-[60%]">
+          <div className="shadow-sm">
+            <UiChartBar />
           </div>
         </div>
-        <div className="sm:col-span-2 sm:col-start-4">
-          <div className="h-30 w-full">
-            <div className="shadow-sm">
-              <ChartSubscription />
-            </div>
+        <div className="w-ful h-full sm:w-[40%]">
+          <div className="shadow-sm">
+            <ChartSubscription />
           </div>
         </div>
       </div>