= i ? 'var(--accent)' : 'var(--paper-3)',
color: step >= i ? '#fff' : 'var(--ink-4)',
display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, transition: 'all .2s',
}}>{i + 1}
= i ? 'var(--ink)' : 'var(--ink-4)', fontWeight: step === i ? 600 : 400 }}>{lbl}
{i === 0 && = 1 ? 'var(--accent)' : 'var(--rule)', margin: '0 4px' }}/>}
))}
{step === 0 && (
{ setTitle(v.slice(0, 80)); setValidationErr(''); }} placeholder="e.g. Unit 3 Viva — Technical Presentations"/>
No faculty accounts yet. You can assign faculty later or create one in User Management.
)}
{collegeList.length === 0
?
No colleges configured yet — leave blank for all.
: collegeList.map((c) => (
toggleCollege(c)}
style={{
padding: '5px 12px', borderRadius: 20, fontSize: 12, fontWeight: 500, cursor: 'pointer',
background: colleges.includes(c) ? 'var(--accent)' : 'var(--paper-2)',
border: `1px solid ${colleges.includes(c) ? 'var(--accent)' : 'var(--rule)'}`,
color: colleges.includes(c) ? '#fff' : 'var(--ink-3)',
transition: 'all .15s',
}}>
{colleges.includes(c) &&
))
}
Selected: {colleges.join(', ')} · setColleges([])}>Clear
)}
setAttempts(Number(v))}
options={['1','2','3','999'].map((n) => ({ value: n, label: n === '999' ? 'Unlimited' : n }))}/>
setDuration(Number(v) || 0)} mono/>
{usePasskey && (
setPasskey(v.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 12))}
mono style={{ textTransform: 'uppercase' }}/>
setPasskey(genPasskey())}>
Regenerate
)}
)}
{step === 1 && (
{reviewRows.map(([k, v]) => (
))}
{usePasskey ? (
Generated passkey
{passkey}
navigator.clipboard?.writeText(passkey)}>
Copy
) : (
Open-access slot — no passkey required.
)}
{analyticsAccess ? 'Granted' : 'Restricted'}
)}
);
}
// ── New User Modal (rewritten) ──────────────────────────────
function NewUserModal({ onClose, onCreate }) {
const [role, setRole] = React.useState('admin');
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const [dept, setDept] = React.useState('CSE');
const [college, setCollege] = React.useState('');
const [regNo, setRegNo] = React.useState('');
const [analyticsDefault, setAnalyticsDefault] = React.useState(true);
// Load colleges from API for dropdown
const [collegeData, setCollegeData] = React.useState([]);
React.useEffect(() => {
apiFetch('/colleges/')
.then((d) => setCollegeData(Array.isArray(d) ? d : []))
.catch(() => setCollegeData([]));
}, []);
const apiDeptList = React.useMemo(() => {
if (!college) return [];
const c = collegeData.find((c) => c.name === college);
return c ? c.departments.map((d) => d.name) : [];
}, [college, collegeData]);
const fallbackDepts = window.DEPTS && window.DEPTS.length ? window.DEPTS : ['CSE', 'ECE', 'IT', 'ADS', 'EEE', 'ME', 'Administration'];
const deptOptions = apiDeptList.length > 0 ? apiDeptList : fallbackDepts;
// Live password preview
const pwPattern = (window.DEFAULT_PASSWORD_PATTERNS || {})[role] || '{department}_{fullname}';
const pwPreview = (window.applyPasswordPattern || ((p) => p))(pwPattern, {
department: dept,
fullname: name || 'name',
regnumber: regNo || 'reg0001',
});
const [submitting, setSubmitting] = React.useState(false);
const [submitErr, setSubmitErr] = React.useState('');
const canCreate = name.trim().length > 2 && /.+@.+\..+/.test(email);
const roleDefs = [
{ id: 'superadmin', label: 'Super admin', desc: 'Full access. Manages users, slots, analytics grants.', color: 'oklch(0.55 0.18 295)' },
{ id: 'admin', label: 'Faculty', desc: 'Evaluates slots. Analytics access granted per-slot.', color: 'oklch(0.55 0.17 215)' },
{ id: 'user', label: 'Student', desc: 'Attempts assessments with a passkey. Sees own reports.', color: 'oklch(0.55 0.15 145)' },
];
return (
Cancel
{submitErr && {submitErr} }
{
setSubmitting(true); setSubmitErr('');
try {
const pwPattern = (window.DEFAULT_PASSWORD_PATTERNS || {})[role] || '{department}_{fullname}';
const password = (window.applyPasswordPattern || ((p) => p))(pwPattern, { department: dept, fullname: name, regnumber: regNo });
await apiFetch('/auth/admin/create-user', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: name.trim(), email: email.trim(), password, role, department: dept, college, reg_number: regNo }),
});
onCreate({ role, name, email, dept, regNo, analyticsDefault, sendInvite: false });
} catch (ex) {
setSubmitErr(ex.message || 'Failed to create user');
} finally {
setSubmitting(false);
}
}}>
{submitting ? 'Creating…' : <> Create user}
}>
{roleDefs.map((r) => (
setRole(r.id)}
style={{
padding: '12px 14px', borderRadius: 8, textAlign: 'left',
background: role === r.id ? `color-mix(in oklab, ${r.color} 10%, var(--card))` : 'var(--paper-2)',
border: `1px solid ${role === r.id ? r.color : 'var(--rule)'}`,
cursor: 'pointer', transition: 'all .15s', position: 'relative',
}}>
{r.label}
{r.desc}
{role === r.id &&
}
))}
{role === 'user' && (
setRegNo(v.toUpperCase())} mono placeholder="Reg number"/>
)}
{collegeData.length > 0
? { setCollege(e.target.value); setDept(''); }}>
— select college —
{collegeData.map((c) => {c.name} )}
:
{apiDeptList.length > 0
? setDept(e.target.value)}>
— select dept —
{apiDeptList.map((d) => {d} )}
:
}
{role === 'admin' && (
)}
{/* Password pattern preview */}
Default password (pattern: {pwPattern} )
{pwPreview}
User will receive this password on first login. Pattern editable in Settings → Password Pattern.
);
}
// ── Analytics Access Manager ──
function AnalyticsAccessView() {
const [facultyUsers, setFacultyUsers] = React.useState([]);
const [slots, setSlots] = React.useState([]);
const [grants, setGrants] = React.useState({});
const [loading, setLoading] = React.useState(true);
const [q, setQ] = React.useState('');
const [saving, setSaving] = React.useState(false);
React.useEffect(() => {
Promise.all([
apiFetch('/auth/admin/users'),
apiFetch('/slots/'),
]).then(([users, slotsData]) => {
const admins = (Array.isArray(users) ? users : []).filter((u) => u.role === 'admin' && u.is_active);
const slotList = Array.isArray(slotsData) ? slotsData : (slotsData.slots || []);
setFacultyUsers(admins);
setSlots(slotList);
// init grants — all false by default
const g = {};
admins.forEach((f) => {
g[f.id] = {};
slotList.forEach((s) => { g[f.id][s.id] = false; });
});
setGrants(g);
}).catch(() => {}).finally(() => setLoading(false));
}, []);
const filtered = facultyUsers.filter((f) =>
!q || f.name.toLowerCase().includes(q.toLowerCase()) || (f.department || '').toLowerCase().includes(q.toLowerCase())
);
const toggleGrant = (facultyId, slotId) => {
setGrants((g) => ({
...g,
[facultyId]: { ...g[facultyId], [slotId]: !g[facultyId]?.[slotId] },
}));
};
const grantAll = (facultyId, val) => {
setGrants((g) => {
const next = { ...g, [facultyId]: {} };
slots.forEach((s) => { next[facultyId][s.id] = val; });
return next;
});
};
const totalGranted = Object.values(grants).reduce((a, fg) => a + Object.values(fg).filter(Boolean).length, 0);
const totalPossible = facultyUsers.length * slots.length;
if (loading) return (
Loading faculty and slots…
);
return (
Superadmin controls
Analytics Access
Grant cohort analytics visibility per slot, per faculty. Students never see analytics.
{totalGranted} of {totalPossible} faculty×slot pairs have analytics enabled
Toggle slots individually per faculty row.
{filtered.length === 0 ? (
No faculty accounts found. Create faculty users first via User Management.
) : (
Faculty
Dept
{slots.map((s) => (
#{s.id}
{(s.title || '').slice(0, 18)}
))}
Actions
{filtered.map((f, i) => {
const totalForFaculty = Object.values(grants[f.id] || {}).filter(Boolean).length;
return (
{f.department || '—'}
{slots.map((s) => {
const on = !!(grants[f.id] && grants[f.id][s.id]);
return (
toggleGrant(f.id, s.id)}
title={on ? 'Revoke' : 'Grant'}
style={{
width: 28, height: 20, borderRadius: 10, cursor: 'pointer', border: 'none',
background: on ? 'var(--ok)' : 'var(--paper-3)',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
transition: 'background .15s',
}}>
);
})}
grantAll(f.id, true)}>All
grantAll(f.id, false)}>None
{totalForFaculty}/{slots.length}
);
})}
)}
);
}
// ── Documentation view (role-scoped) ───────────────────────
function DocsView({ role = 'admin' }) {
const allSections = [
{ id: 'getting-started', label: 'Getting started', icon: 'play', roles: ['user','admin','superadmin'] },
{ id: 'roles', label: 'Roles & permissions', icon: 'user', roles: ['admin','superadmin'] },
{ id: 'slots', label: 'Assessment slots', icon: 'layers', roles: ['admin','superadmin'] },
{ id: 'passkeys', label: 'Passkeys & security', icon: 'lock', roles: ['admin','superadmin'] },
{ id: 'analytics', label: 'Analytics & reports', icon: 'chart', roles: ['admin','superadmin'] },
{ id: 'evaluation', label: 'Evaluation criteria', icon: 'check', roles: ['user','admin','superadmin'] },
{ id: 'users', label: 'User management', icon: 'users', roles: ['superadmin'] },
{ id: 'troubleshooting', label: 'Troubleshooting', icon: 'help', roles: ['user','admin','superadmin'] },
];
const sections = allSections.filter((s) => s.roles.includes(role));
const [active, setActive] = React.useState(sections[0]?.id || 'getting-started');
const content = {
'getting-started': (
<>
Welcome to ChiselAssess
ChiselAssess is a voice-first assessment platform for higher-education institutions. Students record spoken responses; the system evaluates them across six rhetorical dimensions; faculty review results through structured reports and cohort analytics.
{role === 'user' && (
<>
As a student
Sign in with the credentials your institution admin provided.
Go to Take Assessment and enter the passkey your faculty shared.
Record your spoken response within the allotted time.
View your full evaluation report from My Reports .
)}
{role === 'admin' && (
<>
As faculty
Sign in with the credentials from your institution admin.
Go to My Slots and enter the passkey for your assigned slot.
Review submissions and — if analytics access was granted — view cohort data.
)}
{role === 'superadmin' && (
<>
As superadmin
Go to All Slots → New slot to create your first evaluation session.
Assign faculty, set an expiry date and optional passkey, confirm.
Share the passkey with enrolled students and assigned faculty.
Manage users from User Management and control analytics access from Analytics Access .
)}
),
'roles': (
<>
Roles & permissions
ChiselAssess has three roles. Permissions cascade strictly — superadmins can do everything faculty can, and faculty can do everything students can within their scope.
{[
{ r: 'Superadmin', c: 'oklch(0.55 0.18 295)', p: ['Create & archive slots', 'Create users (faculty + students)', 'Issue and reset passkeys', 'Grant analytics access per faculty per slot', 'View cohort data across all departments', 'Manage institution settings & password patterns'] },
{ r: 'Faculty', c: 'oklch(0.55 0.17 215)', p: ['Enter assigned slots with passkey', 'Review individual submissions', 'Download student reports', 'View analytics (if granted)', 'Export & share coaching programs'] },
{ r: 'Student', c: 'oklch(0.55 0.15 145)', p: ['Enter slots with passkey', 'Record spoken responses', 'View own reports and history', 'Download own report PDF'] },
].map((x) => (
))}
Assessment slots
A slot is a time-boxed evaluation session. Each slot has:
A passkey (optional) — an 8-character code students and faculty must enter. Can be disabled for open-access slots.Scope — departments and colleges (multi-select; leave blank for institution-wide).Multiple faculty — one or more evaluators can be assigned to the same slot.Expiry date + time — slots close automatically at the configured moment.Attempts & duration — how many recordings each student can submit, and max recording length.Analytics access flag — whether the assigned faculty can see cohort-level data. Managed per faculty from the Analytics Access page.
Creating a slot
Go to Slots → New slot . Fill in details, assign faculty, set the expiry date and time, and optionally enable a passkey. Share the passkey (if used) with enrolled students and faculty via your LMS or email.
),
'passkeys': (
<>
Passkeys & security
Passkeys are optional per-slot — superadmins can enable or disable the requirement during slot creation. When enabled, an 8-character alphanumeric code gates access.
Best practices
Share passkeys via your LMS, institutional email, or in-person at the start of a session.
Do not post passkeys in public forums or shared documents.
Regenerate a passkey if you suspect it has leaked — existing sessions are invalidated immediately.
Superadmins see the raw key; faculty and students see only the redacted passkey-required badge.
Open-access slots
When passkey is disabled on a slot, any user with the slot link can enter. Use this for practice rounds or baseline assessments where identity verification isn't needed.
),
'analytics': (
<>
Analytics & reports
Individual reports
Every submission produces a per-student report with six dimension scores (0–100), an overall grade, transcript annotations, pace and filler metrics, and an AI-generated feedback note.
Cohort analytics
When analytics access is granted (via Analytics Access ), faculty see the Analytics tab: score distribution, rolling trend, criterion averages, pace × filler scatter, grade mix, department breakdown, and dimension correlations.
Exporting
Download .csv — full tabular export of all submissions and criterion scores.Download PDF — a rendered snapshot of the entire analytics view including the slot header, charts, and department breakdown.Coaching → Export PDF — a structured coaching program based on selected training aspects.Coaching → Share with cohort — opens a pre-filled email to all students in the slot.
),
'evaluation': (
<>
Evaluation criteria
Every response is scored across six dimensions, each on a 0–100 scale. Scores roll up into an overall grade (A+ through E).
{CRITERIA.map((c) => (
))}
Grade scale
{[['A+','90+','ok'],['A','80–89','ok'],['B','70–79','info'],['C','60–69','warn'],['D','50–59','warn'],['E','<50','bad']].map(([g,r,t]) => (
{g} · {r}
))}
),
'users': (
<>
User management
Superadmins can create users of any role. Each user is assigned a default password derived from the institution's password pattern (see Settings → Password Pattern).
Roles
Superadmin — full platform access, including slot creation and analytics grants.Faculty — evaluates slots; can see analytics only where explicitly granted.Student — attempts assessments; sees only their own reports.
Password pattern
Go to Settings → Password Pattern to configure the default password formula per role. Uses tokens like {'{department}'} , {'{fullname}'} , and {'{regnumber}'} .
Bulk operations
Use the Analytics Access page to grant or revoke analytics access for multiple faculty at once. Use the bulk-select checkboxes + "Grant selected" / "Revoke selected" buttons.
),
'troubleshooting': (
<>
Troubleshooting
Passkey isn't working
Double-check for O/0 or I/1 confusion. Ask your superadmin to confirm or regenerate. Passkeys are case-insensitive.
Microphone access denied
In Chrome / Edge: padlock icon in URL bar → Site settings → Microphone → Allow, then reload.
Recording cut off early
The slot has a duration cap set by the admin (default 180 s). Check the timer at the top of the recording panel.
Can't see analytics
Analytics access is granted per-slot per-faculty by your superadmin from the Analytics Access page.
PDF export is missing content
Scroll back to the top of the analytics tab, then click Download PDF. The export captures the full view including the slot header and all charts.
Contact support
Email support@chiselassess.ai or reach your institutional admin.
),
};
return (
Help center
Documentation
{role === 'user' ? 'Student guide — everything you need to record, submit, and review your assessments.'
: role === 'admin' ? 'Faculty guide — running slots, reviewing submissions, and coaching your cohort.'
: 'Admin guide — managing the full institution from slots to users to analytics.'}
{sections.map((s) => (
setActive(s.id)}
style={{
display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left',
padding: '9px 12px', borderRadius: 6, marginBottom: 2, cursor: 'pointer',
background: active === s.id ? 'color-mix(in oklab, var(--accent) 10%, transparent)' : 'transparent',
color: active === s.id ? 'var(--accent)' : 'var(--ink-3)',
border: 'none', fontSize: 12.5, fontWeight: active === s.id ? 600 : 400,
transition: 'background .15s, color .15s',
}}>
{s.label}
))}
{content[active] || Section not available for your role.
}
);
}
// ── Settings view (rewritten) ───────────────────────────────
// ── Login protection toggle (superadmin only) ─────────────────────────────
function LoginProtectionToggle() {
const [enabled, setEnabled] = React.useState(true);
const [loading, setLoading] = React.useState(true);
const [msg, setMsg] = React.useState(null);
React.useEffect(() => {
apiFetch('/auth/admin/rate-limit')
.then(d => setEnabled(d.rate_limit_enabled !== false))
.catch(() => {})
.finally(() => setLoading(false));
}, []);
const toggle = async () => {
const next = !enabled;
try {
await apiFetch('/auth/admin/rate-limit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ enabled: next }),
});
setEnabled(next);
setMsg({ ok: true, text: next ? 'Login protection enabled.' : 'Protection disabled — remember to re-enable after testing.' });
} catch(e) {
setMsg({ ok: false, text: 'Failed to update: ' + e.message });
}
setTimeout(() => setMsg(null), 4000);
};
return (
Brute-force login protection
{enabled ? 'Active — max 10 attempts per IP per 5 minutes.' : '⚠ Disabled — turn back on after stress testing.'}
{loading ? '…' : enabled ? 'Disable' : 'Enable'}
{msg &&
{msg.text}
}
);
}
function SettingsView({ role = 'admin', tweaks, setTweak }) {
const [instName, setInstName] = React.useState(() => localStorage.getItem('ca_inst_name') || '');
const [tab, setTab] = React.useState('profile');
// Read actual logged-in user from localStorage
const storedUser = React.useMemo(() => {
try { return JSON.parse(localStorage.getItem('ca_user') || '{}'); } catch { return {}; }
}, []);
const [displayName, setDisplayName] = React.useState(storedUser.name || '');
const [nameSaving, setNameSaving] = React.useState(false);
const [nameMsg, setNameMsg] = React.useState(null);
const handleSaveName = async () => {
if (!displayName.trim()) return;
setNameSaving(true); setNameMsg(null);
try {
// Persist to server if endpoint exists
try {
await apiFetch('/auth/update-profile', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: displayName.trim() }),
});
} catch { /* endpoint may not exist — local update is still applied */ }
// Always update localStorage so sidebar + UI reflect change immediately
const updated = { ...storedUser, name: displayName.trim() };
localStorage.setItem('ca_user', JSON.stringify(updated));
// Force sidebar refresh by dispatching a storage event
window.dispatchEvent(new Event('ca_user_updated'));
setNameMsg({ ok: true, text: 'Display name updated.' });
} catch (ex) {
setNameMsg({ ok: false, text: ex.message || 'Save failed.' });
} finally { setNameSaving(false); }
};
const [timezone, setTimezone] = React.useState('Asia/Kolkata');
const [language, setLanguage] = React.useState('English');
// Password change state
const [curPw, setCurPw] = React.useState('');
const [newPw, setNewPw] = React.useState('');
const [confPw, setConfPw] = React.useState('');
const [pwSaving, setPwSaving] = React.useState(false);
const [pwMsg, setPwMsg] = React.useState(null); // { ok, text }
const pwMatch = newPw && newPw === confPw;
const pwError = confPw && !pwMatch;
const handleChangePassword = async () => {
if (!pwMatch || !curPw) return;
setPwSaving(true); setPwMsg(null);
try {
await apiFetch('/auth/change-password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ old_password: curPw, new_password: newPw }),
});
setPwMsg({ ok: true, text: 'Password changed successfully.' });
setCurPw(''); setNewPw(''); setConfPw('');
} catch (ex) {
setPwMsg({ ok: false, text: ex.message || 'Failed to change password.' });
} finally {
setPwSaving(false);
}
};
// Password pattern (superadmin) ─────────────────────────────────────────
// Load from localStorage first (overrides compiled defaults)
const _loadPatterns = () => {
const base = window.DEFAULT_PASSWORD_PATTERNS || {
superadmin: '{department}_{fullname}',
admin: '{department}_{fullname}',
user: '{first4name}_{regnumber}',
};
try {
const saved = localStorage.getItem('ca_pw_patterns');
if (saved) return Object.assign({}, base, JSON.parse(saved));
} catch {}
return Object.assign({}, base);
};
const defaultPatterns = window.DEFAULT_PASSWORD_PATTERNS || {
superadmin: '{department}_{fullname}',
admin: '{department}_{fullname}',
user: '{first4name}_{regnumber}',
};
const [patterns, setPatterns] = React.useState(_loadPatterns);
const [patternSaving, setPatternSaving] = React.useState(false);
const [patternMsg, setPatternMsg] = React.useState(null); // {ok, text}
// Called when the superadmin clicks "Save patterns"
const handleSavePatterns = () => {
setPatternSaving(true);
setPatternMsg(null);
try {
// 1. Persist to localStorage (survives page reloads)
localStorage.setItem('ca_pw_patterns', JSON.stringify(patterns));
// 2. Mutate window.DEFAULT_PASSWORD_PATTERNS IN-PLACE so every component
// that reads it (NewUserModal, BulkImportModal) picks up changes immediately
const target = window.DEFAULT_PASSWORD_PATTERNS;
if (target && typeof target === 'object') {
Object.keys(patterns).forEach((k) => { target[k] = patterns[k]; });
} else {
window.DEFAULT_PASSWORD_PATTERNS = Object.assign({}, patterns);
}
// 3. Fire a global event so any open modal can re-render
window.dispatchEvent(new CustomEvent('ca_pw_patterns_updated', { detail: patterns }));
setPatternMsg({ ok: true, text: 'Patterns saved. New user creation will use the updated patterns.' });
} catch (ex) {
setPatternMsg({ ok: false, text: String(ex.message || 'Save failed.') });
} finally {
setPatternSaving(false);
}
};
const patternPreview = (roleKey, previewData) =>
(window.applyPasswordPattern || ((p) => p))(patterns[roleKey] || '', previewData || {
department: 'dept', fullname: 'username', regnumber: 'regnumber',
});
const tabs = [
{ id: 'profile', label: 'Profile', icon: 'user' },
{ id: 'appearance', label: 'Appearance', icon: 'type' },
{ id: 'security', label: 'Security', icon: 'lock' },
...(role === 'superadmin' ? [
{ id: 'pwd-pattern', label: 'Password Pattern', icon: 'pen' },
{ id: 'institution', label: 'Institution', icon: 'layers' },
] : []),
];
return (
Account
Settings Manage your profile, appearance, and security preferences.
{tabs.map((t) => (
setTab(t.id)}
style={{
display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left',
padding: '9px 12px', borderRadius: 6, marginBottom: 2, cursor: 'pointer',
background: tab === t.id ? 'color-mix(in oklab, var(--accent) 10%, transparent)' : 'transparent',
color: tab === t.id ? 'var(--accent)' : 'var(--ink-3)',
border: 'none', fontSize: 12.5, fontWeight: tab === t.id ? 600 : 400,
}}>
{t.label}
))}
{/* ── Profile ── */}
{tab === 'profile' && (
{displayName}
{(()=>{ try { return JSON.parse(localStorage.getItem('ca_user')||'{}').email || ''; } catch { return ''; } })()} · {role === 'user' ? 'Student' : role === 'superadmin' ? 'Superadmin' : 'Faculty'}
Change avatar
{nameMsg && (
{nameMsg.text}
)}
{nameSaving ? 'Saving…' : 'Save changes'}
)}
{/* ── Appearance ── */}
{tab === 'appearance' && tweaks && setTweak && (
Theme
{[
{ id: 'light', label: 'Light', bg: '#f7f3ea', ink: '#2a2419' },
{ id: 'dark', label: 'Dark', bg: '#1a1612', ink: '#e8e0d0' },
].map((th) => (
setTweak('theme', th.id)}
style={{
padding: '18px 14px', borderRadius: 8, cursor: 'pointer', textAlign: 'left',
background: th.bg, color: th.ink,
border: `2px solid ${tweaks.theme === th.id ? 'var(--accent)' : 'var(--rule)'}`,
transition: 'border-color .15s',
}}>
{th.label}
Sample text preview
{tweaks.theme === th.id && (
Active
)}
))}
Accent color
{[
{ id: 'ink-red', c: 'oklch(0.55 0.18 30)', label: 'Red ink' },
{ id: 'ochre', c: 'oklch(0.65 0.14 75)', label: 'Ochre' },
{ id: 'forest', c: 'oklch(0.5 0.14 150)', label: 'Forest' },
{ id: 'indigo', c: 'oklch(0.5 0.15 265)', label: 'Indigo' },
{ id: 'plum', c: 'oklch(0.5 0.16 320)', label: 'Plum' },
{ id: 'teal', c: 'oklch(0.55 0.13 200)', label: 'Teal' },
].map((a) => (
setTweak('accent', a.id)} title={a.label}
style={{
width: 40, height: 40, borderRadius: '50%', background: a.c, cursor: 'pointer', padding: 0,
border: `3px solid ${tweaks.accent === a.id ? 'var(--ink)' : 'transparent'}`,
boxShadow: tweaks.accent === a.id ? '0 0 0 1px var(--ink)' : '0 0 0 1px var(--rule)',
transition: 'transform .15s, box-shadow .15s',
}}/>
))}
Typography
{[
{ id: 'editorial', label: 'Editorial', desc: 'Instrument Serif + Inter' },
{ id: 'swiss', label: 'Swiss', desc: 'Fraunces + Space Grotesk' },
{ id: 'academic', label: 'Academic', desc: 'Cormorant + IBM Plex' },
{ id: 'geometric', label: 'Geometric', desc: 'Fraunces + Inter' },
].map((t) => (
setTweak('type', t.id)}
style={{
padding: '12px 14px', borderRadius: 6, textAlign: 'left', cursor: 'pointer',
background: tweaks.type === t.id ? 'color-mix(in oklab, var(--accent) 10%, var(--card))' : 'var(--paper-2)',
border: `1px solid ${tweaks.type === t.id ? 'var(--accent)' : 'var(--rule)'}`,
transition: 'all .15s',
}}>
{t.label}
{t.desc}
{tweaks.type === t.id && ✓ Active
}
))}
)}
{/* ── Security ── */}
{tab === 'security' && (
Change password
Passwords don't match.
}
{pwMatch && ✓ Passwords match.
}
{pwSaving ? 'Saving…' : 'Update password'}
{pwMsg && (
{pwMsg.ok ? '✓ ' : '⚠ '}{pwMsg.text}
)}
Active sessions
Sign out of all other devices where you're currently logged in.
Sign out other sessions
{role === 'superadmin' &&
}
)}
{/* ── Password Pattern (superadmin only) ── */}
{tab === 'pwd-pattern' && role === 'superadmin' && (
Default passwords are auto-generated when creating users. Available tokens:{' '}
{['{department}', '{fullname}', '{first4name}', '{regnumber}'].map((t) => (
{t}
))}
All tokens → lowercase, no spaces. {'{first4name}'} = first 4 chars of full name.
Changes take effect immediately for all new user creation.
{[
{ key: 'superadmin', label: 'Superadmin', previewData: { department: 'dept', fullname: 'username', regnumber: '' } },
{ key: 'admin', label: 'Faculty', previewData: { department: 'dept', fullname: 'username', regnumber: '' } },
{ key: 'user', label: 'Student', previewData: { department: 'cse', fullname: 'priyakrishnan', regnumber: '22cse1042' } },
].map(({ key, label, previewData }) => (
setPatterns((p) => ({ ...p, [key]: v }))} mono/>
Preview →
{patternPreview(key, previewData)}
))}
{patternMsg && (
{patternMsg.ok ? '✓ ' : '⚠ '}{patternMsg.text}
)}
{patternSaving ? 'Saving…' : 'Save patterns'}
{ setPatterns(Object.assign({}, defaultPatterns)); setPatternMsg(null); }}>
Reset to defaults
)}
{/* ── Institution (superadmin only) ── */}
{tab === 'institution' && role === 'superadmin' && (
{}} disabled placeholder="—"/>
{}} disabled placeholder="—"/>
{}}
options={[{ value: 'granted', label: 'Granted by default' }, { value: 'restricted', label: 'Restricted by default' }]}/>
{}} options={['1', '2', '3']}/>
Danger zone
Archive all closed slots older than 12 months. Cannot be undone.
Archive old slots
)}
);
}
// Small local avatar (renamed to avoid clash with charts.jsx Avatar)
function AdminAvatar({ name, size = 32, seed = 1 }) {
const init = initials(name);
const hue = (seed * 67) % 360;
return (
{init}
);
}
// ── Bulk CSV Import Modal ────────────────────────────────────
function BulkImportModal({ onClose, onCreate }) {
const [step, setStep] = React.useState(0); // 0=upload, 1=preview, 2=done
const [rows, setRows] = React.useState([]);
const [error, setError] = React.useState('');
const [dragging, setDragging] = React.useState(false);
const fileRef = React.useRef(null);
// Known colleges fetched from API
const [knownColleges, setKnownColleges] = React.useState([]);
React.useEffect(() => {
apiFetch('/colleges/')
.then((d) => setKnownColleges(Array.isArray(d) ? d : []))
.catch(() => setKnownColleges([]));
}, []);
// Compute which (college, dept) pairs are missing from the tool
const missingPairs = React.useMemo(() => {
const seen = new Set();
const missing = [];
for (const row of rows) {
const col = (row.college || '').trim();
const dept = (row.dept || '').trim();
if (!col || !dept) continue;
const key = `${col.toLowerCase()}|||${dept.toLowerCase()}`;
if (seen.has(key)) continue;
seen.add(key);
const foundCollege = knownColleges.find(
(c) => c.name.toLowerCase() === col.toLowerCase()
);
const deptExists = foundCollege
? foundCollege.departments.some((d) => d.name.toLowerCase() === dept.toLowerCase())
: false;
if (!foundCollege || !deptExists) {
missing.push({ college: col, dept, collegeNew: !foundCollege, deptNew: !deptExists });
}
}
return missing;
}, [rows, knownColleges]);
const pwPattern = (window.DEFAULT_PASSWORD_PATTERNS || {}).user || '{department}_{regnumber}';
const applyPw = window.applyPasswordPattern || ((p, d) =>
p.replace(/\{department\}/g, d.department)
.replace(/\{fullname\}/g, d.fullname)
.replace(/\{regnumber\}/g, d.regnumber));
function parseCSV(text) {
const lines = text.trim().split(/\r?\n/).filter(Boolean);
if (lines.length < 2) return { err: 'CSV must have a header row and at least one data row.' };
const header = lines[0].split(',').map((h) => h.trim().toLowerCase().replace(/\s+/g, ''));
const nameIdx = header.findIndex((h) => h.includes('name'));
const emailIdx = header.findIndex((h) => h.includes('email'));
const regIdx = header.findIndex((h) => h.includes('reg') || h.includes('roll'));
const deptIdx = header.findIndex((h) => h.includes('dept') || h.includes('department') || h.includes('branch'));
const collegeIdx = header.findIndex((h) => h.includes('college') || h.includes('institution') || h.includes('university'));
if (nameIdx < 0 || emailIdx < 0) return { err: 'CSV must include at least "Name" and "Email" columns.' };
const parsed = [];
for (let i = 1; i < lines.length; i++) {
const cols = lines[i].split(',').map((c) => c.trim());
const name = cols[nameIdx] || '';
const email = cols[emailIdx] || '';
const regNo = regIdx >= 0 ? (cols[regIdx] || '') : '';
const dept = deptIdx >= 0 ? (cols[deptIdx] || '') : '';
const college = collegeIdx >= 0 ? (cols[collegeIdx] || '') : '';
if (!name || !email) continue;
const normDept = dept.toLowerCase().replace(/\s+/g, '');
const normName = name.toLowerCase().replace(/\s+/g, '');
const normReg = regNo.toLowerCase().replace(/\s+/g, '');
const password = applyPw(pwPattern, { department: normDept, fullname: normName, regnumber: normReg || normName });
parsed.push({ name, email, regNo, dept, college, password });
}
if (parsed.length === 0) return { err: 'No valid rows found after parsing.' };
return { rows: parsed };
}
function handleFile(file) {
if (!file) return;
if (!file.name.endsWith('.csv')) { setError('Please upload a .csv file.'); return; }
const reader = new FileReader();
reader.onload = (e) => {
const result = parseCSV(e.target.result);
if (result.err) { setError(result.err); return; }
setError('');
setRows(result.rows);
setStep(1);
};
reader.readAsText(file);
}
async function downloadDocx() {
const tableRows = rows.map((r) => `
${r.name}
${r.email}
${r.regNo}
${r.college || '—'}
${r.dept}
${r.password}
`).join('');
const html = `
Student Login Credentials
ChiselAssess — Student Login Credentials
Generated: ${new Date().toLocaleDateString('en-IN')} · Password pattern: ${pwPattern} · ${rows.length} students
Name Email Reg. No. College Department Password ${tableRows}
Distribute securely. Students should change their password on first login.
`;
const blob = new Blob([html], { type: 'application/msword' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = 'student-credentials.doc';
document.body.appendChild(a); a.click();
setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 0);
}
const [importing, setImporting] = React.useState(false);
const [importResult, setImportResult] = React.useState(null);
const [provisionLog, setProvisionLog] = React.useState([]); // tracking auto-created depts
async function confirmImport() {
setImporting(true);
const log = [];
// ── STEP A: Ensure all (college, dept) pairs exist in the tool ────────────
const uniquePairs = new Map();
for (const row of rows) {
const col = (row.college || '').trim();
const dept = (row.dept || '').trim();
if (!col || !dept) continue;
const key = `${col.toLowerCase()}|||${dept.toLowerCase()}`;
if (!uniquePairs.has(key)) uniquePairs.set(key, { college: col, dept });
}
for (const { college, dept } of uniquePairs.values()) {
try {
const res = await apiFetch('/colleges/ensure-dept', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ college_name: college, dept_name: dept }),
});
// Log only newly created items
if (res.college?.created || res.department?.created) {
log.push({
college,
dept,
collegeNew: res.college?.created,
deptNew: res.department?.created,
message: res.message,
});
}
} catch (e) {
// Non-fatal — user creation will still proceed; dept might already exist
log.push({ college, dept, error: String(e.message || e), failed: true });
}
}
setProvisionLog(log);
// ── STEP B: Create user accounts ─────────────────────────────────────────
let created = 0, failed = 0;
for (const row of rows) {
try {
await apiFetch('/auth/admin/create-user', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: row.name,
email: row.email,
password: row.password,
role: 'user',
department: row.dept,
college: row.college || '',
reg_number: row.regNo || '',
}),
});
created++;
} catch (e) {
failed++;
}
}
setImportResult({ created, failed });
setImporting(false);
onCreate && onCreate(rows);
setStep(2);
}
// Helper: is a (college, dept) pair missing in the tool?
const isPairMissing = (college, dept) => {
if (!college || !dept) return false;
const found = knownColleges.find((c) => c.name.toLowerCase() === college.toLowerCase());
if (!found) return true;
return !found.departments.some((d) => d.name.toLowerCase() === dept.toLowerCase());
};
return (
Cancel
fileRef.current?.click()}>
Choose CSV file
) : step === 1 ? (
<>
Cancel
setStep(0)}> Re-upload
Download Credentials (.doc)
{importing ? 'Provisioning & importing…' : <> Import {rows.length} students}
) : (
<>
Download Credentials (.doc) Done
)
}>
{/* ── Step 0: Upload ── */}
{step === 0 && (
{ e.preventDefault(); setDragging(true); }}
onDragLeave={() => setDragging(false)}
onDrop={(e) => { e.preventDefault(); setDragging(false); handleFile(e.dataTransfer.files[0]); }}
onClick={() => fileRef.current?.click()}
style={{
border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--rule)'}`,
borderRadius: 10, padding: '48px 32px', textAlign: 'center', cursor: 'pointer',
background: dragging ? 'color-mix(in oklab, var(--accent) 6%, var(--paper-2))' : 'var(--paper-2)',
transition: 'all .15s',
}}>
Drop your CSV here, or click to browse
Accepts .csv files only
handleFile(e.target.files[0])}/>
{error && (
{error}
)}
Expected CSV format
Name, Email, Reg No, College, Department
Priya Krishnan,priya@college.ac.in,22CSE1042,SRMIST,CSE
Arjun Mehta,arjun@college.ac.in,22ECE0871,VIT Chennai,ECE
Auto-provisioning: {' '}
If a college or department in the CSV doesn't exist in the tool, it will be created automatically before the accounts are imported.
)}
{/* ── Step 1: Preview ── */}
{step === 1 && (
{/* Summary bar */}
{rows.length} students parsed successfully
Password pattern: {pwPattern}
{/* Auto-provision notice if there are missing pairs */}
{missingPairs.length > 0 && (
{missingPairs.length} new college/department pair{missingPairs.length > 1 ? 's' : ''} will be auto-created
{missingPairs.map((p, i) => (
{p.collegeNew && ★ }
{p.college} → {p.dept}
{p.collegeNew && (new college) }
{!p.collegeNew && p.deptNew && (new dept) }
))}
★ = entirely new college | Items without ★ = new department added to existing college.
These will be created automatically when you click "Import".
)}
{/* Student table */}
{['#','Name','Email','Reg. No.','College','Dept','Password'].map((h) => (
{h}
))}
{rows.map((r, i) => {
const missing = isPairMissing(r.college, r.dept);
return (
{i + 1}
{r.name}
{r.email}
{r.regNo || '—'}
{r.college || '—'}
{missing && r.college && (
NEW
)}
{r.dept || '—'}
{missing && r.dept && (
NEW
)}
{r.password}
);
})}
Import complete
{importResult.created} accounts created
{importResult.failed > 0 && <> · {importResult.failed} failed (already exist or invalid)}
{/* Auto-provisioning log */}
{provisionLog.length > 0 && (
Auto-provisioned colleges & departments:
{provisionLog.map((item, i) => (
{item.failed ? '✗' : '✓'}
{item.failed
? <>{item.college} → {item.dept} : {item.error}
: <>{item.message}
}
))}
)}
Credentials sheet ready to download and share with students.
)}
);
}
function CollegesView() {
const [colleges, setColleges] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
const [expanded, setExpanded] = React.useState({}); // {collegeId: bool}
const [addingCollege, setAddingCollege] = React.useState(false);
const [newCollegeName, setNewCollegeName] = React.useState('');
const [addingDept, setAddingDept] = React.useState(null); // college id or null
const [newDeptName, setNewDeptName] = React.useState('');
const [saving, setSaving] = React.useState(false);
const load = React.useCallback(() => {
setLoading(true); setErr('');
apiFetch('/colleges/')
.then((data) => { setColleges(Array.isArray(data) ? data : []); })
.catch((e) => setErr(e.message || 'Failed to load colleges'))
.finally(() => setLoading(false));
}, []);
React.useEffect(load, [load]);
const toggleExpand = (id) => setExpanded((p) => ({ ...p, [id]: !p[id] }));
const createCollege = async () => {
if (!newCollegeName.trim()) return;
setSaving(true);
try {
await apiFetch('/colleges/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: newCollegeName.trim() }),
});
setNewCollegeName(''); setAddingCollege(false);
load();
} catch (e) { alert(e.message || 'Failed to create college'); }
finally { setSaving(false); }
};
const deleteCollege = async (id, name) => {
if (!confirm(`Delete college "${name}" and all its departments? This cannot be undone.`)) return;
try {
await apiFetch(`/colleges/${id}`, { method: 'DELETE' });
load();
} catch (e) { alert(e.message || 'Failed to delete college'); }
};
const addDept = async (collegeId) => {
if (!newDeptName.trim()) return;
setSaving(true);
try {
await apiFetch(`/colleges/${collegeId}/departments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: newDeptName.trim() }),
});
setNewDeptName(''); setAddingDept(null);
load();
} catch (e) { alert(e.message || 'Failed to add department'); }
finally { setSaving(false); }
};
const deleteDept = async (collegeId, deptId, deptName) => {
if (!confirm(`Remove department "${deptName}"?`)) return;
try {
await apiFetch(`/colleges/${collegeId}/departments/${deptId}`, { method: 'DELETE' });
load();
} catch (e) { alert(e.message || 'Failed to delete department'); }
};
return (
Institution
Colleges & Departments
Manage colleges and their branch/department list. These are available as options during student registration and slot filtering.
{ setAddingCollege(true); setNewCollegeName(''); }}>
Add college
{/* Add college inline form */}
{addingCollege && (
{saving ? 'Saving…' : 'Save'}
setAddingCollege(false)}>Cancel
)}
{loading &&
Loading…
}
{err &&
{err}
}
{!loading && colleges.length === 0 && !err && (
No colleges yet
Click "Add college" to create your first institution.
)}
{colleges.map((c) => (
{/* College header row */}
toggleExpand(c.id)}
>
{c.name.charAt(0).toUpperCase()}
{c.name}
{c.departments.length} department{c.departments.length !== 1 ? 's' : ''}
{ e.stopPropagation(); setAddingDept(c.id); setNewDeptName(''); setExpanded((p) => ({ ...p, [c.id]: true })); }}
>
Add dept
{ e.stopPropagation(); deleteCollege(c.id, c.name); }}
>
{/* Department list (expanded) */}
{expanded[c.id] && (
{/* Add dept inline form */}
{addingDept === c.id && (
addDept(c.id)} disabled={saving || !newDeptName.trim()}>
{saving ? '…' : 'Add'}
setAddingDept(null)}>Cancel
)}
{c.departments.length === 0 && addingDept !== c.id && (
No departments yet. Click "Add dept" to add one.
)}
{c.departments.map((d, di) => (
└
{d.name}
{d.created_at ? d.created_at.slice(0, 10) : ''}
deleteDept(c.id, d.id, d.name)}
>
))}
)}
))}
);
}
// ── ExportFilterModal — delegates to the new DownloadModal ──────────────────
// DownloadModal is loaded by download.jsx which is included in index.html
function ExportFilterModal({ onClose, slotId = null, slotTitle = null, slots = null }) {
const DM = window.DownloadModal;
if (DM) {
return
Download module loading… please refresh if this persists.
);
}
Object.assign(window, {
Modal, Field, TextInput, SelectInput, Toggle, MultiPillSelect,
NewSlotModal, NewUserModal, BulkImportModal, AnalyticsAccessView, DocsView, SettingsView,
CollegesView, ExportFilterModal, EditSlotModal,
});
// ── Edit Slot Modal (superadmin only) ─────────────────────────────────────────
function EditSlotModal({ slot, onClose, onSaved }) {
const [title, setTitle] = React.useState(slot.title || '');
const [description, setDesc] = React.useState(slot.description || '');
// Frontend uses 'open'/'closed'; API expects 'active'/'closed'
// Map frontend -> API for the dropdown value
const [status, setStatus] = React.useState(slot.status === 'open' ? 'active' : 'closed');
// normaliseApiSlot stores max_attempts as slot.attempts
const [maxAttempts, setMaxAtt] = React.useState(String(slot.attempts != null ? slot.attempts : (slot.max_attempts != null ? slot.max_attempts : '')));
const [expiresAt, setExpires] = React.useState(() => {
if (!slot.expires_at) return '';
try {
const d = new Date(slot.expires_at);
// Format as datetime-local: YYYY-MM-DDTHH:MM
const pad = (n) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
} catch { return ''; }
});
const [saving, setSaving] = React.useState(false);
const [err, setErr] = React.useState('');
// The original frontend status (normalised: 'open' or 'closed')
const origFrontendStatus = slot.status === 'open' ? 'active' : 'closed';
const save = async () => {
if (!title.trim()) { setErr('Title is required.'); return; }
setSaving(true); setErr('');
try {
const body = { title: title.trim() };
if (description.trim() !== (slot.description || '').trim()) body.description = description.trim();
// Send API-side status ('active' or 'closed')
if (status !== origFrontendStatus) body.status = status;
if (expiresAt) body.expires_at = expiresAt;
else if (slot.expires_at) body.expires_at = ''; // clear
const att = parseInt(maxAttempts, 10);
if (!isNaN(att) && att > 0) body.max_attempts = att;
else if (maxAttempts === '' && (slot.attempts || slot.max_attempts)) body.max_attempts = null;
await apiFetch(`/slots/${slot.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
// Map API status back to frontend normalised status before updating local state
const updatedFrontend = { ...slot, ...body };
if (body.status !== undefined) {
updatedFrontend.status = body.status === 'active' ? 'open' : 'closed';
}
if (body.max_attempts !== undefined) {
updatedFrontend.attempts = body.max_attempts;
}
onSaved && onSaved(updatedFrontend);
onClose();
} catch (ex) {
setErr(ex.message || 'Save failed.');
} finally { setSaving(false); }
};
return (
Cancel
{saving ? 'Saving…' : 'Save changes'}
}
>
{err && (
{err}
)}