feat: fix amount property typo and format numbers for dashboard reports

app/components/ui/card-report.tsx

@@ -1,15 +1,16 @@
 import { GraphIcon } from '~/components/icons/graph'
+import { formatNumberWithPeriods } from '~/utils/formatter'
 
 interface CardReportProperty {
   title: string
-  amound?: number | string
+  amount: number
   url?: string
   type?: 'history' | 'report'
   counter?: number[]
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amound } = properties
+  const { title, amount } = properties
   return (
     <>
       <div className="flex items-center rounded bg-white px-4 py-6 shadow-sm">
@@ -20,7 +21,9 @@ export const CardReport = (properties: CardReportProperty) => {
         />
         <div className="ml-10">
           <h2 className="text-lg font-semibold">{title}</h2>
-          <p className="text-2xl font-bold text-[#2E2F7C]">Rp. {amound}</p>
+          <p className="text-2xl font-bold text-[#2E2F7C]">
+            Rp. {formatNumberWithPeriods(amount)}
+          </p>
         </div>
       </div>
     </>