78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogFooter,
|
||
|
|
} from "@/components/ui/dialog";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
|
||
|
|
export default function DialogUserDetail({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
user,
|
||
|
|
}: {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
user: {
|
||
|
|
fullName: string;
|
||
|
|
email: string;
|
||
|
|
createdAt: string;
|
||
|
|
status: string;
|
||
|
|
} | null;
|
||
|
|
}) {
|
||
|
|
if (!user) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
||
|
|
<DialogContent className="max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-lg font-semibold">Detail</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
{/* Status badge */}
|
||
|
|
<div className="mb-4">
|
||
|
|
<span
|
||
|
|
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||
|
|
user.status === "Approved"
|
||
|
|
? "bg-green-100 text-green-700"
|
||
|
|
: "bg-gray-200 text-gray-700"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{user.status}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4 text-sm">
|
||
|
|
<div>
|
||
|
|
<p className="text-gray-500">Nama Lengkap</p>
|
||
|
|
<p className="font-semibold text-gray-900">{user.fullName}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-gray-500">Email</p>
|
||
|
|
<p className="font-semibold text-gray-900">{user.email}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-gray-500">Tanggal Pendaftaran</p>
|
||
|
|
<p className="font-semibold text-gray-900">{user.createdAt}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<DialogFooter>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
onClick={onClose}
|
||
|
|
className="w-full text-gray-800"
|
||
|
|
>
|
||
|
|
Close
|
||
|
|
</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|