128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import DialogUserDetail from "../dialog/admin-detail";
|
||
|
||
export default function UserManagementTable() {
|
||
const [selectedUser, setSelectedUser] = useState<any>(null);
|
||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||
|
||
const data = [
|
||
{
|
||
createdAt: "14 Januari 2025 13:00",
|
||
fullName: "Novan Farhandi",
|
||
email: "novanfarhandi@example.com",
|
||
status: "Approved",
|
||
},
|
||
{
|
||
createdAt: "14 Januari 2025 13:00",
|
||
fullName: "Salma Husna",
|
||
email: "salmahusna@example.com",
|
||
status: "Tertunda",
|
||
},
|
||
];
|
||
|
||
const openDialog = (user: any) => {
|
||
setSelectedUser(user);
|
||
setIsDialogOpen(true);
|
||
};
|
||
|
||
const closeDialog = () => {
|
||
setIsDialogOpen(false);
|
||
setSelectedUser(null);
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white shadow rounded-lg p-4">
|
||
<div className="overflow-x-auto">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="bg-gray-100">
|
||
<TableHead className="text-gray-600">Nama Lengkap</TableHead>
|
||
<TableHead className="text-gray-600">Email</TableHead>
|
||
<TableHead className="text-gray-600">Tanggal Daftar</TableHead>
|
||
<TableHead className="text-gray-600">Status</TableHead>
|
||
<TableHead className="text-gray-600">Tindakan</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
|
||
<TableBody>
|
||
{data.map((row, i) => (
|
||
<TableRow key={i} className="hover:bg-gray-50 transition-colors">
|
||
<TableCell>{row.fullName}</TableCell>
|
||
<TableCell className="font-medium text-gray-800">
|
||
{row.email}
|
||
</TableCell>
|
||
<TableCell className="text-gray-700">{row.createdAt}</TableCell>
|
||
|
||
<TableCell>
|
||
<span
|
||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||
row.status === "Approved"
|
||
? "bg-green-100 text-green-700"
|
||
: "bg-gray-200 text-gray-700"
|
||
}`}
|
||
>
|
||
{row.status}
|
||
</span>
|
||
</TableCell>
|
||
|
||
<TableCell>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
className="text-blue-600 hover:underline"
|
||
onClick={() => openDialog(row)}
|
||
>
|
||
Lihat
|
||
</button>
|
||
<button className="text-green-600 hover:underline">
|
||
Approve
|
||
</button>
|
||
<button className="text-red-500 hover:underline">
|
||
Hapus
|
||
</button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-4 text-sm text-gray-500 gap-2">
|
||
<div className="flex items-center">
|
||
<span>Rows per page:</span>
|
||
<select className="ml-2 border rounded px-1 py-0.5">
|
||
<option>6</option>
|
||
<option>12</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between sm:justify-end gap-2">
|
||
<span>1–1 of 1</span>
|
||
<div className="flex gap-1">
|
||
<button className="text-gray-400 hover:text-gray-600">◀</button>
|
||
<button className="text-gray-400 hover:text-gray-600">▶</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ✅ Dialog terpisah */}
|
||
<DialogUserDetail
|
||
isOpen={isDialogOpen}
|
||
onClose={closeDialog}
|
||
user={selectedUser}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|