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}

app/configs/meta.ts

@@ -2,8 +2,7 @@ import { MENU as ADMIN_MENU } from '~/layouts/admin/menu'
 
 export const APP = {
   title: 'LegalGo',
-  description:
-    'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
+  description: 'Legalgo Platform Berita Dunia dan Indonesia.',
   logo: '/images/logo.png',
 }
 

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,22 +50,18 @@ 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="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>
-        <div className="sm:col-span-2 sm:col-start-4">
-          <div className="h-30 w-full">
+        <div className="w-ful h-full sm:w-[40%]">
           <div className="shadow-sm">
             <ChartSubscription />
           </div>
         </div>
       </div>
     </div>
-    </div>
   )
 }