91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import { GraphIcon } from '~/components/icons/graph'
|
|
import { CardReport } from '~/components/ui/card-report'
|
|
|
|
import { 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 }, index) => (
|
|
<CardReport
|
|
key={index}
|
|
title={title}
|
|
amount={amount}
|
|
/>
|
|
))}
|
|
</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>
|
|
</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>
|
|
)
|
|
}
|