); } // ── Onboarding Management ──────────────────────────────────────────────────── function AdminOnboarding({ onNewTicket }) { const { onboardingEmployees } = window.MOCK; const [selected, setSelected] = React.useState(null); const [employees, setEmployees] = React.useState(onboardingEmployees); function toggleStep(empId, stepIdx) { setEmployees(emps => emps.map(e => { if (e.id !== empId) return e; const steps = e.steps.map((s, i) => i === stepIdx ? { ...s, done: !s.done } : s); const progress = Math.round((steps.filter(s => s.done).length / steps.length) * 100); return { ...e, steps, progress }; })); } const emp = selected ? employees.find(e => e.id === selected) : null; const progressColor = (pct) => pct >= 80 ? '#10B981' : pct >= 40 ? '#F59E0B' : '#D96228'; return (

onNewTicket && onNewTicket('onboarding_issues')}>Raise Onboarding Concern

{/* Summary cards */}

{[ { label: 'Active Onboardings', value: employees.length, icon: 'users', color: '#1A5090', bg: '#E8EFF8' }, { label: 'Starting This Week', value: employees.filter(e => e.startDate.includes('May 21') || e.startDate.includes('May 26')).length, icon: 'clock', color: '#F59E0B', bg: '#FFFBEB' }, { label: 'Fully Complete', value: employees.filter(e => e.progress === 100).length, icon: 'check', color: '#10B981', bg: '#ECFDF5' }, ].map(c => (

{c.value}

{c.label}

))}

{/* Employee cards grid */}

{employees.map(emp => { const isSelected = selected === emp.id; const pColor = progressColor(emp.progress); return (

setSelected(isSelected ? null : emp.id)} style={{ background: '#fff', borderRadius: 12, border: `1.5px solid ${isSelected ? '#1A5090' : '#E2E8F0'}`, padding: '20px', cursor: 'pointer', transition: 'all 0.15s', boxShadow: isSelected ? '0 0 0 3px rgba(26,80,144,0.12)' : '0 1px 4px rgba(0,0,0,0.04)', }}>

n[0]).join('')} size={40} />

{emp.name}

{emp.role}

{emp.progress}%

{emp.steps.filter(s => s.done).length}/{emp.steps.length} steps Starts {emp.startDate}

Dept: {emp.department} · Mgr: {emp.manager.split(' ')[0]}

); })}

{/* Checklist panel */} {emp && (

{emp.name}

{emp.role} · {emp.department}

Checklist Progress {emp.progress}%

{emp.steps.map((step, i) => (

toggleStep(emp.id, i)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < emp.steps.length - 1 ? '1px solid #F8FAFC' : 'none', cursor: 'pointer', transition: 'opacity 0.1s', }}>

{step.done && }

{step.label}

))}

onNewTicket && onNewTicket('onboarding_issues')}> Raise Issue Concern

)}

); } // ── Admin All Tickets ──────────────────────────────────────────────────────── function AdminAllTickets({ tickets, onTicketClick, onNewTicket }) { const { categories } = window.MOCK; const [search, setSearch] = React.useState(''); const [filterCat, setFilterCat] = React.useState('All'); const [filterStatus, setFilterStatus] = React.useState('All'); const [filterPri, setFilterPri] = React.useState('All'); const filtered = tickets.filter(t => { const q = search.toLowerCase(); const matchSearch = !q || t.title.toLowerCase().includes(q) || t.id.toLowerCase().includes(q) || t.submittedBy.name.toLowerCase().includes(q); const matchCat = filterCat === 'All' || t.categoryId === filterCat; const matchStatus = filterStatus === 'All' || t.status === filterStatus; const matchPri = filterPri === 'All' || t.priority === filterPri; return matchSearch && matchCat && matchStatus && matchPri; }); const totalOpen = tickets.filter(t => t.status === 'Open').length; const totalIP = tickets.filter(t => t.status === 'In Progress').length; return (

{totalOpen} open · {totalIP} in progress · {tickets.length} total

New Concern

{/* Filters */}

setSearch(e.target.value)} placeholder="Search by title, ID, or person..." style={{ width: '100%', padding: '10px 14px 10px 36px', borderRadius: 8, border: '1.5px solid #E2E8F0', fontSize: 13, fontFamily: 'inherit', color: '#1E293B', background: '#fff', boxSizing: 'border-box', outline: 'none', }} />

{[ { value: filterCat, setter: setFilterCat, opts: [['All', 'All Categories'], ...categories.filter(c => !c.adminOnly).map(c => [c.id, c.label])] }, { value: filterStatus, setter: setFilterStatus, opts: [['All','All Statuses'],['Open','Open'],['In Progress','In Progress'],['Resolved','Resolved'],['Closed','Closed']] }, { value: filterPri, setter: setFilterPri, opts: [['All','All Priorities'],['Urgent','Urgent'],['High','High'],['Medium','Medium'],['Low','Low']] }, ].map((f, i) => ( ))}

{/* Table */}

{['ID', 'Title', 'Category', 'By', 'Priority', 'Status', 'Updated'].map(h => ( {h} ))}

{filtered.length === 0 ? (

No concerns match your filters

) : filtered.map((t, i) => { const cat = categories.find(c => c.id === t.categoryId); return (

onTicketClick(t)} onMouseEnter={e => e.currentTarget.style.background = '#FAFBFF'} onMouseLeave={e => e.currentTarget.style.background = '#fff'} style={{ display: 'grid', gridTemplateColumns: '70px 1fr 110px 36px 58px 95px 70px', alignItems: 'center', gap: 10, padding: '11px 20px', background: '#fff', cursor: 'pointer', borderBottom: i < filtered.length - 1 ? '1px solid #F1F5F9' : 'none', transition: 'background 0.1s', }}> {t.id}

{t.title}

{cat?.label}

{t.updatedAt}

); })}

Showing {filtered.length} of {tickets.length} concerns

); } // ── Category Access Tab ─────────────────────────────────────────────────────── function CategoryAccessTab() { const DEPARTMENTS = ['HR', 'Finance', 'IT', 'Marketing', 'Operations', 'Management']; const { categories } = window.MOCK; const managedCats = categories.filter(c => !c.adminOnly); const [accessMap, setAccessMap] = React.useState({}); const [saving, setSaving] = React.useState(null); const [flash, setFlash] = React.useState(null); const [loading, setLoading] = React.useState(true); function authH() { return { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }; } React.useEffect(() => { fetch('/api/category-access/all', { headers: authH() }) .then(r => r.ok ? r.json() : {}) .then(data => { setAccessMap(data); setLoading(false); }) .catch(() => setLoading(false)); }, []); async function toggleDept(catId, dept) { const current = accessMap[catId] || []; const updated = current.includes(dept) ? current.filter(d => d !== dept) : [...current, dept]; setAccessMap(m => ({ ...m, [catId]: updated })); setSaving(catId + dept); try { const res = await fetch(`/api/category-access/${catId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ departments: updated }), }); if (!res.ok) throw new Error('Failed'); setFlash({ type: 'success', text: 'Access updated.' }); } catch (e) { setFlash({ type: 'error', text: 'Failed to save.' }); setAccessMap(m => ({ ...m, [catId]: current })); } finally { setSaving(null); setTimeout(() => setFlash(null), 3000); } } if (loading) return

Loading…

; return (

Category Access Control

Check which departments can view all concerns in each category. Users always see their own concerns regardless.

{flash && (

{flash.text}

)}

{/* Header row */}

'1fr').join(' ')}`, gap: 8, padding: '10px 20px', background: '#F8FAFC', borderBottom: '1.5px solid #E2E8F0', }}> Category {DEPARTMENTS.map(d => ( {d} ))}

{managedCats.map((cat, i) => { const depts = accessMap[cat.id] || []; return (

'1fr').join(' ')}`, gap: 8, padding: '14px 20px', alignItems: 'center', borderBottom: i < managedCats.length - 1 ? '1px solid #F1F5F9' : 'none', }}>

{cat.label}

{DEPARTMENTS.map(dept => { const checked = depts.includes(dept); const isSaving = saving === cat.id + dept; return (

); })}

Changes take effect immediately. Admin always has access to all categories.

); } // ── Admin User Management ───────────────────────────────────────────────────── function AdminUsers() { const [tab, setTab] = React.useState('onboard'); const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [apiError, setApiError] = React.useState(null); const [search, setSearch] = React.useState(''); const DEPARTMENTS = ['HR', 'Finance', 'IT', 'Marketing', 'Operations', 'Management']; const [form, setForm] = React.useState({ name: '', email: '', department: '', role: 'user' }); const [formError, setFormError] = React.useState(null); const [submitting, setSubmitting] = React.useState(false); const [flash, setFlash] = React.useState(null); const [confirmUser, setConfirmUser] = React.useState(null); const [deleteUser, setDeleteUser] = React.useState(null); const [promoteTarget, setPromoteTarget] = React.useState(''); const [promoting, setPromoting] = React.useState(false); function authH() { return { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }; } async function fetchUsers() { setLoading(true); setApiError(null); try { const res = await fetch('/api/users', { headers: authH() }); if (!res.ok) throw new Error('Status ' + res.status); setUsers(await res.json()); } catch (e) { setApiError(e.message); } finally { setLoading(false); } } React.useEffect(() => { fetchUsers(); }, []); function showFlash(type, text) { setFlash({ type, text }); setTimeout(() => setFlash(null), 6000); } function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); } function fmtDate(val) { if (!val) return '—'; try { return new Date(val).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return val; } } async function handleAdd(e) { e.preventDefault(); setFormError(null); const name = form.name.trim(); const email = form.email.trim().toLowerCase(); if (!name) { setFormError('Full name is required.'); return; } if (!isValidEmail(email)) { setFormError('Please enter a valid email address.'); return; } if (users.some(u => u.email.toLowerCase() === email)) { setFormError('This Gmail address is already registered.'); return; } setSubmitting(true); try { const res = await fetch('/api/users/onboard', { method: 'POST', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ name, email, role: 'user', department: '' }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed to add member'); showFlash('success', `${name} added successfully! Temporary password: ${data.tempPassword}`); setForm({ name: '', email: '', department: '', role: 'user' }); fetchUsers(); } catch (e) { setFormError(e.message); } finally { setSubmitting(false); } } async function doDelete(user) { setDeleteUser(null); try { const res = await fetch(`/api/users/${user.id}`, { method: 'DELETE', headers: authH() }); if (!res.ok) throw new Error((await res.json()).error || 'Failed'); showFlash('success', `${user.name} has been permanently deleted.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function doResetPassword(user) { if (!window.confirm(`Reset password for ${user.name}? A new temporary password will be sent to ${user.email}.`)) return; try { const res = await fetch(`/api/users/${user.id}/reset-password`, { method: 'POST', headers: authH() }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); showFlash('success', `Password reset for ${user.name}. Temp password: ${data.tempPassword} — email sent.`); } catch (e) { showFlash('error', e.message); } } async function doOffboard(user) { setConfirmUser(null); try { const res = await fetch(`/api/users/${user.id}/offboard`, { method: 'PUT', headers: authH() }); if (!res.ok) throw new Error((await res.json()).error || 'Failed'); showFlash('success', `${user.name}'s access has been removed.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function doReactivate(user) { try { const res = await fetch(`/api/users/${user.id}/reactivate`, { method: 'PUT', headers: authH() }); if (!res.ok) throw new Error('Failed'); showFlash('success', `${user.name} has been reactivated.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function handleChangeRole(userId, newRole, name) { try { const res = await fetch(`/api/users/${userId}/change-role`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ role: newRole }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed to update role'); showFlash('success', data.message || `${name}'s role updated to ${newRole}.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function handlePromote() { if (!promoteTarget) return; const target = users.find(u => String(u.id) === String(promoteTarget)); if (!target) return; setPromoting(true); await handleChangeRole(promoteTarget, 'admin', target.name); setPromoteTarget(''); setPromoting(false); } const activeUsers = users.filter(u => u.status === 'active'); const removedUsers = users.filter(u => u.status !== 'active'); function filtered(list) { if (!search.trim()) return list; const q = search.toLowerCase(); return list.filter(u => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)); } // ── Shared styles ── const INPUT = { width: '100%', padding: '10px 14px', borderRadius: 8, border: '1.5px solid #E2E8F0', fontSize: 14, fontFamily: 'inherit', color: '#1E293B', background: '#FAFBFF', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s', }; const LABEL = { display: 'block', fontSize: 11, fontWeight: 700, color: '#374151', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, }; function TH({ cols, headers }) { return (

{headers.map(h => {h})}

); } const TABS = [ { id: 'onboard', label: 'Onboard New Member', dot: '#10B981' }, { id: 'offboard', label: 'Offboard Members', dot: '#EF4444' }, { id: 'coordinator', label: 'Coordinator', dot: '#0EA5E9' }, { id: 'access', label: 'Category Access', dot: '#8B5CF6' }, ]; // ── Offboard table (reused in offboard + members tabs) ── function MemberRow({ u, idx, showStatus, onOffboard, onReactivate, onResetPassword, onDelete }) { const isActive = u.status === 'active'; const cols = showStatus ? '40px 1fr 200px 120px 90px 200px' : '40px 1fr 200px 130px 200px'; return (

{idx + 1}

{u.name}

{u.email} {fmtDate(u.created_at)} {showStatus && ( {isActive ? 'Active' : 'Removed'} )}

{isActive && u.role === 'admin' && Protected} {isActive && u.role !== 'admin' && ( <> )} {!isActive && ( )} {u.role !== 'admin' && ( )}

); } function SectionTable({ label, dot, list, showStatus, emptyMsg }) { const rows = filtered(list); const cols = showStatus ? '40px 1fr 200px 120px 90px 200px' : '40px 1fr 200px 130px 200px'; const hdrs = showStatus ? ['#', 'Name', 'Email', 'Date Added', 'Status', 'Actions'] : ['#', 'Name', 'Email', 'Date Added', 'Actions']; return (

{label} ({rows.length})

{rows.length === 0 ?

{emptyMsg}

: rows.map((u, i) => (

)) }

); } return (

{/* ── Confirm Delete Modal ── */} {deleteUser && (

Permanently Delete User

Are you sure you want to permanently delete {deleteUser.name}?

{deleteUser.email}

⚠️ This action is irreversible. The user and all their data will be permanently removed.

setDeleteUser(null)}>Cancel

)} {/* ── Confirm Remove Modal ── */} {confirmUser && (

Confirm Removal

Are you sure you want to remove {confirmUser.name}'s access?

{confirmUser.email}

This will immediately revoke their platform access.

setConfirmUser(null)}>Cancel

)} {/* ── Stats ── */}

{[ { label: 'Active Members', value: activeUsers.length, icon: 'users', bg: '#ECFDF5', ic: '#10B981' }, { label: 'Removed Members', value: removedUsers.length, icon: 'userplus', bg: '#FEF2F2', ic: '#EF4444' }, ].map(c => (

{loading ? '—' : c.value}

{c.label}

))}

{/* ── Flash ── */} {flash && (

{flash.text}

)} {/* ── API error ── */} {apiError && (

Backend not reachable: {apiError} — run docker compose up -d and refresh.

)} {/* ── Tabs ── */}

{TABS.map(t => ( ))}

{/* ───────────────────────────────────────────────────────────────────── TAB: ONBOARD ───────────────────────────────────────────────────────────────────── */} {tab === 'onboard' && (

{/* Form card */}

Add New Member

Grant platform access to a new team member

{/* Hint card */}

What happens next?

{[ { icon: 'check', color: '#10B981', bg: '#ECFDF5', text: 'Member is granted platform access immediately.' }, { icon: 'send', color: '#1A5090', bg: '#E8EFF8', text: 'A welcome email with login credentials is sent to their Gmail.' }, { icon: 'users', color: '#D96228', bg: '#FEF0EB', text: 'They appear in the Active Members list right away.' }, ].map((s, i) => (

{s.text}

))}

)} {/* ───────────────────────────────────────────────────────────────────── TAB: OFFBOARD ───────────────────────────────────────────────────────────────────── */} {tab === 'offboard' && (

setSearch(e.target.value)} placeholder="Search by name or Gmail…" style={{ ...INPUT, paddingLeft: 38 }} />

{loading ?

Loading members…

: <> {removedUsers.length > 0 && ( )} }

)} {/* ───────────────────────────────────────────────────────────────────── TAB: COORDINATOR ───────────────────────────────────────────────────────────────────── */} {tab === 'coordinator' && ( )} {/* ───────────────────────────────────────────────────────────────────── TAB: CATEGORY ACCESS ───────────────────────────────────────────────────────────────────── */} {tab === 'access' && } {/* Admin Users tab removed — now a top-level page: Admin Management */} {tab === '__removed_admins__' && (

{/* Current admins */}

Current Admins ({users.filter(u => u.role === 'admin' && u.status === 'active').length})

{['#', 'Name', 'Email', 'Added', 'Actions'].map(h => ( {h} ))}

{loading ? (

Loading…

) : (() => { const admins = users.filter(u => u.role === 'admin' && u.status === 'active'); if (!admins.length) return

No admins found.

; return admins.map((u, i) => { const isCurrentUser = String(u.id) === String(window._synUser?.id) || u.email === window._synUser?.email; const isLastAdmin = admins.length === 1; return (

{i + 1}

{u.name} {isCurrentUser && You}

Admin

{u.email} {fmtDate(u.created_at)}

{isCurrentUser ? ( That's you ) : isLastAdmin ? ( Last admin ) : ( )}

); }); })()}

{/* Promote existing user */}

Promote Existing User to Admin

Select an active user to grant them full admin access

Select User

Admins have full access to all tickets, users, and settings. Only promote trusted team members.

Admin Access Includes

{[ { icon: 'ticket', color: '#1A5090', bg: '#E8EFF8', text: 'View, manage, and delete all tickets' }, { icon: 'users', color: '#10B981', bg: '#ECFDF5', text: 'Add, remove, and manage all users' }, { icon: 'chart', color: '#8B5CF6', bg: '#F5F3FF', text: 'Full dashboard and analytics access' }, { icon: 'settings',color: '#D97706', bg: '#FFFBEB', text: 'Department and category settings' }, ].map((s, i) => (

{s.text}

))}

)}

); } // ── Department Management ───────────────────────────────────────────────────── function AdminTeams() { // Admin sections — HR covers both onboarding_issues + payroll + hr teams under one section. // Marketing sub-teams (Asura/Laura/Deepthi/Wade) are grouped under Marketing. const ADMIN_SECTIONS = [ { id: 'technical_support', label: 'IT Support', color: '#60A5FA', bg: '#EFF6FF', categoryIds: ['technical_support'] }, { id: 'marketing', label: 'Marketing', color: '#A78BFA', bg: '#F5F3FF', categoryIds: ['marketing'] }, { id: 'hr', label: 'HR', color: '#34D399', bg: '#ECFDF5', categoryIds: ['hr', 'onboarding_issues', 'payroll'] }, { id: 'training_issues', label: 'Training Issues', color: '#FBBF24', bg: '#FEF3C7', categoryIds: ['training_issues'] }, { id: 'others', label: 'People Related Issues', color: '#94A3B8', bg: '#F1F5F9', categoryIds: ['others'] }, ]; const [teams, setTeams] = React.useState([]); const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [flash, setFlash] = React.useState(null); const [expandedDepts, setExpandedDepts] = React.useState(new Set()); const [expandedTeams, setExpandedTeams] = React.useState(new Set()); const [addingTeamFor, setAddingTeamFor] = React.useState(null); // category_id const [addingMemberFor, setAddingMemberFor] = React.useState(null); // team id const [newTeam, setNewTeam] = React.useState({ name: '', description: '' }); const [newMember, setNewMember] = React.useState({ name: '', email: '' }); const [saving, setSaving] = React.useState(false); function authH() { return { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }; } function showFlash(type, text) { setFlash({ type, text }); setTimeout(() => setFlash(null), 4000); } async function fetchTeams() { try { const res = await fetch('/api/teams', { headers: authH() }); const data = await res.json(); setTeams(data); } catch (e) { showFlash('error', 'Failed to load teams'); } finally { setLoading(false); } } async function fetchUsers() { try { const res = await fetch('/api/users', { headers: authH() }); if (res.ok) setUsers(await res.json()); } catch (e) {} } React.useEffect(() => { fetchTeams(); fetchUsers(); }, []); function toggleDept(catId) { setExpandedDepts(prev => { const next = new Set(prev); if (next.has(catId)) next.delete(catId); else next.add(catId); return next; }); } function toggleTeam(teamId) { setExpandedTeams(prev => { const next = new Set(prev); if (next.has(teamId)) next.delete(teamId); else next.add(teamId); return next; }); } async function createTeam(e, catId) { e.preventDefault(); if (!newTeam.name.trim()) return; setSaving(true); try { const res = await fetch('/api/teams', { method: 'POST', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ name: newTeam.name, category_id: catId, description: newTeam.description }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); setTeams(t => [...t, data]); setExpandedTeams(prev => new Set([...prev, data.id])); setNewTeam({ name: '', description: '' }); setAddingTeamFor(null); showFlash('success', `Team "${data.name}" created.`); } catch (e) { showFlash('error', e.message); } finally { setSaving(false); } } async function deleteTeam(team) { if (!window.confirm(`Delete team "${team.name}" and all its members?`)) return; try { await fetch(`/api/teams/${team.id}`, { method: 'DELETE', headers: authH() }); setTeams(t => t.filter(x => x.id !== team.id)); showFlash('success', `Team "${team.name}" deleted.`); } catch (e) { showFlash('error', 'Failed to delete'); } } async function addMember(e, team) { e.preventDefault(); if (!newMember.name.trim() || !newMember.email.trim()) return; setSaving(true); try { const res = await fetch(`/api/teams/${team.id}/members`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify(newMember), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); setTeams(ts => ts.map(t => t.id === team.id ? { ...t, members: [...(t.members || []), data] } : t)); setNewMember({ name: '', email: '' }); setAddingMemberFor(null); showFlash('success', `${data.name} added to ${team.name}.`); } catch (e) { showFlash('error', e.message); } finally { setSaving(false); } } async function removeMember(team, memberId, memberName) { try { await fetch(`/api/teams/${team.id}/members/${memberId}`, { method: 'DELETE', headers: authH() }); setTeams(ts => ts.map(t => t.id === team.id ? { ...t, members: t.members.filter(m => m.id !== memberId) } : t)); showFlash('success', `${memberName} removed.`); } catch (e) { showFlash('error', 'Failed to remove'); } } const INPUT = { padding: '8px 12px', borderRadius: 8, border: '1.5px solid #E2E8F0', fontSize: 13, fontFamily: 'inherit', color: '#1E293B', background: '#FAFBFF', outline: 'none', boxSizing: 'border-box', }; if (loading) return

Loading…

; return (

{flash && (

{flash.text}

)}

{ADMIN_SECTIONS.map(cat => { const catTeams = teams.filter(t => cat.categoryIds.includes(t.category_id)); const isDeptOpen = expandedDepts.has(cat.id); const privilegedCount = cat.id === 'others' ? users.filter(u => (u.role === 'admin' || u.role === 'coordinator') && u.status === 'active').length : 0; const totalMembers = catTeams.reduce((s, t) => s + (t.members || []).length, 0) + privilegedCount; return (

{/* ── Department header ── */}

toggleDept(cat.id)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px', cursor: 'pointer', userSelect: 'none', background: isDeptOpen ? cat.bg : '#fff', borderBottom: isDeptOpen ? `1.5px solid ${cat.color}30` : 'none', }}>

{cat.label} {catTeams.length} team{catTeams.length !== 1 ? 's' : ''} · {totalMembers} member{totalMembers !== 1 ? 's' : ''}

{/* ── Department body ── */} {isDeptOpen && (

{/* Add team form */} {addingTeamFor === cat.id && (

createTeam(e, cat.id)} style={{ background: cat.bg, border: `1.5px dashed ${cat.color}`, borderRadius: 10, padding: '14px 16px', }}>

New Team — {cat.label}

setNewTeam(f => ({ ...f, name: e.target.value }))} required autoFocus /> setNewTeam(f => ({ ...f, description: e.target.value }))} />

)} {/* Empty state */} {catTeams.length === 0 && addingTeamFor !== cat.id && (

No teams yet — click "Add Team" to create one for {cat.label}.

)} {/* ── Admins & Coordinators — auto-included for People Related Issues ── */} {cat.id === 'others' && (() => { const privileged = users.filter(u => (u.role === 'admin' || u.role === 'coordinator') && u.status === 'active' ); if (privileged.length === 0) return null; return (

Admins & Coordinators {privileged.length} member{privileged.length !== 1 ? 's' : ''}

Auto-included

{privileged.map((u, i) => (

{u.name}

{u.email}

{u.role}

))}

); })()} {/* Team cards */} {catTeams.map(team => { const isTeamOpen = expandedTeams.has(team.id); const isAddingMember = addingMemberFor === team.id; const memberCount = (team.members || []).length; return (

{/* Team row */}

toggleTeam(team.id)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 16px', cursor: 'pointer', userSelect: 'none', background: isTeamOpen ? '#F8FAFF' : '#fff', borderBottom: isTeamOpen ? '1.5px solid #E2E8F0' : 'none', }}>

{team.name} {team.description && · {team.description}} {memberCount} member{memberCount !== 1 ? 's' : ''}

{/* Team expanded body */} {isTeamOpen && (

{/* Add member inline form */} {isAddingMember && (

addMember(e, team)} style={{ padding: '12px 16px', background: '#F0F7FF', borderBottom: '1.5px solid #DBEAFE', }}>

Add Member to {team.name}

setNewMember(f => ({ ...f, name: e.target.value }))} required autoFocus /> setNewMember(f => ({ ...f, email: e.target.value }))} required />

)} {/* Members list */} {memberCount === 0 ? (

No members yet — click "Add Member" to add someone.

) : (team.members || []).map((m, i) => (

{m.name}

{m.email}

))}

)}

); })}

)}

); })}

); } // ── Admin Management Page ───────────────────────────────────────────────────── function AdminManagement() { const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [flash, setFlash] = React.useState(null); const [form, setForm] = React.useState({ name: '', email: '' }); const [formError, setFormError] = React.useState(null); const [submitting, setSubmitting] = React.useState(false); const [promoteTarget, setPromoteTarget] = React.useState(''); const [promoting, setPromoting] = React.useState(false); const [grantMode, setGrantMode] = React.useState('new'); // 'new' | 'existing' function authH() { return { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }; } function showFlash(type, text) { setFlash({ type, text }); setTimeout(() => setFlash(null), 6000); } function fmtDate(val) { if (!val) return '—'; try { return new Date(val).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return String(val); } } async function fetchUsers() { setLoading(true); try { const res = await fetch('/api/users', { headers: authH() }); if (!res.ok) throw new Error('Failed'); setUsers(await res.json()); } catch (e) { console.error(e); } finally { setLoading(false); } } React.useEffect(() => { fetchUsers(); }, []); async function handleAddAdmin(e) { e.preventDefault(); setFormError(null); const name = form.name.trim(); const email = form.email.trim().toLowerCase(); if (!name) { setFormError('Full name is required.'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setFormError('Please enter a valid email.'); return; } if (users.some(u => u.email.toLowerCase() === email)) { setFormError('This email is already registered.'); return; } setSubmitting(true); try { const res = await fetch('/api/users/onboard', { method: 'POST', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ name, email, role: 'admin', department: 'Admin' }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed to add admin'); showFlash('success', `${name} added as Admin. Temporary password: ${data.tempPassword}`); setForm({ name: '', email: '' }); fetchUsers(); } catch (e) { setFormError(e.message); } finally { setSubmitting(false); } } async function handleChangeRole(userId, newRole, name) { try { const res = await fetch(`/api/users/${userId}/change-role`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ role: newRole }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); showFlash('success', data.message || `${name}'s role updated.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function handlePromote() { if (!promoteTarget) return; const target = users.find(u => String(u.id) === String(promoteTarget)); if (!target) return; setPromoting(true); await handleChangeRole(promoteTarget, 'admin', target.name); setPromoteTarget(''); setPromoting(false); } const admins = users.filter(u => u.role === 'admin' && u.status === 'active'); const nonAdmins = users.filter(u => u.role !== 'admin' && u.status === 'active'); const INPUT = { width: '100%', padding: '10px 14px', borderRadius: 8, border: '1.5px solid #E2E8F0', fontSize: 14, fontFamily: 'inherit', color: '#1E293B', background: '#FAFBFF', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.15s', }; const LABEL = { display: 'block', fontSize: 11, fontWeight: 700, color: '#374151', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, }; return (

{/* Flash */} {flash && (

{flash.text}

)} {/* ── Stats row ── */}

{[ { label: 'Active Admins', value: admins.length, icon: 'lock', bg: '#FFFBEB', ic: '#D97706' }, { label: 'Regular Users', value: users.filter(u => u.role === 'user' && u.status === 'active').length, icon: 'users', bg: '#E8EFF8', ic: '#1A5090' }, { label: 'Team Agents', value: users.filter(u => u.role === 'agent' && u.status === 'active').length, icon: 'megaphone', bg: '#F5F3FF', ic: '#8B5CF6' }, ].map(c => (

{loading ? '—' : c.value}

{c.label}

))}

{/* ── Main layout: admins table left, grant access right ── */}

{/* Current admins table */}

Current Admins

People with full platform access

{admins.length} admin{admins.length !== 1 ? 's' : ''}

{/* Column headers */}

{['Name & Email', 'Added', 'Status', 'Action'].map(h => ( {h} ))}

{loading ? (

Loading…

) : admins.length === 0 ? (

No admins found.

) : admins.map((u, i) => { const isMe = u.email === window._synUser?.email; const isLastAdmin = admins.length === 1; return (

{/* Name + email */}

{u.name} {isMe && ( You )}

{u.email}

{/* Date */} {fmtDate(u.created_at)} {/* Status badge */} Admin {/* Action */}

{isMe ? ( That's you ) : isLastAdmin ? ( Last admin ) : ( )}

); })}

{/* Grant Admin Access — right panel */}

{/* Mode toggle card */}

{/* Header */}

Grant Admin Access

Add a new admin or promote an existing user

{/* Toggle */}

{[{ id: 'new', label: 'New User' }, { id: 'existing', label: 'Existing User' }].map(m => ( ))}

{/* Form */}

{grantMode === 'new' ? ( ) : (

Select User to Promote

)}

{/* Warning */}

Admins have full access to all tickets, users and settings. Only grant access to trusted members.

{/* Access info card */}

Admin Access Includes

{[ { icon: 'ticket', color: '#1A5090', bg: '#E8EFF8', text: 'View, manage & delete all tickets' }, { icon: 'users', color: '#10B981', bg: '#ECFDF5', text: 'Add, remove & manage all users' }, { icon: 'chart', color: '#8B5CF6', bg: '#F5F3FF', text: 'Full dashboard & export access' }, { icon: 'settings', color: '#D97706', bg: '#FFFBEB', text: 'Department & category settings' }, ].map((s, i) => (

{s.text}

))}

); } // ── All Members ─────────────────────────────────────────────────────────────── function AllMembers() { const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [search, setSearch] = React.useState(''); const [flash, setFlash] = React.useState(null); const [confirmUser, setConfirmUser] = React.useState(null); const [deleteUser, setDeleteUser] = React.useState(null); function authH() { return { Authorization: 'Bearer ' + (localStorage.getItem('syn_token') || '') }; } function showFlash(type, text) { setFlash({ type, text }); setTimeout(() => setFlash(null), 6000); } function fmtDate(val) { if (!val) return '—'; try { return new Date(val).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return val; } } async function fetchUsers() { setLoading(true); try { const res = await fetch('/api/users', { headers: authH() }); if (!res.ok) throw new Error('Status ' + res.status); setUsers(await res.json()); } catch (e) { showFlash('error', 'Could not load users: ' + e.message); } finally { setLoading(false); } } React.useEffect(() => { fetchUsers(); }, []); async function doOffboard(user) { setConfirmUser(null); try { const res = await fetch(`/api/users/${user.id}/offboard`, { method: 'PUT', headers: authH() }); if (!res.ok) throw new Error((await res.json()).error || 'Failed'); showFlash('success', `${user.name}'s access has been removed.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function doReactivate(user) { try { const res = await fetch(`/api/users/${user.id}/reactivate`, { method: 'PUT', headers: authH() }); if (!res.ok) throw new Error('Failed'); showFlash('success', `${user.name} has been reactivated.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } async function doResetPassword(user) { if (!window.confirm(`Reset password for ${user.name}? A temporary password will be sent to ${user.email}.`)) return; try { const res = await fetch(`/api/users/${user.id}/reset-password`, { method: 'POST', headers: authH() }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); showFlash('success', `Password reset for ${user.name}. Temp: ${data.tempPassword} — email sent.`); } catch (e) { showFlash('error', e.message); } } async function doDelete(user) { setDeleteUser(null); try { const res = await fetch(`/api/users/${user.id}`, { method: 'DELETE', headers: authH() }); if (!res.ok) throw new Error((await res.json()).error || 'Failed'); showFlash('success', `${user.name} has been permanently deleted.`); fetchUsers(); } catch (e) { showFlash('error', e.message); } } const ROLE_BADGE = { admin: { label: 'Admin', color: '#D97706', bg: '#FFFBEB', border: '#FDE68A' }, coordinator: { label: 'Coordinator', color: '#0284C7', bg: '#E0F2FE', border: '#BAE6FD' }, agent: { label: 'Agent', color: '#7C3AED', bg: '#F5F3FF', border: '#DDD6FE' }, user: { label: 'User', color: '#1A5090', bg: '#E8EFF8', border: '#BFDBFE' }, }; const filtered = React.useMemo(() => { if (!search.trim()) return users; const q = search.toLowerCase(); return users.filter(u => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)); }, [users, search]); const activeCount = users.filter(u => u.status === 'active').length; const removedCount = users.filter(u => u.status !== 'active').length; const adminCount = users.filter(u => u.role === 'admin' && u.status === 'active').length; const coordinatorCount = users.filter(u => u.role === 'coordinator' && u.status === 'active').length; const agentCount = users.filter(u => u.role === 'agent' && u.status === 'active').length; const userCount = users.filter(u => u.role === 'user' && u.status === 'active').length; const COLS = '40px 1fr 220px 100px 110px 90px 1fr'; const HDRS = ['#', 'Name', 'Email', 'Joined', 'Role', 'Status', 'Actions']; return (

{/* ── Delete confirm modal ── */} {deleteUser && (

Permanently Delete User

Are you sure you want to permanently delete {deleteUser.name}?

{deleteUser.email}

⚠️ This action is irreversible. The user and all their data will be permanently removed.

)} {/* ── Offboard confirm modal ── */} {confirmUser && (

Confirm Removal

Remove {confirmUser.name}'s platform access?

{confirmUser.email}

This will immediately revoke their platform access. You can reactivate them later.

)} {/* ── Flash ── */} {flash && (

{flash.text}

)} {/* ── Stats ── */}

{[ { label: 'Total Users', value: users.length, icon: 'users', bg: '#E8EFF8', ic: '#1A5090' }, { label: 'Active', value: activeCount, icon: 'check', bg: '#ECFDF5', ic: '#10B981' }, { label: 'Removed', value: removedCount, icon: 'x', bg: '#FEF2F2', ic: '#EF4444' }, { label: 'Admins', value: adminCount, icon: 'lock', bg: '#FFFBEB', ic: '#D97706' }, { label: 'Coordinators', value: coordinatorCount, icon: 'users', bg: '#E0F2FE', ic: '#0284C7' }, { label: 'Agents', value: agentCount, icon: 'megaphone', bg: '#F5F3FF', ic: '#8B5CF6' }, ].map(c => (

{loading ? '—' : c.value}

{c.label}

))}

{/* ── Search + table ── */}

{/* Table header bar */}

All Members {loading ? '…' : `${filtered.length} shown`}

setSearch(e.target.value)} placeholder="Search name or email…" style={{ width: '100%', padding: '8px 12px 8px 34px', borderRadius: 8, border: '1.5px solid #E2E8F0', fontSize: 13, fontFamily: 'inherit', color: '#1E293B', background: '#FAFBFF', outline: 'none', boxSizing: 'border-box', }} />

{/* Column headers */}

{HDRS.map(h => {h})}

{/* Rows */} {loading ? (

Loading members…

) : filtered.length === 0 ? (

{search ? 'No members match your search.' : 'No members yet.'}

) : filtered.map((u, i) => { const isActive = u.status === 'active'; const badge = ROLE_BADGE[u.role] || ROLE_BADGE.user; const isAdmin = u.role === 'admin'; return (

{i + 1} {/* Name + avatar */}

{u.name}

{/* Email */} {u.email} {/* Joined date */} {fmtDate(u.created_at)} {/* Role badge */} {badge.label} {/* Status badge */} {isActive ? 'Active' : 'Removed'} {/* Actions */}

{isAdmin ? ( Protected ) : isActive ? ( <> ) : ( <> )}

); })}

); } // ── Coordinator Tab ────────────────────────────────────────────────────────── function CoordinatorTab({ users, loading, onRefresh, authH, showFlash }) { const [promoteTarget, setPromoteTarget] = React.useState(''); const [promoting, setPromoting] = React.useState(false); const [demoting, setDemoting] = React.useState(null); const coordinators = users.filter(u => u.role === 'coordinator' && u.status === 'active'); const eligible = users.filter(u => u.role !== 'coordinator' && u.role !== 'admin' && u.status === 'active'); function fmtDate(val) { if (!val) return '—'; try { return new Date(val).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); } catch { return val; } } async function grantCoordinator() { if (!promoteTarget) return; const target = users.find(u => String(u.id) === String(promoteTarget)); if (!target) return; setPromoting(true); try { const res = await fetch(`/api/users/${promoteTarget}/change-role`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ role: 'coordinator' }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); showFlash('success', `${target.name} is now a Coordinator.`); setPromoteTarget(''); onRefresh(); } catch (e) { showFlash('error', e.message); } finally { setPromoting(false); } } async function changeRole(u, role) { setDemoting(u.id); try { const res = await fetch(`/api/users/${u.id}/change-role`, { method: 'PUT', headers: { 'Content-Type': 'application/json', ...authH() }, body: JSON.stringify({ role }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed'); showFlash('success', `${u.name}'s role changed to ${role}.`); onRefresh(); } catch (e) { showFlash('error', e.message); } finally { setDemoting(null); } } return (

{/* Stats */}

{[ { label: 'Active Coordinators', value: coordinators.length, icon: 'users', bg: '#E0F2FE', ic: '#0EA5E9' }, { label: 'Regular Users', value: users.filter(u => u.role === 'user' && u.status === 'active').length, icon: 'users', bg: '#E8EFF8', ic: '#1A5090' }, { label: 'Team Agents', value: users.filter(u => u.role === 'agent' && u.status === 'active').length, icon: 'megaphone', bg: '#F5F3FF', ic: '#8B5CF6' }, ].map(c => (

{loading ? '…' : c.value}

{c.label}

))}

{/* Current coordinators */}

Current Coordinators {coordinators.length} active

{loading ? (

Loading…

) : coordinators.length === 0 ? (

No coordinators yet. Grant access using the panel on the right.

) : coordinators.map((u, i) => (

{u.name}

{u.email}

Since {fmtDate(u.created_at)}

))}

{/* Grant coordinator access */}

Grant Coordinator Access

Coordinators have the same access as admins but appear under the Coordinator section.

Select existing user

); } Object.assign(window, { AdminOnboarding, AdminAllTickets, AdminUsers, AdminTeams, AdminManagement, AllMembers });