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

feat: update report amounts to string format and enhance dashboard layout

Browse Source
This commit is contained in:
fredy.siswanto 2025-02-24 00:54:00 +07:00
parent 00bb4f99cb
commit e484af6e71
6 changed files with 255 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,60 +1,28 @@
import { Link } from 'react-router'
import { GraphIcon } from '~/components/icons/graph' import { GraphIcon } from '~/components/icons/graph'
interface CardReportProperty { interface CardReportProperty {
title: string title: string
amound?: number amound?: number | string
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, url } = properties const { title, amound } = properties
return url ? ( return (
<div className="flex h-26 max-w-[360px] min-w-[300px] items-center justify-between rounded bg-white px-4 py-6 shadow-sm"> <>
<GraphIcon <div className="flex items-center rounded bg-white px-4 py-6 shadow-sm">
className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white" <GraphIcon
height={48} className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
width={48} height={48}
/> width={48}
<Link />
to={url} <div className="ml-10">
className="text-[#2E2F7C]" <h2 className="text-lg font-semibold">{title}</h2>
> <p className="text-2xl font-bold text-[#2E2F7C]">Rp. {amound}</p>
<div className="text-[#2E2F7C]">
<h2 className="text-medium font-medium text-[#363636]">{title}</h2>
<p className="text-2xl font-bold">
<span>Rp.</span>
{amound}
</p>
</div> </div>
</Link>
</div>
) : (
<div className="flex h-26 max-w-[360px] min-w-[300px] items-center justify-between gap-4 rounded bg-white px-4 py-6 shadow-sm">
<GraphIcon
className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
height={48}
width={48}
/>
<div className="text-[#2E2F7C]">
<h2 className="text-medium font-medium text-[#363636]">{title}</h2>
<p className="text-2xl font-bold">
<span>Rp.</span>
{amound}
</p>
{/* <div className="flex flex-row gap-4 text-[#363636]">
<p>
<span>Pribadi : </span> {0}
</p>
<p>
<span>Perusahaan : </span> {0}
</p>
</div> */}
</div> </div>
</div> </>
) )
} }

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

@ -1,5 +1,5 @@
export const REPORT = [ export const REPORT = [
{ title: 'Total Transaksi', amound: 1_000_000, icon: 'money' }, { 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: 'Transaksi Tertagih', amound: 2_000_000, icon: 'money' }, { title: 'Transaksi Tertagih', amound: 2_000_000, icon: 'money' },
] ]

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

@ -1,31 +1,89 @@
import { GraphIcon } from '~/components/icons/graph'
import { CardReport } from '~/components/ui/card-report' import { CardReport } from '~/components/ui/card-report'
import { REPORT, HISTORY } from './data' import { REPORT } from './data'
export const DashboardPage = () => { export const DashboardPage = () => {
return ( return (
<div className="relative"> <div className="relative">
<div> <div className="container mx-auto">
<h1>Dashboard</h1> <section className="mb-5 flex items-center justify-between">
<div>tanggal</div> <h1 className="text-xl font-bold">Dashboard</h1>
</div> <div className="flex items-center gap-2">
<span>Tanggal:</span>
<input
type="date"
className="rounded border p-2"
/>
<input
type="date"
className="rounded border p-2"
/>
</div>
</section>
<div className="flex flex-row gap-4"> <div className="mb-5 grid grid-cols-3 gap-4">
{REPORT.map((report) => ( {REPORT.map((report, index) => (
<CardReport <CardReport
key={report.title} key={index}
title={report.title} title={report.title}
amound={report.amound} amound={report.amound}
></CardReport> ></CardReport>
))} ))}
</div> </div>
<div className="mt-5 flex flex-col gap-4">
{HISTORY.map((report) => ( <div className="grid grid-cols-3 gap-x-4 gap-y-4">
<CardReport <div className="grid gap-y-4">
key={report.title} <div className="rounded-lg bg-white p-5 shadow">
title={report.title} <div className="flex items-center">
counter={report.counter} <GraphIcon
></CardReport> className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
))} height={48}
width={48}
/>
<div className="ml-10">
<h2 className="text-lg font-semibold">Total Kunjungan</h2>
<p className="text-3xl font-bold text-[#2E2F7C]">2.890</p>
</div>
</div>
<p className="pt-2">Pribadi: 2.190 | Perusahaan: 700</p>
</div>
<div className="rounded-lg bg-white p-5 shadow">
<div className="flex items-center">
<GraphIcon
className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
height={48}
width={48}
/>
<div className="ml-10">
<h2 className="text-lg font-semibold">Total User Memesan</h2>
<p className="text-3xl font-bold text-[#2E2F7C]">274</p>
</div>
</div>
<p className="pt-2">Pribadi: 211 | Perusahaan: 54</p>
</div>
</div>
<div className="col-span-2">
<img
src="/images/dummy-chart-2.svg"
alt=""
/>
</div>
</div>
<div className="mt-5 flex justify-between gap-5">
<div className="w-[600px] shadow-sm">
<img
src="/images/dummy-chart-1.svg"
alt=""
/>
</div>
<div className="w-[480px] shadow-sm">
<img
src="/images/dummy-chart-3.svg"
alt=""
/>
</div>
</div>
</div> </div>
</div> </div>
) )

39
public/images/dummy-chart-1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

103
public/images/dummy-chart-2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

18
public/images/dummy-chart-3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB