72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { CardReport } from '~/components/ui/card-report'
|
|
|
|
import { HISTORY, REPORT } from './data'
|
|
export const DashboardPage = () => {
|
|
return (
|
|
<div className="relative">
|
|
<div className="container mx-auto">
|
|
<section className="mb-5 flex items-center justify-between">
|
|
<h1 className="text-xl font-bold">Dashboard</h1>
|
|
<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="mb-5 grid grid-cols-3 gap-4">
|
|
{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">
|
|
{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
|
|
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>
|
|
)
|
|
}
|