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

feat: add DoctorIcon component and integrate it into dashboard reports

Browse Source
This commit is contained in:
Ardeman
2025-02-24 09:31:48 +08:00
parent 4d7fa04d91
commit ca0dfbc5f8
4 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/dashboard/data.ts
+10 -7
View File
@@ -1,20 +1,23 @@
import { DoctorIcon } from '~/components/icons/doctor'
import { GraphIcon } from '~/components/icons/graph'
export const REPORT = [
{ 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' },
{ 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 },
]
export const HISTORY = [
{
title: 'Total Kunjungan',
total: 1_000_000,
icon: 'money',
amount: 2890,
icon: GraphIcon,
counter: [2190, 700],
},
{
title: 'Total User Memesan',
total: 274,
icon: 'money',
amount: 274,
icon: DoctorIcon,
counter: [211, 54],
},
]
app/pages/dashboard/index.tsx
+12 -31
View File
@@ -1,7 +1,6 @@
import { GraphIcon } from '~/components/icons/graph'
import { CardReport } from '~/components/ui/card-report'
import { REPORT } from './data'
import { HISTORY, REPORT } from './data'
export const DashboardPage = () => {
return (
<div className="relative">
@@ -22,45 +21,27 @@ export const DashboardPage = () => {
</section>
<div className="mb-5 grid grid-cols-3 gap-4">
{REPORT.map(({ title, amount }, index) => (
{REPORT.map(({ title, amount, icon }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
/>
))}
</div>
<div className="grid grid-cols-3 gap-x-4 gap-y-4">
<div className="grid gap-y-4">
<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 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>
{HISTORY.map(({ title, amount, icon, counter }, index) => (
<CardReport
key={index}
title={title}
amount={amount}
icon={icon}
counter={counter}
/>
))}
</div>
<div className="col-span-2">
<img