koperasi/services/frontend/app/routes/dashboard.saldo.tarik-proyek._index/components/modal/penarikan-proyek.tsx
2025-08-08 14:12:40 +07:00

81 lines
2.8 KiB
TypeScript

import { EyeIcon } from "lucide-react";
import { toast } from "sonner";
import { Button } from "~/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog";
import { Label } from "~/components/ui/label";
import { useShareProfit } from "~/services/projects/share-profit";
import { useGetTotalProfit } from "~/services/projects/total-profit";
import type { Proyek } from "~/types/api/proyek";
import toRupiah from "~/utils/to-rupiah";
interface DetailPenarikanSaldoProyekProps {
data: Proyek;
}
export default function DetailPenarikanSaldoProyek({ data }: DetailPenarikanSaldoProyekProps) {
const { mutateAsync } = useShareProfit();
const { data: profitData } = useGetTotalProfit(data.id ?? "");
const handleWithdraw = async () => {
try {
await mutateAsync(data.id);
toast.success("Berhasil melakukan penarikan saldo proyek");
} catch (error) {
console.error(error);
toast.error("Gagal melakukan penarikan saldo proyek");
}
};
return (
<Dialog>
<DialogTrigger asChild>
<Button size="sm">
<EyeIcon className="h-5 w-5" />
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[28rem]">
<DialogHeader>
<DialogTitle>Verifikasi Withdraw</DialogTitle>
<DialogDescription className="sr-only">
Lihat detail pembayaran top up saldo
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Pemilik Proyek</Label>
<div className="col-span-3 flex items-center gap-2">
<span className="text-gray-500 text-sm">{data.user?.nama}</span>
</div>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Kategori</Label>
<div className="col-span-3 flex items-center gap-2">
<span className="text-gray-500 text-sm">{data.kategori?.kategori}</span>
</div>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label className="text-right">Pendapatan Proyek</Label>
<div className="col-span-3 flex items-center gap-2">
<span className="text-gray-500 text-sm">{toRupiah(profitData?.total ?? 0)}</span>
</div>
</div>
</div>
<div className="flex justify-end gap-4">
<DialogClose asChild>
<Button variant="destructive">Batal</Button>
</DialogClose>
<Button onClick={handleWithdraw}>Withdraw</Button>
</div>
</DialogContent>
</Dialog>
);
}