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

feat: add bar and subscription chart components, update dashboard integration

Browse Source
This commit is contained in:
fredy.siswanto
2025-02-26 00:35:53 +07:00
parent bd92f9a09f
commit 6a00b9207e
2 changed files with 187 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/dashboard/index.tsx
+23 -11
View File
@@ -1,10 +1,28 @@
import { CardReport } from '~/components/ui/card-report'
import { ChartPie } from '~/components/ui/chart'
import {
ChartSubscription,
UiChartBar,
UiChartPie,
} from '~/components/ui/chart'
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">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="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
{REPORT.map(({ title, amount, icon }, index) => (
<CardReport
@@ -27,28 +45,22 @@ export const DashboardPage = () => {
/>
))}
<div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
<ChartPie />
<UiChartPie />
</div>
</div>
<div className="my-5 grid grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
<div className="mt-5 grid max-h-[280px] grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
<div className="sm:col-span-3">
<div className="h-30 w-full">
<div className="shadow-sm">
<img
src="/images/dummy-chart-1.svg"
alt=""
/>
<UiChartBar />
</div>
</div>
</div>
<div className="sm:col-span-2 sm:col-start-4">
<div className="h-30 w-full">
<div className="shadow-sm">
<img
src="/images/dummy-chart-3.svg"
alt=""
/>
<ChartSubscription />
</div>
</div>
</div>