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>
     </>

app/layouts/news/form-login.tsx

@@ -12,7 +12,7 @@ const loginSchema = z.object({
   password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
 })
 
-export type TLoginSchema = z.infer<typeof loginSchema>
+type TLoginSchema = z.infer<typeof loginSchema>
 
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>

app/pages/dashboard/data.ts

@@ -1,7 +1,7 @@
 export const REPORT = [
-  { title: 'Total Transaksi', amound: '10.800.000.000', icon: 'money' },
-  { title: 'Transaksi Tertagih', amound: 2_000_000, icon: 'money' },
-  { title: 'Transaksi Tertagih', amound: 2_000_000, icon: 'money' },
+  { title: 'Total Transaksi', amount: 10_800_000_000, icon: 'money' },
+  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: 'money' },
+  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: 'money' },
 ]
 
 export const HISTORY = [

app/pages/dashboard/index.tsx

@@ -22,12 +22,12 @@ export const DashboardPage = () => {
         </section>
 
         <div className="mb-5 grid grid-cols-3 gap-4">
-          {REPORT.map((report, index) => (
+          {REPORT.map(({ title, amount }, index) => (
             <CardReport
               key={index}
-              title={report.title}
-              amound={report.amound}
-            ></CardReport>
+              title={title}
+              amount={amount}
+            />
           ))}
         </div>
 

app/utils/formatter.ts

@@ -0,0 +1,3 @@
+export const formatNumberWithPeriods = (number: number) => {
+  return new Intl.NumberFormat('id-ID').format(number)
+}