365 lines
13 KiB
TypeScript
365 lines
13 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { Plus, Trash2, Pencil, RefreshCcw, AlertCircle, Loader2 } from "lucide-react";
|
||
import MaterialTable from "@material-table/core";
|
||
import { getAllRoles, createRole, updateRole, deleteRole, type Role } from "../api/roles";
|
||
import ConfirmModal from "../components/layout/common/ConfirmModal";
|
||
|
||
interface RoleForm {
|
||
name: string;
|
||
description: string;
|
||
permissions?: Record<string, Record<string, boolean>>;
|
||
}
|
||
|
||
export default function RolesPage() {
|
||
const [roles, setRoles] = useState<Role[]>([]);
|
||
const [activeRole, setActiveRole] = useState<Role | null>(null);
|
||
const [search, setSearch] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [editingId, setEditingId] = useState<string | null>(null);
|
||
|
||
const emptyForm: RoleForm = {
|
||
name: "",
|
||
description: "",
|
||
permissions: {},
|
||
};
|
||
|
||
const [form, setForm] = useState<RoleForm>(emptyForm);
|
||
|
||
useEffect(() => {
|
||
fetchRoles();
|
||
}, []);
|
||
|
||
const fetchRoles = async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const data = await getAllRoles();
|
||
setRoles(data);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : "Failed to load roles");
|
||
console.error("Error fetching roles:", err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
if (!form.name.trim()) {
|
||
setError("Role name is required");
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
if (editingId) {
|
||
const updated = await updateRole(editingId, form);
|
||
setRoles(prev => prev.map(r => r.id === editingId ? updated : r));
|
||
} else {
|
||
const created = await createRole(form);
|
||
setRoles(prev => [...prev, created]);
|
||
}
|
||
setShowModal(false);
|
||
setEditingId(null);
|
||
setForm(emptyForm);
|
||
setActiveRole(null);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : "Failed to save role");
|
||
console.error("Error saving role:", err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
if (!activeRole) return;
|
||
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
await deleteRole(activeRole.id);
|
||
setRoles(prev => prev.filter(r => r.id !== activeRole.id));
|
||
setActiveRole(null);
|
||
setShowDeleteConfirm(false);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : "Failed to delete role");
|
||
console.error("Error deleting role:", err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const openEditModal = () => {
|
||
if (!activeRole) return;
|
||
setEditingId(activeRole.id);
|
||
setForm({
|
||
name: activeRole.name,
|
||
description: activeRole.description,
|
||
permissions: activeRole.permissions,
|
||
});
|
||
setShowModal(true);
|
||
};
|
||
|
||
const filtered = roles.filter(r =>
|
||
r.name.toLowerCase().includes(search.toLowerCase()) ||
|
||
r.description?.toLowerCase().includes(search.toLowerCase())
|
||
);
|
||
|
||
return (
|
||
<div className="flex gap-6 p-6 w-full bg-gray-100">
|
||
{/* LEFT INFO SIDEBAR */}
|
||
<div className="w-72 bg-white rounded-xl shadow p-4">
|
||
<h3 className="text-xs font-semibold text-gray-500 mb-3">Role Information</h3>
|
||
<p className="text-sm text-gray-700 mb-4">
|
||
Manage system roles and their permissions. Roles define what actions users can perform.
|
||
</p>
|
||
|
||
{activeRole && (
|
||
<div className="mt-6 pt-4 border-t">
|
||
<h4 className="text-xs font-semibold text-gray-500 mb-2">Selected Role</h4>
|
||
<div className="space-y-2">
|
||
<div>
|
||
<p className="text-xs text-gray-500">Name</p>
|
||
<p className="text-sm font-medium">{activeRole.name}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-gray-500">Description</p>
|
||
<p className="text-sm">{activeRole.description || "No description"}</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-xs text-gray-500">Created</p>
|
||
<p className="text-sm">{new Date(activeRole.created_at).toLocaleDateString()}</p>
|
||
</div>
|
||
{activeRole.permissions && Object.keys(activeRole.permissions).length > 0 && (
|
||
<div>
|
||
<p className="text-xs text-gray-500">Permissions</p>
|
||
<p className="text-sm">{Object.keys(activeRole.permissions).length} permission groups</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* MAIN */}
|
||
<div className="flex-1 flex flex-col gap-6">
|
||
{/* HEADER */}
|
||
<div className="rounded-xl shadow p-6 text-white flex justify-between items-center"
|
||
style={{ background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)" }}>
|
||
<div>
|
||
<h1 className="text-2xl font-bold">Role Management</h1>
|
||
<p className="text-sm text-blue-100">{roles.length} roles registered</p>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={() => { setForm(emptyForm); setEditingId(null); setShowModal(true); }}
|
||
disabled={loading}
|
||
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg hover:bg-gray-100 transition disabled:opacity-50"
|
||
>
|
||
<Plus size={16} /> Add
|
||
</button>
|
||
<button
|
||
onClick={openEditModal}
|
||
disabled={!activeRole || loading}
|
||
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg hover:bg-white/10 transition disabled:opacity-50"
|
||
>
|
||
<Pencil size={16} /> Edit
|
||
</button>
|
||
<button
|
||
onClick={() => setShowDeleteConfirm(true)}
|
||
disabled={!activeRole || loading}
|
||
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg hover:bg-red-500/20 transition disabled:opacity-50"
|
||
>
|
||
<Trash2 size={16} /> Delete
|
||
</button>
|
||
<button
|
||
onClick={fetchRoles}
|
||
disabled={loading}
|
||
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg hover:bg-white/10 transition disabled:opacity-50"
|
||
>
|
||
{loading ? <Loader2 size={16} className="animate-spin" /> : <RefreshCcw size={16} />}
|
||
Refresh
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ERROR ALERT */}
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
|
||
<AlertCircle className="text-red-600" size={20} />
|
||
<div>
|
||
<p className="text-sm font-medium text-red-800">Error</p>
|
||
<p className="text-sm text-red-600">{error}</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setError(null)}
|
||
className="ml-auto text-red-600 hover:text-red-800"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* SEARCH */}
|
||
<input
|
||
className="bg-white rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="Search role by name or description..."
|
||
value={search}
|
||
onChange={e => setSearch(e.target.value)}
|
||
/>
|
||
|
||
{/* TABLE */}
|
||
<div className="bg-white rounded-xl shadow">
|
||
{loading && roles.length === 0 ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="animate-spin text-blue-600" size={32} />
|
||
</div>
|
||
) : (
|
||
<MaterialTable
|
||
title="Roles"
|
||
columns={[
|
||
{
|
||
title: "Name",
|
||
field: "name",
|
||
render: (rowData) => (
|
||
<span className="font-medium text-gray-900">{rowData.name}</span>
|
||
)
|
||
},
|
||
{
|
||
title: "Description",
|
||
field: "description",
|
||
render: (rowData) => (
|
||
<span className="text-gray-600">{rowData.description || "—"}</span>
|
||
)
|
||
},
|
||
{
|
||
title: "Permissions",
|
||
field: "permissions",
|
||
render: (rowData) => {
|
||
const count = rowData.permissions ? Object.keys(rowData.permissions).length : 0;
|
||
return (
|
||
<span className="text-sm text-gray-600">
|
||
{count > 0 ? `${count} groups` : "No permissions"}
|
||
</span>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: "Created",
|
||
field: "created_at",
|
||
type: "date",
|
||
render: (rowData) => (
|
||
<span className="text-sm text-gray-600">
|
||
{new Date(rowData.created_at).toLocaleDateString()}
|
||
</span>
|
||
)
|
||
}
|
||
]}
|
||
data={filtered}
|
||
onRowClick={(_, rowData) => setActiveRole(rowData as Role)}
|
||
options={{
|
||
actionsColumnIndex: -1,
|
||
search: false,
|
||
paging: true,
|
||
pageSize: 10,
|
||
pageSizeOptions: [10, 20, 50],
|
||
sorting: true,
|
||
rowStyle: (rowData) => ({
|
||
backgroundColor: activeRole?.id === (rowData as Role).id ? "#EEF2FF" : "#FFFFFF",
|
||
cursor: "pointer"
|
||
})
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ADD/EDIT MODAL */}
|
||
{showModal && (
|
||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-xl p-6 w-96 space-y-4 shadow-xl">
|
||
<h2 className="text-lg font-semibold text-gray-900">
|
||
{editingId ? "Edit Role" : "Add New Role"}
|
||
</h2>
|
||
|
||
<div className="space-y-3">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Name <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
className="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="e.g., ADMIN, USER, MANAGER"
|
||
value={form.name}
|
||
onChange={e => setForm({...form, name: e.target.value})}
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Description
|
||
</label>
|
||
<textarea
|
||
className="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||
placeholder="Describe the role's purpose..."
|
||
rows={3}
|
||
value={form.description}
|
||
onChange={e => setForm({...form, description: e.target.value})}
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
|
||
{/* Note about permissions */}
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||
<p className="text-xs text-blue-800">
|
||
<strong>Note:</strong> Permissions can be configured after creating the role.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2 pt-3 border-t">
|
||
<button
|
||
onClick={() => {
|
||
setShowModal(false);
|
||
setEditingId(null);
|
||
setForm(emptyForm);
|
||
setError(null);
|
||
}}
|
||
disabled={loading}
|
||
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition disabled:opacity-50"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={loading || !form.name.trim()}
|
||
className="bg-[#4c5f9e] text-white px-4 py-2 rounded-lg hover:bg-[#3d4c7d] transition disabled:opacity-50 flex items-center gap-2"
|
||
>
|
||
{loading && <Loader2 size={16} className="animate-spin" />}
|
||
{loading ? "Saving..." : "Save"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* DELETE CONFIRMATION MODAL */}
|
||
<ConfirmModal
|
||
open={showDeleteConfirm}
|
||
onClose={() => setShowDeleteConfirm(false)}
|
||
onConfirm={handleDelete}
|
||
title="Delete Role"
|
||
message={`Are you sure you want to delete the role "${activeRole?.name}"? This action cannot be undone.`}
|
||
confirmText="Delete"
|
||
danger={true}
|
||
loading={loading}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|