82 lines
3.2 KiB
JavaScript
82 lines
3.2 KiB
JavaScript
const RolesTab = ({ state, handlers }) => {
|
||
// ✅ PERBAIKAN: Ambil setShowCreateRoleModal dari state
|
||
const { roles, loading, setShowCreateRoleModal } = state;
|
||
|
||
// handlers hanya berisi fungsi logika (API calls)
|
||
const { handleEditRole, handleDeleteRole } = handlers;
|
||
|
||
return (
|
||
<div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl shadow-xl border border-slate-700">
|
||
<div className="p-6 border-b border-slate-700 flex justify-between items-center">
|
||
<h2 className="text-xl font-semibold text-white">
|
||
🔑 Kelola Role & Hak Akses
|
||
</h2>
|
||
<button
|
||
onClick={() => setShowCreateRoleModal(true)} // Sekarang fungsi ini sudah didefinisikan
|
||
className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg"
|
||
>
|
||
➕ Tambah Role
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{roles.map((role) => (
|
||
<div
|
||
key={role.id}
|
||
className="bg-slate-700/30 border border-slate-600 rounded-xl p-5 hover:border-blue-500 transition"
|
||
>
|
||
<div className="flex justify-between items-start mb-3">
|
||
<div>
|
||
<h3 className="text-lg font-bold text-white capitalize">
|
||
{role.name}
|
||
</h3>
|
||
<p className="text-sm text-slate-400">{role.description}</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => handleEditRole(role)}
|
||
className="p-2 bg-yellow-600/20 text-yellow-400 rounded hover:bg-yellow-600/40"
|
||
>
|
||
✏️
|
||
</button>
|
||
{/* Jangan izinkan hapus admin/user/manager default jika perlu */}
|
||
{role.name !== "admin" && role.name !== "user" && (
|
||
<button
|
||
onClick={() => handleDeleteRole(role.id)}
|
||
className="p-2 bg-red-600/20 text-red-400 rounded hover:bg-red-600/40"
|
||
>
|
||
🗑️
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4">
|
||
<strong className="text-xs text-slate-500 uppercase block mb-2">
|
||
Hak Akses (Permissions):
|
||
</strong>
|
||
<div className="flex flex-wrap gap-2">
|
||
{role.permissions && role.permissions.length > 0 ? (
|
||
role.permissions.map((perm) => (
|
||
<span
|
||
key={perm.id}
|
||
className="px-2 py-1 bg-blue-500/10 text-blue-300 border border-blue-500/20 rounded text-xs"
|
||
>
|
||
{perm.name}
|
||
</span>
|
||
))
|
||
) : (
|
||
<span className="text-slate-500 text-xs italic">
|
||
Tidak ada permission khusus
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
window.RolesTab = RolesTab;
|