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

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>