feat: wire internal role management to real API
Full wiring: load() fetches audience=INTERNAL roles, save() creates/updates
via POST/PATCH with key/name/description/department_id/permissions/settings,
delete and status toggle wired. Permission matrix uses MODULE_PERMISSIONS
with prefix_ACTION keys. Detail view fetches permission_keys from GET /{id}.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ashwin Kumar
parent
0d9837b8dc
commit
7c4ed94975
1 changed files with 435 additions and 110 deletions
|
|
@ -1,29 +1,57 @@
|
|||
import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
|
||||
import { useSearchParams } from '@solidjs/router';
|
||||
import AdminShell from '~/components/AdminShell';
|
||||
import type { CrudRecord } from '~/lib/admin/types';
|
||||
|
||||
const API = '/api/gateway';
|
||||
|
||||
type RoleRecord = CrudRecord & {
|
||||
code?: string;
|
||||
key?: string;
|
||||
department?: string;
|
||||
departmentId?: string;
|
||||
description?: string;
|
||||
usersAssigned?: number;
|
||||
permissionsCount?: number;
|
||||
status: 'ACTIVE' | 'INACTIVE';
|
||||
canApproveRequests?: boolean;
|
||||
canManageSystemSettings?: boolean;
|
||||
createdDate?: string;
|
||||
};
|
||||
|
||||
const FALLBACK_ROLES: RoleRecord[] = [
|
||||
{ id: 'r1', name: 'System Administrator', code: 'ADM-SYS', department: 'IT', usersAssigned: 12, permissionsCount: 150, status: 'ACTIVE', createdDate: '2026-01-12' },
|
||||
{ id: 'r2', name: 'HR Manager', code: 'HR-MGR', department: 'HR', usersAssigned: 4, permissionsCount: 45, status: 'ACTIVE', createdDate: '2026-02-05' },
|
||||
{ id: 'r3', name: 'Finance Controller', code: 'FIN-CON', department: 'Finance', usersAssigned: 2, permissionsCount: 60, status: 'INACTIVE', createdDate: '2026-03-18' },
|
||||
];
|
||||
type DepartmentOption = { id: string; name: string };
|
||||
|
||||
const MODULES = [
|
||||
'Employee Management', 'Department Management', 'Designation Management', 'Internal Role Management',
|
||||
'Verification Management', 'Approval Management', 'Users Management', 'Company Management'
|
||||
// Permission matrix: each module maps to CRUD permission keys
|
||||
const MODULE_PERMISSIONS = [
|
||||
{ module: 'Employee Management', prefix: 'EMPLOYEES' },
|
||||
{ module: 'Department Management', prefix: 'DEPARTMENTS' },
|
||||
{ module: 'Designation Management', prefix: 'DESIGNATIONS' },
|
||||
{ module: 'Role Management', prefix: 'ROLES' },
|
||||
{ module: 'Verification Management', prefix: 'VERIFICATIONS' },
|
||||
{ module: 'Approval Management', prefix: 'APPROVALS' },
|
||||
{ module: 'Users Management', prefix: 'USERS' },
|
||||
{ module: 'Company Management', prefix: 'COMPANIES' },
|
||||
];
|
||||
const ACTIONS = ['VIEW', 'CREATE', 'UPDATE', 'DELETE'] as const;
|
||||
|
||||
function permKey(prefix: string, action: string) {
|
||||
return `${prefix}_${action}`;
|
||||
}
|
||||
|
||||
function normalizeRole(item: any, idx: number): RoleRecord {
|
||||
return {
|
||||
id: String(item.id ?? `role-${idx + 1}`),
|
||||
name: String(item.name ?? ''),
|
||||
key: item.key ? String(item.key) : undefined,
|
||||
department: item.department_name ? String(item.department_name) : undefined,
|
||||
departmentId: item.department_id ? String(item.department_id) : undefined,
|
||||
description: item.description ? String(item.description) : undefined,
|
||||
usersAssigned: Number(item.users_assigned ?? 0),
|
||||
permissionsCount: Number(item.permissions_count ?? 0),
|
||||
canApproveRequests: Boolean(item.can_approve_requests ?? false),
|
||||
canManageSystemSettings: Boolean(item.can_manage_system_settings ?? false),
|
||||
status: item.is_active === false ? 'INACTIVE' : 'ACTIVE',
|
||||
updatedAt: String(item.updated_at ?? item.created_at ?? ''),
|
||||
createdDate: String(item.created_at ?? ''),
|
||||
};
|
||||
}
|
||||
|
||||
function StatusBadge(props: { status: string }) {
|
||||
const active = () => props.status === 'ACTIVE';
|
||||
|
|
@ -57,47 +85,196 @@ export default function RoleManagementPage() {
|
|||
const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
|
||||
const [formTab, setFormTab] = createSignal<'general' | 'permissions' | 'settings'>('general');
|
||||
const [detailTab, setDetailTab] = createSignal<'permissions' | 'users' | 'logs'>('permissions');
|
||||
|
||||
|
||||
const [search, setSearch] = createSignal('');
|
||||
const [rows, setRows] = createSignal<RoleRecord[]>([]);
|
||||
const [viewingRole, setViewingRole] = createSignal<RoleRecord | null>(null);
|
||||
const [viewingPermissions, setViewingPermissions] = createSignal<string[]>([]);
|
||||
const [editingId, setEditingId] = createSignal<string | null>(null);
|
||||
const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
|
||||
const [isLoading, setIsLoading] = createSignal(false);
|
||||
const [error, setError] = createSignal('');
|
||||
|
||||
// Form state
|
||||
const [name, setName] = createSignal('');
|
||||
const [code, setCode] = createSignal('');
|
||||
const [dept, setDept] = createSignal('');
|
||||
const [desc, setDesc] = createSignal('');
|
||||
const [roleKey, setRoleKey] = createSignal('');
|
||||
const [description, setDescription] = createSignal('');
|
||||
const [departmentId, setDepartmentId] = createSignal('');
|
||||
const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
|
||||
const [canApproveRequests, setCanApproveRequests] = createSignal(false);
|
||||
const [canManageSystemSettings, setCanManageSystemSettings] = createSignal(false);
|
||||
const [selectedPermissions, setSelectedPermissions] = createSignal<Set<string>>(new Set());
|
||||
const [isSaving, setIsSaving] = createSignal(false);
|
||||
const [formError, setFormError] = createSignal('');
|
||||
const [departments, setDepartments] = createSignal<DepartmentOption[]>([]);
|
||||
|
||||
const load = async () => {
|
||||
setRows(FALLBACK_ROLES);
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const params = new URLSearchParams({ audience: 'INTERNAL', per_page: '100', q: search().trim() });
|
||||
const res = await fetch(`${API}/api/admin/roles?${params}`);
|
||||
if (!res.ok) throw new Error(`Request failed (${res.status})`);
|
||||
const payload = await res.json().catch(() => null);
|
||||
const list: any[] = Array.isArray(payload)
|
||||
? payload
|
||||
: Array.isArray(payload?.roles)
|
||||
? payload.roles
|
||||
: [];
|
||||
setRows(list.map(normalizeRole));
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Could not reach roles API.');
|
||||
setRows([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => void load());
|
||||
const loadDepartments = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/departments?per_page=100`);
|
||||
if (!res.ok) return;
|
||||
const payload = await res.json().catch(() => null);
|
||||
const list: any[] = Array.isArray(payload?.departments) ? payload.departments : [];
|
||||
setDepartments(list.map((d: any) => ({ id: String(d.id), name: String(d.name) })));
|
||||
} catch { /* dropdown just empty */ }
|
||||
};
|
||||
|
||||
onMount(() => { void load(); void loadDepartments(); });
|
||||
|
||||
const filteredRows = createMemo(() => {
|
||||
const q = search().toLowerCase();
|
||||
if (!q) return rows();
|
||||
return rows().filter(r => r.name.toLowerCase().includes(q) || (r.code || '').toLowerCase().includes(q));
|
||||
return rows().filter(r =>
|
||||
r.name.toLowerCase().includes(q) || (r.key || '').toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
|
||||
const togglePermission = (key: string) => {
|
||||
setSelectedPermissions(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setEditingId(null); setName(''); setCode(''); setDept(''); setDesc(''); setFormTab('general');
|
||||
setEditingId(null); setName(''); setRoleKey(''); setDescription('');
|
||||
setDepartmentId(''); setStatus('ACTIVE'); setCanApproveRequests(false);
|
||||
setCanManageSystemSettings(false); setSelectedPermissions(new Set());
|
||||
setFormTab('general'); setFormError('');
|
||||
};
|
||||
|
||||
const openCreate = () => { resetForm(); setView('form'); };
|
||||
|
||||
const openEdit = (row: RoleRecord) => {
|
||||
setEditingId(row.id); setName(row.name); setCode(row.code || '');
|
||||
setDept(row.department || ''); setView('form'); setOpenMenuId(null);
|
||||
setEditingId(row.id);
|
||||
setName(row.name); setRoleKey(row.key || '');
|
||||
setDescription(row.description || '');
|
||||
setDepartmentId(row.departmentId || '');
|
||||
setStatus(row.status === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE');
|
||||
setCanApproveRequests(Boolean(row.canApproveRequests));
|
||||
setCanManageSystemSettings(Boolean(row.canManageSystemSettings));
|
||||
setSelectedPermissions(new Set());
|
||||
setFormTab('general'); setView('form'); setOpenMenuId(null);
|
||||
// Fetch permission_keys for this role
|
||||
fetch(`${API}/api/admin/roles/${row.id}`).then(r => r.json()).then(detail => {
|
||||
if (Array.isArray(detail?.permission_keys)) {
|
||||
setSelectedPermissions(new Set(detail.permission_keys));
|
||||
}
|
||||
}).catch(() => {});
|
||||
};
|
||||
const openDetail = (row: RoleRecord) => {
|
||||
|
||||
const openDetail = async (row: RoleRecord) => {
|
||||
setViewingRole(row); setView('detail'); setListTab('view'); setOpenMenuId(null);
|
||||
setViewingPermissions([]);
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/roles/${row.id}`);
|
||||
if (res.ok) {
|
||||
const detail = await res.json();
|
||||
setViewingPermissions(Array.isArray(detail?.permission_keys) ? detail.permission_keys : []);
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!name().trim() || !roleKey().trim()) {
|
||||
setFormError('Role name and role key are required.');
|
||||
setFormTab('general');
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
setFormError('');
|
||||
try {
|
||||
const isCreate = !editingId();
|
||||
const endpoint = isCreate
|
||||
? `${API}/api/admin/roles`
|
||||
: `${API}/api/admin/roles/${editingId()}`;
|
||||
const method = isCreate ? 'POST' : 'PATCH';
|
||||
const body: Record<string, unknown> = {
|
||||
name: name().trim(),
|
||||
description: description().trim() || null,
|
||||
is_active: status() === 'ACTIVE',
|
||||
can_approve_requests: canApproveRequests(),
|
||||
can_manage_system_settings: canManageSystemSettings(),
|
||||
permission_keys: Array.from(selectedPermissions()),
|
||||
};
|
||||
if (departmentId().trim()) body.department_id = departmentId().trim();
|
||||
if (isCreate) {
|
||||
body.key = roleKey().trim();
|
||||
body.audience = 'INTERNAL';
|
||||
}
|
||||
const res = await fetch(endpoint, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error((data as any).message || `Request failed (${res.status})`);
|
||||
}
|
||||
setView('list');
|
||||
resetForm();
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setFormError(err?.message || 'Failed to save role.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteRole = async (id: string, roleName: string) => {
|
||||
if (!window.confirm(`Delete role "${roleName}"?`)) return;
|
||||
setOpenMenuId(null);
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/roles/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(`Request failed (${res.status})`);
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Failed to delete role.');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStatus = async (row: RoleRecord) => {
|
||||
setOpenMenuId(null);
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/roles/${row.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ is_active: row.status !== 'ACTIVE' }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`Request failed (${res.status})`);
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Failed to update status.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
<div class="w-full space-y-6 pb-8">
|
||||
|
||||
|
||||
<div style="margin-bottom: 1.5rem">
|
||||
<h1 class="text-[28px] font-bold leading-tight text-[#111827]">Internal Role Management</h1>
|
||||
<p class="mt-1 text-[14px] text-[#6B7280]">Define and manage organizational access levels with granular permission control</p>
|
||||
|
|
@ -107,7 +284,7 @@ export default function RoleManagementPage() {
|
|||
<Show when={view() === 'list'}>
|
||||
<div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
|
||||
{([
|
||||
{ key: 'all', label: 'All Roles', action: () => setListTab('all') },
|
||||
{ key: 'all', label: 'All Roles', action: () => { setListTab('all'); void load(); } },
|
||||
{ key: 'create', label: 'Create Role', action: () => { setListTab('create'); openCreate(); } },
|
||||
{ key: 'view', label: 'View Role', action: () => setListTab('view') },
|
||||
] as const).map((tab) => (
|
||||
|
|
@ -121,15 +298,18 @@ export default function RoleManagementPage() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
<div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||||
<Show when={error()}>
|
||||
<div style="margin-top:16px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">{error()}</div>
|
||||
</Show>
|
||||
|
||||
<div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
|
||||
<input
|
||||
value={search()}
|
||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
||||
onInput={(e) => { setSearch(e.currentTarget.value); void load(); }}
|
||||
placeholder="Search roles..."
|
||||
style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
|
||||
/>
|
||||
<button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">Filters</button>
|
||||
<button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">Export</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -137,35 +317,74 @@ export default function RoleManagementPage() {
|
|||
<table class="min-w-full">
|
||||
<thead>
|
||||
<tr style="background:#0D0D2A;text-align:left">
|
||||
{['Role Name', 'Role Code', 'Department', 'Users', 'Status', 'Actions'].map(h => (
|
||||
{['Role Name', 'Role Key', 'Department', 'Users', 'Permissions', 'Status', 'Actions'].map(h => (
|
||||
<th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={filteredRows()}>
|
||||
{(row) => (
|
||||
<tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
|
||||
<td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
|
||||
<td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.code || '—'}</td>
|
||||
<td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.department || '—'}</td>
|
||||
<td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.usersAssigned} users</td>
|
||||
<td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
|
||||
<td style="padding:12px 20px;position:relative">
|
||||
<button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
|
||||
</button>
|
||||
<Show when={openMenuId() === row.id}>
|
||||
<div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
|
||||
<button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Role</button>
|
||||
<button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Role</button>
|
||||
<button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Delete Role</button>
|
||||
</div>
|
||||
<Show
|
||||
when={filteredRows().length > 0}
|
||||
fallback={
|
||||
<tr>
|
||||
<td colspan="7" style="padding:48px 24px;text-align:center">
|
||||
<Show when={isLoading()} fallback={
|
||||
<>
|
||||
<p style="font-size:15px;font-weight:600;color:#111827">No internal roles found</p>
|
||||
<p style="margin-top:6px;font-size:13px;color:#6B7280">Create your first role to get started.</p>
|
||||
<button type="button" onClick={openCreate} style="margin-top:16px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;background:#0D0D2A;padding:8px 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Create Role</button>
|
||||
</>
|
||||
}>
|
||||
<p style="font-size:13px;color:#6B7280">Loading...</p>
|
||||
</Show>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
}
|
||||
>
|
||||
<For each={filteredRows()}>
|
||||
{(row) => (
|
||||
<tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
|
||||
<td style="padding:12px 20px">
|
||||
<p style="font-size:14px;font-weight:600;color:#111827">{row.name}</p>
|
||||
<Show when={row.description}>
|
||||
<p style="font-size:12px;color:#9CA3AF;margin-top:1px">{row.description}</p>
|
||||
</Show>
|
||||
</td>
|
||||
<td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.key || '—'}</td>
|
||||
<td style="padding:12px 20px;font-size:13px;color:#374151">{row.department || '—'}</td>
|
||||
<td style="padding:12px 20px;font-size:13px;color:#374151">{Number(row.usersAssigned || 0)} users</td>
|
||||
<td style="padding:12px 20px;font-size:13px;color:#374151">{Number(row.permissionsCount || 0)}</td>
|
||||
<td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
|
||||
<td style="padding:12px 20px;position:relative">
|
||||
<button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
|
||||
</button>
|
||||
<Show when={openMenuId() === row.id}>
|
||||
<div style="position:absolute;right:20px;top:44px;z-index:20;width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
|
||||
<button type="button" onClick={() => void openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">
|
||||
<svg style="width:15px;height:15px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Role
|
||||
</button>
|
||||
<button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">
|
||||
<svg style="width:15px;height:15px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="m16.5 3.5 4 4L7 21H3v-4L16.5 3.5Z"/></svg>
|
||||
Edit Role
|
||||
</button>
|
||||
<button type="button" onClick={() => void toggleStatus(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">
|
||||
<svg style="width:15px;height:15px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
|
||||
{row.status === 'ACTIVE' ? 'Deactivate' : 'Activate'}
|
||||
</button>
|
||||
<div style="height:1px;background:#F3F4F6;margin:4px 0" />
|
||||
<button type="button" onClick={() => void deleteRole(row.id, row.name)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">
|
||||
<svg style="width:15px;height:15px;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg>
|
||||
Delete Role
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -175,7 +394,7 @@ export default function RoleManagementPage() {
|
|||
{/* ── FORM VIEW ── */}
|
||||
<Show when={view() === 'form'}>
|
||||
<div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
|
||||
<button type="button" onClick={() => setView('list')} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Roles</button>
|
||||
<button type="button" onClick={() => { setView('list'); resetForm(); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Roles</button>
|
||||
<button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Role' : 'Create Role'}</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -194,60 +413,139 @@ export default function RoleManagementPage() {
|
|||
</div>
|
||||
|
||||
<div style="padding:24px">
|
||||
<Show when={formError()}>
|
||||
<div style="margin-bottom:20px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">{formError()}</div>
|
||||
</Show>
|
||||
|
||||
{/* General */}
|
||||
<Show when={formTab() === 'general'}>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||||
<FormInput label="Role Name" required value={name()} onInput={setName} />
|
||||
<FormInput label="Role Code" required value={code()} onInput={setCode} />
|
||||
<FormInput label="Department" value={dept()} onInput={setDept} />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={formTab() === 'permissions'}>
|
||||
<div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
|
||||
<table style="width:100%;border-collapse:collapse">
|
||||
<thead style="background:#F9FAFB">
|
||||
<tr style="text-align:left">
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
|
||||
{['View', 'Create', 'Update', 'Delete'].map(p => (
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
|
||||
<div style="display:flex;flex-direction:column;gap:20px">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||||
<FormInput label="Role Name" required value={name()} onInput={setName} placeholder="e.g. HR Manager" />
|
||||
<FormInput label="Role Key" required value={roleKey()} onInput={setRoleKey} placeholder="e.g. HR_MANAGER" />
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||||
<label style="display:block">
|
||||
<span style="font-size:13px;font-weight:600;color:#374151">Department</span>
|
||||
<select
|
||||
value={departmentId()}
|
||||
onChange={(e) => setDepartmentId(e.currentTarget.value)}
|
||||
style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box;appearance:none"
|
||||
>
|
||||
<option value="">Select department</option>
|
||||
<For each={departments()}>{(d) => <option value={d.id}>{d.name}</option>}</For>
|
||||
</select>
|
||||
</label>
|
||||
<label style="display:block">
|
||||
<span style="font-size:13px;font-weight:600;color:#374151">Status</span>
|
||||
<div style="margin-top:6px;display:flex;gap:8px">
|
||||
{(['ACTIVE', 'INACTIVE'] as const).map((s) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStatus(s)}
|
||||
style={`flex:1;height:40px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${status() === s ? '#FF5E13' : '#E5E7EB'};background:${status() === s ? '#FFF3EE' : 'white'};color:${status() === s ? '#FF5E13' : '#6B7280'}`}
|
||||
>
|
||||
{s === 'ACTIVE' ? 'Active' : 'Inactive'}
|
||||
</button>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={MODULES}>
|
||||
{(mod) => (
|
||||
<tr style="border-top:1px solid #E5E7EB">
|
||||
<td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
|
||||
{[1, 2, 3, 4].map(() => (
|
||||
<td style="padding:12px 16px;text-align:center">
|
||||
<input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<label style="display:block">
|
||||
<span style="font-size:13px;font-weight:600;color:#374151">Description</span>
|
||||
<textarea
|
||||
value={description()}
|
||||
onInput={(e) => setDescription(e.currentTarget.value)}
|
||||
placeholder="Brief description of this role's responsibilities..."
|
||||
rows="3"
|
||||
style="display:block;margin-top:6px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:10px 14px;font-size:13px;color:#111827;outline:none;resize:none;box-sizing:border-box;font-family:inherit"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Permissions */}
|
||||
<Show when={formTab() === 'permissions'}>
|
||||
<div>
|
||||
<p style="margin-bottom:16px;font-size:13px;color:#6B7280">Select the module access permissions for this role.</p>
|
||||
<div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
|
||||
<table style="width:100%;border-collapse:collapse">
|
||||
<thead style="background:#F9FAFB">
|
||||
<tr style="text-align:left">
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
|
||||
<For each={ACTIONS}>
|
||||
{(action) => (
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{action.charAt(0) + action.slice(1).toLowerCase()}</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={MODULE_PERMISSIONS}>
|
||||
{(mp) => (
|
||||
<tr style="border-top:1px solid #E5E7EB">
|
||||
<td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mp.module}</td>
|
||||
<For each={ACTIONS}>
|
||||
{(action) => {
|
||||
const pk = permKey(mp.prefix, action);
|
||||
return (
|
||||
<td style="padding:12px 16px;text-align:center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedPermissions().has(pk)}
|
||||
onChange={() => togglePermission(pk)}
|
||||
style="width:16px;height:16px;accent-color:#FF5E13;cursor:pointer"
|
||||
/>
|
||||
</td>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Settings */}
|
||||
<Show when={formTab() === 'settings'}>
|
||||
<div style="display:flex;flex-direction:column;gap:20px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:#F9FAFB;border:1px solid #E5E7EB">
|
||||
<div>
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Allow Role to Approve Requests</p>
|
||||
<p style="font-size:12px;color:#6B7280">Users with this role can make final decisions in Approval Management.</p>
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Can Approve Requests</p>
|
||||
<p style="font-size:12px;color:#6B7280;margin-top:2px">Users with this role can make final decisions in Approval Management.</p>
|
||||
</div>
|
||||
<div style="width:40px;height:20px;background:#FF5E13;border-radius:10px;position:relative;cursor:pointer"><div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px" /></div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCanApproveRequests(v => !v)}
|
||||
style={`position:relative;width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;background:${canApproveRequests() ? '#FF5E13' : '#E5E7EB'};transition:background 0.2s;flex-shrink:0`}
|
||||
>
|
||||
<span style={`position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left 0.2s;left:${canApproveRequests() ? '22px' : '2px'}`} />
|
||||
</button>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:#F9FAFB;border:1px solid #E5E7EB">
|
||||
<div>
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Can Manage System Settings</p>
|
||||
<p style="font-size:12px;color:#6B7280;margin-top:2px">Users with this role can access and modify system-level configurations.</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCanManageSystemSettings(v => !v)}
|
||||
style={`position:relative;width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;background:${canManageSystemSettings() ? '#FF5E13' : '#E5E7EB'};transition:background 0.2s;flex-shrink:0`}
|
||||
>
|
||||
<span style={`position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left 0.2s;left:${canManageSystemSettings() ? '22px' : '2px'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
|
||||
<button type="button" onClick={() => setView('list')} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
|
||||
<button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
|
||||
{editingId() ? 'Update Role' : 'Create Role'}
|
||||
<button type="button" onClick={() => { setView('list'); resetForm(); }} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
|
||||
<button type="button" onClick={() => void save()} disabled={isSaving()} style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
|
||||
{isSaving() ? 'Saving...' : editingId() ? 'Update Role' : 'Create Role'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -255,6 +553,11 @@ export default function RoleManagementPage() {
|
|||
|
||||
{/* ── DETAIL VIEW ── */}
|
||||
<Show when={view() === 'detail' && viewingRole()}>
|
||||
<div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
|
||||
<button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Roles</button>
|
||||
<button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">View Role</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
|
||||
<div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
|
||||
<div>
|
||||
|
|
@ -262,7 +565,14 @@ export default function RoleManagementPage() {
|
|||
<h2 style="font-size:20px;font-weight:700;color:#111827">{viewingRole()!.name}</h2>
|
||||
<StatusBadge status={viewingRole()!.status} />
|
||||
</div>
|
||||
<p style="font-size:14px;color:#6B7280;margin-top:2px">Code: {viewingRole()!.code} • Dept: {viewingRole()!.department} • Assigned: {viewingRole()!.usersAssigned} users</p>
|
||||
<p style="font-size:13px;color:#6B7280;margin-top:4px">
|
||||
Key: <code style="font-family:monospace;background:#F3F4F6;padding:1px 6px;border-radius:4px">{viewingRole()!.key || '—'}</code>
|
||||
{viewingRole()!.department ? ` • ${viewingRole()!.department}` : ''}
|
||||
{` • ${Number(viewingRole()!.usersAssigned || 0)} users assigned`}
|
||||
</p>
|
||||
<Show when={viewingRole()!.description}>
|
||||
<p style="font-size:13px;color:#6B7280;margin-top:2px">{viewingRole()!.description}</p>
|
||||
</Show>
|
||||
</div>
|
||||
<button type="button" onClick={() => openEdit(viewingRole()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Role</button>
|
||||
</div>
|
||||
|
|
@ -282,47 +592,62 @@ export default function RoleManagementPage() {
|
|||
|
||||
<div style="padding:24px">
|
||||
<Show when={detailTab() === 'permissions'}>
|
||||
<div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;opacity:0.7">
|
||||
<div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
|
||||
<table style="width:100%;border-collapse:collapse">
|
||||
<thead style="background:#F9FAFB">
|
||||
<tr style="text-align:left">
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
|
||||
{['View', 'Create', 'Update', 'Delete'].map(p => (
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
|
||||
))}
|
||||
<For each={ACTIONS}>
|
||||
{(action) => (
|
||||
<th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{action.charAt(0) + action.slice(1).toLowerCase()}</th>
|
||||
)}
|
||||
</For>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For each={MODULES}>
|
||||
{(mod) => (
|
||||
<For each={MODULE_PERMISSIONS}>
|
||||
{(mp) => (
|
||||
<tr style="border-top:1px solid #E5E7EB">
|
||||
<td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
|
||||
{[1, 2, 3, 4].map(() => (
|
||||
<td style="padding:12px 16px;text-align:center">
|
||||
<input type="checkbox" checked disabled style="width:16px;height:16px;accent-color:#FF5E13" />
|
||||
</td>
|
||||
))}
|
||||
<td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mp.module}</td>
|
||||
<For each={ACTIONS}>
|
||||
{(action) => {
|
||||
const pk = permKey(mp.prefix, action);
|
||||
const has = () => viewingPermissions().includes(pk);
|
||||
return (
|
||||
<td style="padding:12px 16px;text-align:center">
|
||||
<input type="checkbox" checked={has()} disabled style={`width:16px;height:16px;accent-color:#FF5E13;cursor:default;opacity:${has() ? '1' : '0.4'}`} />
|
||||
</td>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tr>
|
||||
)}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="margin-top:16px;display:flex;gap:16px">
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB">
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Can Approve Requests:</p>
|
||||
<span style={`font-size:13px;font-weight:600;color:${viewingRole()!.canApproveRequests ? '#FF5E13' : '#9CA3AF'}`}>{viewingRole()!.canApproveRequests ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB">
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Can Manage Settings:</p>
|
||||
<span style={`font-size:13px;font-weight:600;color:${viewingRole()!.canManageSystemSettings ? '#FF5E13' : '#9CA3AF'}`}>{viewingRole()!.canManageSystemSettings ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={detailTab() === 'users'}>
|
||||
<div style="padding:20px;text-align:center;font-size:14px;color:#6B7280">Users assigned to this role will appear here.</div>
|
||||
<div style="padding:32px;text-align:center">
|
||||
<p style="font-size:14px;font-weight:600;color:#111827">{Number(viewingRole()!.usersAssigned || 0)} users assigned</p>
|
||||
<p style="margin-top:6px;font-size:13px;color:#6B7280">Detailed user list will be available when employee management is connected.</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={detailTab() === 'logs'}>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;gap:12px">
|
||||
<div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
|
||||
<div>
|
||||
<p style="font-size:13px;font-weight:600;color:#111827">Permissions Updated</p>
|
||||
<p style="font-size:12px;color:#6B7280">Admin modified module access levels • 1 day ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:32px;text-align:center">
|
||||
<p style="font-size:13px;color:#6B7280">Activity logs will appear here.</p>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue