import { For, Show, createSignal } from 'solid-js'; import AdminShell from '~/components/AdminShell'; import { ChevronDown, SlidersHorizontal, Download, MoreVertical } from 'lucide-solid'; type Role = { id: string; name: string; department: string; usersAssigned: number; permissionsCount: number; status: 'ACTIVE' | 'INACTIVE'; createdDate: string; }; const FALLBACK_ROLES: Role[] = [ { id: 'r1', name: 'Engineering Lead', department: 'Engineering', usersAssigned: 12, permissionsCount: 28, status: 'ACTIVE', createdDate: '2026-01-15' }, { id: 'r2', name: 'Marketing Manager', department: 'Marketing', usersAssigned: 8, permissionsCount: 18, status: 'ACTIVE', createdDate: '2026-01-20' }, { id: 'r3', name: 'Sales Director', department: 'Sales', usersAssigned: 15, permissionsCount: 32, status: 'ACTIVE', createdDate: '2026-02-01' }, { id: 'r4', name: 'HR Admin', department: 'Human Resources', usersAssigned: 5, permissionsCount: 24, status: 'ACTIVE', createdDate: '2026-02-05' }, { id: 'r5', name: 'Finance Controller', department: 'Finance', usersAssigned: 6, permissionsCount: 20, status: 'ACTIVE', createdDate: '2026-02-10' }, { id: 'r6', name: 'Operations Head', department: 'Operations', usersAssigned: 4, permissionsCount: 16, status: 'INACTIVE', createdDate: '2026-03-01' }, { id: 'r7', name: 'Support Lead', department: 'Customer Support', usersAssigned: 9, permissionsCount: 16, status: 'ACTIVE', createdDate: '2026-03-05' }, { id: 'r8', name: 'Product Owner', department: 'Product', usersAssigned: 7, permissionsCount: 26, status: 'ACTIVE', createdDate: '2026-03-10' }, ]; const MODULES = [ 'Department Management', 'Designation Management', 'Internal Role Management', 'Employee Management', 'External Role Management', 'External Onboarding Management', 'Internal Dashboard Management', 'External Dashboard Management', 'Verification Management', 'Approval Management', 'Users Management', 'Company Management', 'Candidate Management', 'Customer Management', 'Jobs Management', 'Leads Management', 'Pricing Management', 'Credit Management', 'Coupon Management', 'Discount Management', 'Tax Management', 'Order Management', 'Invoice Management', 'Review Management', 'Support Management', 'Report Management', 'Ledger Management', ]; type PermKey = 'view' | 'create' | 'update' | 'delete'; const PERM_KEYS: PermKey[] = ['view', 'create', 'update', 'delete']; type ModulePerms = Record; type PermissionsMap = Record; function defaultPerms(): PermissionsMap { const map: PermissionsMap = {}; for (const m of MODULES) { map[m] = { view: false, create: false, update: false, delete: false }; } return map; } function StatusBadge(props: { status: string }) { const active = () => props.status === 'ACTIVE'; return ( {active() ? 'Active' : 'Inactive'} ); } function Toggle(props: { on: boolean; onChange: (v: boolean) => void }) { return ( ); } function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string }) { return ( ); } export default function RolesPage() { const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all'); const [formTab, setFormTab] = createSignal<'general' | 'access' | 'settings'>('general'); // All Roles state const [search, setSearch] = createSignal(''); // Create Role state const [roleName, setRoleName] = createSignal(''); const [roleCode, setRoleCode] = createSignal(''); const [department, setDepartment] = createSignal(''); const [description, setDescription] = createSignal(''); const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE'); const [approveRequests, setApproveRequests] = createSignal(true); const [manageSettings, setManageSettings] = createSignal(false); const [permissions, setPermissions] = createSignal(defaultPerms()); const filteredRoles = () => { const q = search().toLowerCase(); if (!q) return FALLBACK_ROLES; return FALLBACK_ROLES.filter( (r) => r.name.toLowerCase().includes(q) || r.department.toLowerCase().includes(q) ); }; const togglePerm = (mod: string, key: PermKey) => { setPermissions((prev) => ({ ...prev, [mod]: { ...prev[mod], [key]: !prev[mod][key] }, })); }; const toggleSelectAll = (mod: string) => { const p = permissions()[mod]; const allOn = PERM_KEYS.every((k) => p[k]); setPermissions((prev) => ({ ...prev, [mod]: { view: !allOn, create: !allOn, update: !allOn, delete: !allOn }, })); }; const formatDate = (d: string) => { if (!d) return '—'; const dt = new Date(d); return dt.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' }); }; const shown = () => filteredRoles(); return (
{/* Page Header */}

Internal Role Management

Manage internal roles and permissions

{/* Main Tabs */}
{/* ── ALL ROLES TAB ── */} {/* Edge-to-edge card */}
{/* Filter Bar */}
setSearch(e.currentTarget.value)} style="height:34px;flex:1;max-width:240px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827" />
{/* Table */}
{(role) => ( )}
Role Name Department Users Assigned Permissions Count Status Created Date
{role.name} {role.department} {role.usersAssigned} {role.permissionsCount} Permissions {formatDate(role.createdDate)}
{/* Pagination */}
Showing 1–{shown().length} of {shown().length} roles
{/* ── CREATE ROLE TAB ── */}
{/* Form Sub-tabs */}
{( [ { key: 'general', label: 'General Information' }, { key: 'access', label: 'Module Access' }, { key: 'settings', label: 'Role Settings' }, ] as const ).map(({ key, label }) => ( ))}
{/* ── General Information ── */}