61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { CardReport } from '~/components/ui/card-report'
|
|
|
|
import { ChartBar } from './chart-bar'
|
|
import { ChartDonut } from './chart-donut'
|
|
import { ChartPie } from './chart-pie'
|
|
import { HISTORY, REPORT } from './data'
|
|
export const DashboardPage = () => {
|
|
return (
|
|
<div className="relative">
|
|
<section className="mb-5 flex items-center justify-between">
|
|
<h1 className="text-xl font-bold">Dasbor</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="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
|
|
{REPORT.map(({ title, amount, icon, currency }, index) => (
|
|
<CardReport
|
|
key={index}
|
|
title={title}
|
|
amount={amount}
|
|
icon={icon}
|
|
currency={currency}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
|
|
{HISTORY.map(({ title, amount, icon }, index) => (
|
|
<CardReport
|
|
key={index}
|
|
title={title}
|
|
amount={amount}
|
|
icon={icon}
|
|
/>
|
|
))}
|
|
<div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
|
|
<ChartPie />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
|
|
<div className="h-full w-full sm:w-[60%]">
|
|
<ChartBar />
|
|
</div>
|
|
<div className="w-ful h-full sm:w-[40%]">
|
|
<ChartDonut />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|