legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-02-24 08:04:09 +08:00
parent e484af6e71
commit e11f007eb1
5 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/ui/card-report.tsx
View File

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

2
app/layouts/news/form-login.tsx
View File

@ -12,7 +12,7 @@ const loginSchema = z.object({
password: z.string().min(6, 'Kata sandi minimal 6 karakter'), 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 = { type TProperties = {
setIsRegisterOpen: Dispatch<SetStateAction<boolean>> setIsRegisterOpen: Dispatch<SetStateAction<boolean>>

6
app/pages/dashboard/data.ts
View File

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

8
app/pages/dashboard/index.tsx
View File

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

3
app/utils/formatter.ts Normal file
View File

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