135 lines
3.3 KiB
TypeScript
135 lines
3.3 KiB
TypeScript
// src/components/manajemenUsers/UserTable.tsx
|
|
|
|
import type { UserType } from "../../routes/ManajementUsers";
|
|
|
|
type Props = {
|
|
users: UserType[];
|
|
selectedRole: string;
|
|
search: string;
|
|
onEdit: (
|
|
user: UserType
|
|
) => void;
|
|
onDelete: (
|
|
id: string
|
|
) => void;
|
|
};
|
|
|
|
export default function UsersTable({
|
|
users,
|
|
selectedRole,
|
|
search,
|
|
onEdit,
|
|
onDelete,
|
|
}: Props) {
|
|
|
|
/* FILTER */
|
|
const filteredUsers =
|
|
users.filter((user) => {
|
|
const matchRole =
|
|
selectedRole === "Semua" ||
|
|
user.role === selectedRole;
|
|
|
|
const matchSearch =
|
|
user.nama
|
|
.toLowerCase()
|
|
.includes(
|
|
search.toLowerCase()
|
|
);
|
|
|
|
return (
|
|
matchRole &&
|
|
matchSearch
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="bg-white rounded-3xl shadow-lg p-6 overflow-x-auto">
|
|
|
|
<table className="w-full text-left">
|
|
|
|
{/* HEADER */}
|
|
<thead>
|
|
<tr className="border-b text-gray-700">
|
|
<th className="p-3">ID</th>
|
|
<th className="p-3">Nama</th>
|
|
<th className="p-3">Role</th>
|
|
<th className="p-3">Kelas</th>
|
|
<th className="p-3">Status</th>
|
|
<th className="p-3 text-center min-w-[180px]">
|
|
Aksi
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
{/* BODY */}
|
|
<tbody>
|
|
{filteredUsers.map(
|
|
(user) => (
|
|
<tr
|
|
key={user.id}
|
|
className="border-b hover:bg-gray-50"
|
|
>
|
|
<td className="p-3">
|
|
{user.id}
|
|
</td>
|
|
|
|
<td className="p-3 font-medium">
|
|
{user.nama}
|
|
</td>
|
|
|
|
<td className="p-3">
|
|
{user.role}
|
|
</td>
|
|
|
|
<td className="p-3">
|
|
{user.kelas}
|
|
</td>
|
|
|
|
<td className="p-3">
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-sm ${
|
|
user.status === "Aktif"
|
|
? "bg-green-100 text-green-700"
|
|
: "bg-red-100 text-red-700"
|
|
}`}
|
|
>
|
|
{user.status}
|
|
</span>
|
|
</td>
|
|
|
|
{/* AKSI */}
|
|
<td className="p-3">
|
|
<div className="flex justify-center gap-3">
|
|
|
|
{/* EDIT */}
|
|
<button
|
|
onClick={() =>
|
|
onEdit(user)
|
|
}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 transition"
|
|
>
|
|
Edit
|
|
</button>
|
|
|
|
{/* HAPUS */}
|
|
<button
|
|
onClick={() =>
|
|
onDelete(
|
|
user.id
|
|
)
|
|
}
|
|
className="bg-red-600 text-white px-4 py-2 rounded-xl hover:bg-red-700 transition"
|
|
>
|
|
Hapus
|
|
</button>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
} |