84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import { Link } from "@remix-run/react";
|
|
import { Icons } from "~/components/icons";
|
|
import PageContainer from "~/components/page-container";
|
|
import { DataTable } from "~/components/table/data-table";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card, CardContent } from "~/components/ui/card";
|
|
import Spinner from "~/components/ui/spinner";
|
|
import { useCountProjects } from "~/services/projects/count";
|
|
import { useGetAllTopUp } from "~/services/top-up/get-all";
|
|
import { useGetKasKoperasi } from "~/services/top-up/kas-koperasi";
|
|
import { useCountUsers } from "~/services/user/count";
|
|
import toRupiah from "~/utils/to-rupiah";
|
|
import { columns } from "./components/table/columns";
|
|
|
|
export default function DashboardPage() {
|
|
const { data: countUsers } = useCountUsers();
|
|
const { data: countProjects } = useCountProjects();
|
|
const { data: kasKoperasi } = useGetKasKoperasi();
|
|
console.log("kasKoperasi", kasKoperasi);
|
|
const { data: topUpData, isLoading } = useGetAllTopUp({ isDashboard: true });
|
|
|
|
return (
|
|
<PageContainer>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between space-y-2">
|
|
<h2 className="font-bold text-2xl tracking-tight">Dashboard</h2>
|
|
</div>
|
|
<section className="grid grid-cols-1 gap-2 xl:grid-cols-3">
|
|
<DashboardCard value={countUsers} title="Total User" icon="users" />
|
|
<DashboardCard value={countProjects} title="Total Proyek" icon="project" />
|
|
<DashboardCard
|
|
value={toRupiah(kasKoperasi?.total ?? 0)}
|
|
title="Kas Koperasi"
|
|
icon="moon"
|
|
/>
|
|
</section>
|
|
<div className="space-y-3 overflow-auto rounded-md bg-white p-5 shadow-md">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-bold text-xl">10 Top Up Terakhir</h3>
|
|
<Button asChild variant="outline">
|
|
<Link to="/dashboard/saldo/top-up">Lihat Semua</Link>
|
|
</Button>
|
|
</div>
|
|
{isLoading ? (
|
|
<div className="mx-auto flex items-center justify-center">
|
|
<Spinner />
|
|
</div>
|
|
) : (
|
|
<DataTable
|
|
columns={columns}
|
|
data={topUpData || []}
|
|
searchKey="topup_nama"
|
|
searchLabel="Nama User"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
function DashboardCard({
|
|
title,
|
|
value,
|
|
icon,
|
|
}: { title?: string; value?: number | string; icon?: keyof typeof Icons }) {
|
|
const Icon = Icons[icon || "arrowRight"];
|
|
return (
|
|
<Card className="w-full flex-1 shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="rounded-full bg-green-100 p-3">
|
|
<Icon className="h-6 w-6 text-green-700" />
|
|
</div>
|
|
<div>
|
|
<p className="font-bold text-2xl">{value}</p>
|
|
<p className="text-muted-foreground text-sm">{title}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|