diff --git a/src/features/candidate-filtering/components/SelectedCandidatesReviewModal.tsx b/src/features/candidate-filtering/components/SelectedCandidatesReviewModal.tsx
index a78d044..099ec60 100644
--- a/src/features/candidate-filtering/components/SelectedCandidatesReviewModal.tsx
+++ b/src/features/candidate-filtering/components/SelectedCandidatesReviewModal.tsx
@@ -136,7 +136,7 @@ export function SelectedCandidatesReviewModal({
title: 'Shortlist allocation finalized',
message: `${finalized.selectedCandidateCount} manually selected candidate${finalized.selectedCandidateCount === 1 ? '' : 's'} finalized.`,
})
- navigate(shortlistLocation(checkpoint.shortlistId))
+ onClose()
} catch (reason) {
const mapped = mapApiError(reason, 'protected')
@@ -242,7 +242,7 @@ export function SelectedCandidatesReviewModal({
{candidate.hasExistingActiveShortlist ? (
diff --git a/src/features/candidate-filtering/pages/CandidateFilteringPage.tsx b/src/features/candidate-filtering/pages/CandidateFilteringPage.tsx
index ffc9bbc..dffb922 100644
--- a/src/features/candidate-filtering/pages/CandidateFilteringPage.tsx
+++ b/src/features/candidate-filtering/pages/CandidateFilteringPage.tsx
@@ -24,7 +24,7 @@ export function CandidateFilteringPage() {
return (
diff --git a/src/features/candidate-filtering/tests/candidateResultsWorkspace.test.tsx b/src/features/candidate-filtering/tests/candidateResultsWorkspace.test.tsx
index 3b66a68..c2c11ae 100644
--- a/src/features/candidate-filtering/tests/candidateResultsWorkspace.test.tsx
+++ b/src/features/candidate-filtering/tests/candidateResultsWorkspace.test.tsx
@@ -130,7 +130,7 @@ describe('CandidateResultsWorkspace wireframe behavior', () => {
`/admin/students/${studentId}`,
)
expect(screen.getByRole('columnheader', { name: 'Cross-shortlist status' })).toBeInTheDocument()
- expect(screen.getByText('Already shortlisted in 2 active requests')).toBeInTheDocument()
+ expect(screen.getByText('Already shortlisted in 2 other shortlists')).toBeInTheDocument()
expect(screen.getByRole('button', { name: 'View skills for Ayesha Perera' })).toBeEnabled()
expect(
screen.queryByText(
@@ -273,5 +273,12 @@ describe('CandidateResultsWorkspace wireframe behavior', () => {
await waitFor(() => expect(finalizeCalls).toBe(2))
expect(addCalls).toBe(1)
+ await waitFor(() =>
+ expect(
+ screen.queryByRole('dialog', { name: 'Review Selected Shortlist' }),
+ ).not.toBeInTheDocument(),
+ )
+ expect(screen.getByText('Shortlist allocation finalized')).toBeInTheDocument()
+ expect(screen.getByRole('heading', { name: 'Matching Students' })).toBeInTheDocument()
})
})
diff --git a/src/features/cv-builder/components/CvPreviewPanel.tsx b/src/features/cv-builder/components/CvPreviewPanel.tsx
index 02aa513..9b336d5 100644
--- a/src/features/cv-builder/components/CvPreviewPanel.tsx
+++ b/src/features/cv-builder/components/CvPreviewPanel.tsx
@@ -79,7 +79,30 @@ export function CvPreviewPanel({
)
}
+const previewStyles = `
+html{background:#eef0f3;color:#1c1c1c;font:14px/1.55 'Liberation Sans',Arial,Helvetica,sans-serif}
+body{margin:0;padding:40px 20px}
+.cv-document{max-width:760px;margin:0 auto;background:#fff;padding:48px 56px;border:1px solid #e2e2e2;box-shadow:0 1px 4px rgba(0,0,0,.08)}
+.cv-header{text-align:center;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid #1c385e}
+.cv-header h1{font-size:30px;margin:0 0 6px;letter-spacing:.4px}
+.cv-headline{font-style:italic;color:#444;margin:0 0 8px;font-size:14px}
+.cv-contact,.cv-links{margin:2px 0;font-size:12.5px;color:#333}
+.cv-links a{color:#1c385e;text-decoration:underline}
+section{margin-top:20px}
+section:first-of-type{margin-top:0}
+section>h2{font-size:13px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:#1c385e;margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid #1c385e}
+article{margin-bottom:14px}
+article:last-child{margin-bottom:0}
+article>h3{font-size:14.5px;margin:0;font-weight:700}
+.cv-meta{margin:2px 0 6px;font-size:12.5px;font-style:italic;color:#555}
+p{margin:4px 0;font-size:13.5px}
+ul{margin:6px 0;padding-left:20px}
+li{margin:3px 0;font-size:13.5px}
+a{color:#1c385e;text-decoration:none;border-bottom:1px solid #ccc}
+strong{font-weight:700}
+`.replace(/\n/g, '')
+
export function buildPreviewDocument(htmlPreview: string) {
const sanitizedPreview = sanitizeCvHtml(htmlPreview)
- return `
${sanitizedPreview}`
+ return `
${sanitizedPreview}`
}
diff --git a/src/features/cv-builder/pages/CvBuilderPage.tsx b/src/features/cv-builder/pages/CvBuilderPage.tsx
index 4a40dec..5c521d2 100644
--- a/src/features/cv-builder/pages/CvBuilderPage.tsx
+++ b/src/features/cv-builder/pages/CvBuilderPage.tsx
@@ -272,15 +272,6 @@ export function CvBuilderPage() {
/>
-
)
diff --git a/src/features/eligible-students/api/eligibleStudentsApi.ts b/src/features/eligible-students/api/eligibleStudentsApi.ts
new file mode 100644
index 0000000..00c16d7
--- /dev/null
+++ b/src/features/eligible-students/api/eligibleStudentsApi.ts
@@ -0,0 +1,56 @@
+import { httpClient } from '../../../shared/api/httpClient'
+import {
+ eligibleStudentImportResultSchema,
+ eligibleStudentPagedResponseSchema,
+ eligibleStudentSchema,
+} from '../schemas/eligibleStudentSchemas'
+import type {
+ EligibleStudent,
+ EligibleStudentImportResult,
+ EligibleStudentQuery,
+ EligibleStudentRequest,
+ PagedResponse,
+} from '../types/eligibleStudentTypes'
+
+const basePath = '/admin/eligible-students'
+
+function listPath(query: EligibleStudentQuery) {
+ const parameters = new URLSearchParams({
+ page: String(query.page),
+ size: String(query.size),
+ sort: query.sort,
+ })
+ if (query.search.trim()) parameters.set('search', query.search.trim())
+ return `${basePath}?${parameters.toString()}`
+}
+
+export const eligibleStudentsApi = {
+ async list(query: EligibleStudentQuery, signal?: AbortSignal): Promise
> {
+ return eligibleStudentPagedResponseSchema.parse(
+ await httpClient(listPath(query), { signal }),
+ ) as PagedResponse
+ },
+ async create(values: EligibleStudentRequest): Promise {
+ return eligibleStudentSchema.parse(
+ await httpClient(basePath, { method: 'POST', body: values }),
+ ) as EligibleStudent
+ },
+ async update(id: string, values: EligibleStudentRequest): Promise {
+ return eligibleStudentSchema.parse(
+ await httpClient(`${basePath}/${encodeURIComponent(id)}`, {
+ method: 'PATCH',
+ body: values,
+ }),
+ ) as EligibleStudent
+ },
+ async remove(id: string): Promise {
+ await httpClient(`${basePath}/${encodeURIComponent(id)}`, { method: 'DELETE' })
+ },
+ async importFile(file: File): Promise {
+ const body = new FormData()
+ body.set('file', file)
+ return eligibleStudentImportResultSchema.parse(
+ await httpClient(`${basePath}/import`, { method: 'POST', body }),
+ ) as EligibleStudentImportResult
+ },
+}
diff --git a/src/features/eligible-students/components/EligibleStudentForm.tsx b/src/features/eligible-students/components/EligibleStudentForm.tsx
new file mode 100644
index 0000000..e3c3ac2
--- /dev/null
+++ b/src/features/eligible-students/components/EligibleStudentForm.tsx
@@ -0,0 +1,202 @@
+import { useRef, useState } from 'react'
+import { mapApiError } from '../../../shared/api/apiErrorMapper'
+import { FormField } from '../../../shared/components/forms/FormField'
+import { TextInput } from '../../../shared/components/forms/TextInput'
+import { Modal } from '../../../shared/components/overlays/Modal'
+import { Button } from '../../../shared/components/ui/Button'
+import { eligibleStudentFormSchema } from '../schemas/eligibleStudentSchemas'
+import type {
+ EligibleStudent,
+ EligibleStudentFormValues,
+ EligibleStudentRequest,
+} from '../types/eligibleStudentTypes'
+
+type Field = keyof EligibleStudentFormValues
+type FieldErrors = Partial>
+
+const emptyForm: EligibleStudentFormValues = {
+ indexNumber: '',
+ universityEmail: '',
+ fullName: '',
+ academicLevel: '',
+}
+
+function toFormValues(student: EligibleStudent): EligibleStudentFormValues {
+ return {
+ indexNumber: student.indexNumber,
+ universityEmail: student.universityEmail,
+ fullName: student.fullName,
+ academicLevel: String(student.academicLevel) as '3' | '4',
+ }
+}
+
+export function EligibleStudentForm({
+ item,
+ onCancel,
+ onSubmit,
+}: {
+ item?: EligibleStudent
+ onCancel: () => void
+ onSubmit: (values: EligibleStudentRequest) => Promise
+}) {
+ const [values, setValues] = useState(
+ item ? toFormValues(item) : emptyForm,
+ )
+ const [errors, setErrors] = useState({})
+ const [formError, setFormError] = useState()
+ const [isPending, setIsPending] = useState(false)
+ const indexRef = useRef(null)
+
+ const update = (field: F, value: EligibleStudentFormValues[F]) => {
+ setValues((current) => ({ ...current, [field]: value }))
+ setErrors((current) => ({ ...current, [field]: undefined }))
+ setFormError(undefined)
+ }
+
+ const submit = async (event: React.FormEvent) => {
+ event.preventDefault()
+ setErrors({})
+ setFormError(undefined)
+ const parsed = eligibleStudentFormSchema.safeParse(values)
+ if (!parsed.success) {
+ const nextErrors: FieldErrors = {}
+ for (const issue of parsed.error.issues) {
+ const field = issue.path[0]
+ if (typeof field === 'string' && !nextErrors[field as Field]) {
+ nextErrors[field as Field] = issue.message
+ }
+ }
+ setErrors(nextErrors)
+ if (nextErrors.indexNumber) window.requestAnimationFrame(() => indexRef.current?.focus())
+ return
+ }
+
+ setIsPending(true)
+ try {
+ await onSubmit({
+ indexNumber: parsed.data.indexNumber.toUpperCase(),
+ universityEmail: parsed.data.universityEmail.toLowerCase(),
+ fullName: parsed.data.fullName,
+ academicLevel: Number(parsed.data.academicLevel) as 3 | 4,
+ })
+ } catch (reason) {
+ const mapped = mapApiError(reason, 'protected')
+ const nextErrors: FieldErrors = {}
+ for (const fieldError of mapped.fieldErrors) {
+ if (fieldError.field in values) {
+ nextErrors[fieldError.field as Field] = fieldError.message
+ }
+ }
+ setErrors(nextErrors)
+ setFormError(mapped.message)
+ } finally {
+ setIsPending(false)
+ }
+ }
+
+ const describedBy = (field: Field) => (errors[field] ? `eligible-student-${field}-error` : undefined)
+
+ return (
+
+
+
+ )
+}
diff --git a/src/features/eligible-students/components/EligibleStudentImportPanel.tsx b/src/features/eligible-students/components/EligibleStudentImportPanel.tsx
new file mode 100644
index 0000000..e455e47
--- /dev/null
+++ b/src/features/eligible-students/components/EligibleStudentImportPanel.tsx
@@ -0,0 +1,77 @@
+import { useRef, useState } from 'react'
+import { mapApiError } from '../../../shared/api/apiErrorMapper'
+import { FileUploadField } from '../../../shared/components/forms/FileUploadField'
+import { Button } from '../../../shared/components/ui/Button'
+import { useEligibleStudentMutations } from '../hooks/useEligibleStudents'
+import type { EligibleStudentImportResult } from '../types/eligibleStudentTypes'
+
+export function EligibleStudentImportPanel() {
+ const mutations = useEligibleStudentMutations()
+ const [file, setFile] = useState(null)
+ const [result, setResult] = useState(null)
+ const [error, setError] = useState()
+ const inputRef = useRef(null)
+
+ const submit = async () => {
+ if (!file) return
+ setError(undefined)
+ setResult(null)
+ try {
+ const response = await mutations.importFile.mutateAsync(file)
+ setResult(response)
+ setFile(null)
+ if (inputRef.current) inputRef.current.value = ''
+ } catch (reason) {
+ setError(mapApiError(reason, 'protected').message)
+ }
+ }
+
+ return (
+
+
Bulk Import
+
+ Columns: Index Number , University Email ,{' '}
+ Full Name , Academic Level (3 or 4). Duplicates are
+ skipped.
+
+
+ setFile(event.target.files?.[0] ?? null)}
+ ref={inputRef}
+ />
+ void submit()}
+ >
+ Import
+
+
+ {error ? (
+
+ {error}
+
+ ) : null}
+ {result ? (
+
+
+ Imported {result.importedCount} of {result.totalRows} row
+ {result.totalRows === 1 ? '' : 's'}
+ {result.skippedCount > 0 ? ` — ${result.skippedCount} skipped.` : '.'}
+
+ {result.errors.length > 0 ? (
+
+ {result.errors.map((rowError) => (
+
+ Row {rowError.row}: {rowError.message}
+
+ ))}
+
+ ) : null}
+
+ ) : null}
+
+
+ Eligible student roster
+
+
+ Index Number
+ Full Name
+ University Email
+ Level
+ Status
+ Actions
+
+
+
+ {items.map((student) => (
+
+ {student.indexNumber}
+ {student.fullName}
+ {student.universityEmail}
+ {student.academicLevel}
+
+
+ {student.registered ? 'Registered' : 'Not registered'}
+
+
+
+ onEdit(student)} variant="secondary">
+ Edit
+
+ onDelete(student)}
+ title={student.registered ? 'Registered students cannot be removed.' : undefined}
+ variant="secondary"
+ >
+ Delete
+
+
+
+ ))}
+
+
+
(null)
+ const [deleting, setDeleting] = useState(null)
+
+ const setSearch = (value: string) => {
+ setSearchValue(value)
+ setPage(0)
+ }
+
+ const query = useEligibleStudents({
+ page,
+ size: ELIGIBLE_STUDENTS_PAGE_SIZE,
+ sort: 'indexNumber,asc',
+ search: debouncedSearch,
+ })
+ const mutations = useEligibleStudentMutations()
+ const pending = mutations.create.isPending || mutations.update.isPending || mutations.remove.isPending
+
+ const save = async (values: EligibleStudentRequest) => {
+ const item =
+ editing === 'new'
+ ? await mutations.create.mutateAsync(values)
+ : await mutations.update.mutateAsync({ id: editing!.id, values })
+ notify({
+ tone: 'success',
+ title: editing === 'new' ? 'Eligible student added' : 'Eligible student updated',
+ message: `${item.fullName} was saved.`,
+ })
+ setEditing(null)
+ }
+
+ const remove = async () => {
+ if (!deleting) return
+ try {
+ await mutations.remove.mutateAsync(deleting.id)
+ notify({
+ tone: 'success',
+ title: 'Eligible student removed',
+ message: `${deleting.fullName} was removed from the roster.`,
+ })
+ setDeleting(null)
+ } catch (error) {
+ const mapped = mapApiError(error, 'protected')
+ notify({ tone: 'error', title: 'Unable to remove eligible student', message: mapped.message })
+ }
+ }
+
+ const items = query.data?.items ?? []
+ const mappedError = query.isError ? mapApiError(query.error, 'protected') : null
+
+ return (
+
+
+
+
Roster
+ person_add}
+ onClick={() => setEditing('new')}
+ >
+ Add Student
+
+
+ setSearch(event.target.value)}
+ placeholder="Search by index number, name, or email"
+ value={search}
+ />
+
+ {mappedError ? (
+ void query.refetch()}
+ title="Eligible students unavailable"
+ />
+ ) : items.length === 0 ? (
+
+
+
+ {editing ? (
+ setEditing(null)}
+ onSubmit={save}
+ />
+ ) : null}
+
+ {deleting ? (
+ setDeleting(null)}
+ title="Remove Eligible Student"
+ >
+
+ Remove {deleting.fullName} ({deleting.indexNumber}) from the roster?
+ They won’t be able to register.
+
+
+ setDeleting(null)}
+ variant="secondary"
+ >
+ Cancel
+
+ void remove()}>
+ Remove Student
+
+
+
+ ) : null}
+
+ )
+}
diff --git a/src/features/eligible-students/schemas/eligibleStudentSchemas.ts b/src/features/eligible-students/schemas/eligibleStudentSchemas.ts
new file mode 100644
index 0000000..8526d3b
--- /dev/null
+++ b/src/features/eligible-students/schemas/eligibleStudentSchemas.ts
@@ -0,0 +1,54 @@
+import { z } from 'zod'
+
+const timestampSchema = z.string().datetime({ offset: true })
+
+export const eligibleStudentSchema = z
+ .object({
+ id: z.string().uuid(),
+ indexNumber: z.string().min(1).max(32),
+ universityEmail: z.string().email().max(254),
+ fullName: z.string().min(1).max(160),
+ academicLevel: z.union([z.literal(3), z.literal(4)]),
+ active: z.boolean(),
+ registered: z.boolean(),
+ createdAt: timestampSchema,
+ updatedAt: timestampSchema,
+ })
+ .strict()
+
+export const pageMetadataSchema = z
+ .object({
+ page: z.number().int().nonnegative(),
+ size: z.number().int().min(1).max(500),
+ totalElements: z.number().int().nonnegative(),
+ totalPages: z.number().int().nonnegative(),
+ sort: z.string(),
+ })
+ .strict()
+
+export const eligibleStudentPagedResponseSchema = z
+ .object({ items: z.array(eligibleStudentSchema), page: pageMetadataSchema })
+ .strict()
+
+export const eligibleStudentImportResultSchema = z
+ .object({
+ totalRows: z.number().int().nonnegative(),
+ importedCount: z.number().int().nonnegative(),
+ skippedCount: z.number().int().nonnegative(),
+ errors: z.array(z.object({ row: z.number().int(), message: z.string() })),
+ })
+ .strict()
+
+const indexNumberPattern = /^[A-Za-z]{2}\/[0-9]{4}\/[0-9]{5}$/
+
+export const eligibleStudentFormSchema = z.object({
+ indexNumber: z
+ .string()
+ .trim()
+ .regex(indexNumberPattern, 'Use the format CS/2022/00123.'),
+ universityEmail: z.string().trim().email('Enter a valid email address.').max(254),
+ fullName: z.string().trim().min(1, 'Full name is required.').max(160),
+ academicLevel: z.union([z.literal('3'), z.literal('4')], {
+ errorMap: () => ({ message: 'Select academic level 3 or 4.' }),
+ }),
+})
diff --git a/src/features/eligible-students/types/eligibleStudentTypes.ts b/src/features/eligible-students/types/eligibleStudentTypes.ts
new file mode 100644
index 0000000..54966e5
--- /dev/null
+++ b/src/features/eligible-students/types/eligibleStudentTypes.ts
@@ -0,0 +1,53 @@
+export const ELIGIBLE_STUDENTS_PAGE_SIZE = 10
+
+export type EligibleStudent = {
+ id: string
+ indexNumber: string
+ universityEmail: string
+ fullName: string
+ academicLevel: 3 | 4
+ active: boolean
+ registered: boolean
+ createdAt: string
+ updatedAt: string
+}
+
+export type EligibleStudentQuery = {
+ page: number
+ size: number
+ sort: string
+ search: string
+}
+
+export type PageMetadata = {
+ page: number
+ size: number
+ totalElements: number
+ totalPages: number
+ sort: string
+}
+
+export type PagedResponse = { items: T[]; page: PageMetadata }
+
+export type EligibleStudentFormValues = {
+ indexNumber: string
+ universityEmail: string
+ fullName: string
+ academicLevel: '3' | '4' | ''
+}
+
+export type EligibleStudentRequest = {
+ indexNumber: string
+ universityEmail: string
+ fullName: string
+ academicLevel: 3 | 4
+}
+
+export type EligibleStudentImportRowError = { row: number; message: string }
+
+export type EligibleStudentImportResult = {
+ totalRows: number
+ importedCount: number
+ skippedCount: number
+ errors: EligibleStudentImportRowError[]
+}
diff --git a/src/features/home/components/GatewayIntro.tsx b/src/features/home/components/GatewayIntro.tsx
index 43fa267..071c516 100644
--- a/src/features/home/components/GatewayIntro.tsx
+++ b/src/features/home/components/GatewayIntro.tsx
@@ -1,32 +1,31 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import type { GatewayCaption } from '../data/gatewayCaptions'
import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion'
-import { LogoDrawReveal } from './LogoDrawReveal'
-type IntroPhase = 'logo' | 'slides' | 'exit'
+type IntroPhase = 'playing' | 'exit'
-type GatewayIntroProps = {
- captions: readonly GatewayCaption[]
+export type GatewayIntroProps = {
+ captions?: readonly GatewayCaption[]
onComplete: () => void
+ videoSrc?: string
}
export const gatewayIntroTiming = {
- logoRevealMs: 2000,
- slideHoldMs: 1250,
- exitMs: 420,
- reducedMotionMs: 180,
+ exitMs: 500,
+ reducedMotionMs: 150,
} as const
-export function GatewayIntro({ captions, onComplete }: GatewayIntroProps) {
+const DEFAULT_VIDEO_SRC = '/videos/Required%20Intro%20video.mp4'
+
+export function GatewayIntro({ onComplete, videoSrc = DEFAULT_VIDEO_SRC }: GatewayIntroProps) {
const prefersReducedMotion = usePrefersReducedMotion()
+ const videoRef = useRef(null)
const skipButtonRef = useRef(null)
const hasCompletedRef = useRef(false)
- const [phase, setPhase] = useState('logo')
- const [activeSlide, setActiveSlide] = useState(0)
+ const [phase, setPhase] = useState('playing')
const completeIntro = useCallback(() => {
if (hasCompletedRef.current) return
-
hasCompletedRef.current = true
onComplete()
}, [onComplete])
@@ -38,115 +37,95 @@ export function GatewayIntro({ captions, onComplete }: GatewayIntroProps) {
}
setPhase('exit')
+ const timer = window.setTimeout(completeIntro, gatewayIntroTiming.exitMs)
+ return () => window.clearTimeout(timer)
}, [completeIntro, prefersReducedMotion])
+ // Focus skip button on mount for immediate keyboard accessibility
useEffect(() => {
skipButtonRef.current?.focus({ preventScroll: true })
}, [])
+ // Respect reduced motion: finish immediately
+ useEffect(() => {
+ if (prefersReducedMotion) {
+ const timer = window.setTimeout(completeIntro, gatewayIntroTiming.reducedMotionMs)
+ return () => window.clearTimeout(timer)
+ }
+ }, [completeIntro, prefersReducedMotion])
+
+ // Keyboard shortcut: Escape to skip
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault()
requestExit()
}
-
- if (event.key === 'Tab') {
- event.preventDefault()
- skipButtonRef.current?.focus({ preventScroll: true })
- }
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [requestExit])
+ // Initiate autoplay safely
useEffect(() => {
- if (prefersReducedMotion) {
- const timer = window.setTimeout(completeIntro, gatewayIntroTiming.reducedMotionMs)
- return () => window.clearTimeout(timer)
- }
-
- if (phase === 'logo') {
- const timer = window.setTimeout(() => {
- if (captions.length === 0) {
- setPhase('exit')
- return
- }
-
- setPhase('slides')
- }, gatewayIntroTiming.logoRevealMs)
-
- return () => window.clearTimeout(timer)
- }
-
- if (phase === 'slides') {
- const timer = window.setTimeout(() => {
- if (activeSlide < captions.length - 1) {
- setActiveSlide((currentSlide) => currentSlide + 1)
- return
- }
-
- setPhase('exit')
- }, gatewayIntroTiming.slideHoldMs)
-
- return () => window.clearTimeout(timer)
+ const video = videoRef.current
+ if (!video || prefersReducedMotion) return
+
+ try {
+ const playPromise = video.play()
+ if (playPromise && typeof playPromise.catch === 'function') {
+ playPromise.catch(() => {
+ // Autoplay blocked by browser policy; remains ready for user interaction/skip
+ })
+ }
+ } catch {
+ // Safe fallback
}
-
- const timer = window.setTimeout(completeIntro, gatewayIntroTiming.exitMs)
- return () => window.clearTimeout(timer)
- }, [activeSlide, captions.length, completeIntro, phase, prefersReducedMotion])
+ }, [prefersReducedMotion])
return (
-
- Skip intro
-
-
-
-
-
-
-
-
-
CV Management System
-
- {captions.map((caption, index) => {
- const offset = (index - activeSlide) * 112
- const isActive = phase === 'slides' && index === activeSlide
-
- return (
-
- {caption.text}
-
- )
- })}
-
-
-
- {captions.map((caption, index) => (
-
+
+
+
+
+
+
+ Skip Intro
+
+ ESC
+
+
+ arrow_forward
+
+
)
diff --git a/src/features/home/components/TypewriterText.tsx b/src/features/home/components/TypewriterText.tsx
index 383de23..f2c3fc2 100644
--- a/src/features/home/components/TypewriterText.tsx
+++ b/src/features/home/components/TypewriterText.tsx
@@ -8,16 +8,16 @@ type TypewriterTextProps = {
className?: string
}
-const fullCaptionHoldMs = 1500
-const betweenCaptionPauseMs = 260
-const reducedMotionCaptionHoldMs = 2800
-const deletingDelayMs = 26
+const fullCaptionHoldMs = 2600
+const betweenCaptionPauseMs = 500
+const reducedMotionCaptionHoldMs = 3200
+const deletingDelayMs = 45
function getTypingDelay(character: string) {
- if (/[.!?]/.test(character)) return 180
- if (/[,;:]/.test(character)) return 110
- if (character === ' ') return 34
- return 58
+ if (/[.!?]/.test(character)) return 320
+ if (/[,;:]/.test(character)) return 200
+ if (character === ' ') return 80
+ return 95
}
export function TypewriterText({ captions, className = '' }: TypewriterTextProps) {
diff --git a/src/features/home/pages/HomePage.tsx b/src/features/home/pages/HomePage.tsx
index 7320eeb..415fad3 100644
--- a/src/features/home/pages/HomePage.tsx
+++ b/src/features/home/pages/HomePage.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import { routePaths } from '../../../app/config/routePaths'
import { GatewayIntro } from '../components/GatewayIntro'
-import { LogoDrawReveal } from '../components/LogoDrawReveal'
import { TypewriterText } from '../components/TypewriterText'
import { gatewayCaptions, gatewayCaptionTexts } from '../data/gatewayCaptions'
@@ -41,7 +40,13 @@ export function HomePage() {
-
+
@@ -67,7 +72,6 @@ export function HomePage() {
-
Secure role-based access
Select your role
-
setValues((current) => ({ ...current, newPassword: event.target.value }))
}
- type="password"
value={values.newPassword}
/>
@@ -60,13 +59,12 @@ export function StudentCreatePasswordForm({
htmlFor="student-confirm-password"
label="Confirm New Password"
>
-
setValues((current) => ({ ...current, confirmPassword: event.target.value }))
}
- type="password"
value={values.confirmPassword}
/>
diff --git a/src/features/student-auth/components/StudentLoginForm.tsx b/src/features/student-auth/components/StudentLoginForm.tsx
index c5452d7..2c4898f 100644
--- a/src/features/student-auth/components/StudentLoginForm.tsx
+++ b/src/features/student-auth/components/StudentLoginForm.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
import { Link } from 'react-router-dom'
import { routePaths } from '../../../app/config/routePaths'
import { FormField } from '../../../shared/components/forms/FormField'
+import { PasswordInput } from '../../../shared/components/forms/PasswordInput'
import { TextInput } from '../../../shared/components/forms/TextInput'
import { Button } from '../../../shared/components/ui/Button'
import { flattenZodErrors, loginSchema, type LoginFormValues } from '../schemas/studentAuthSchemas'
@@ -42,14 +43,13 @@ export function StudentLoginForm({ isSubmitting, onSubmit }: StudentLoginFormPro
/>
-
setValues((current) => ({ ...current, password: event.target.value }))
}
placeholder="Enter your password"
- type="password"
value={values.password}
/>
diff --git a/src/features/student-auth/pages/StudentLoginPage.tsx b/src/features/student-auth/pages/StudentLoginPage.tsx
index b78a510..f451696 100644
--- a/src/features/student-auth/pages/StudentLoginPage.tsx
+++ b/src/features/student-auth/pages/StudentLoginPage.tsx
@@ -44,6 +44,12 @@ export function StudentLoginPage() {
}
>
+
+ arrow_back
+
+ Back
+
Login
{message ? (
diff --git a/src/features/student-auth/pages/StudentSignUpPage.tsx b/src/features/student-auth/pages/StudentSignUpPage.tsx
index 1f3bfc5..a469f31 100644
--- a/src/features/student-auth/pages/StudentSignUpPage.tsx
+++ b/src/features/student-auth/pages/StudentSignUpPage.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
import { routePaths } from '../../../app/config/routePaths'
import { mapApiError } from '../../../shared/api/apiErrorMapper'
import { authStorage } from '../../../shared/auth/authStorage'
@@ -42,6 +42,12 @@ export function StudentSignUpPage() {
title="Launch your placement profile."
>
+
+ arrow_back
+
+ Back
+
Student Registration
Initialize your passwordless account authorization request below.
diff --git a/src/features/student-profile/api/studentProfileEntriesApi.ts b/src/features/student-profile/api/studentProfileEntriesApi.ts
index 3e32c92..0ec20c1 100644
--- a/src/features/student-profile/api/studentProfileEntriesApi.ts
+++ b/src/features/student-profile/api/studentProfileEntriesApi.ts
@@ -6,6 +6,7 @@ import {
awardSchema,
certificateSchema,
contactLinkSchema,
+ educationSchema,
experienceSchema,
pagedResponseSchema,
} from '../schemas/profileEntrySchemas'
@@ -18,6 +19,8 @@ import type {
CertificateRequest,
ContactLink,
ContactLinkRequest,
+ Education,
+ EducationRequest,
Experience,
ExperienceRequest,
PagedResponse,
@@ -69,6 +72,10 @@ export const contactLinksApi = createCollectionApi
(
+ '/me/profile/education',
+ educationSchema,
+)
export const certificatesApi = createCollectionApi(
'/me/profile/certificates',
certificateSchema,
diff --git a/src/features/student-profile/components/EducationEditor.tsx b/src/features/student-profile/components/EducationEditor.tsx
new file mode 100644
index 0000000..944ce5a
--- /dev/null
+++ b/src/features/student-profile/components/EducationEditor.tsx
@@ -0,0 +1,149 @@
+import { useState } from 'react'
+import { mapApiError } from '../../../shared/api/apiErrorMapper'
+import { FormField } from '../../../shared/components/forms/FormField'
+import { TextInput } from '../../../shared/components/forms/TextInput'
+import { mapEducationRequest } from '../mappers/profileEntryMappers'
+import { educationFormSchema } from '../schemas/profileEntrySchemas'
+import type { Education, EducationRequest } from '../types/profileEntryTypes'
+import { ProfileEditorActions } from './ProfileEditorActions'
+
+const toMonthInput = (value: string | null) => (value ? value.slice(0, 7) : '')
+
+export function EducationEditor({
+ isPending,
+ item,
+ onCancel,
+ onSubmit,
+}: {
+ isPending: boolean
+ item?: Education
+ onCancel: () => void
+ onSubmit: (values: EducationRequest) => Promise
+}) {
+ const [values, setValues] = useState({
+ degree: item?.degree ?? '',
+ institution: item?.institution ?? '',
+ institutionUrl: item?.institutionUrl ?? '',
+ location: item?.location ?? '',
+ startDate: toMonthInput(item?.startDate ?? null),
+ endDate: toMonthInput(item?.endDate ?? null),
+ current: item?.current ?? false,
+ resultNote: item?.resultNote ?? '',
+ cvInclude: item?.cvInclude ?? true,
+ })
+ const [error, setError] = useState(null)
+ const submit = async (event: React.FormEvent) => {
+ event.preventDefault()
+ setError(null)
+ const parsed = educationFormSchema.safeParse(values)
+ if (!parsed.success) {
+ setError(parsed.error.issues[0]?.message ?? 'Check the entered details.')
+ return
+ }
+ try {
+ await onSubmit(mapEducationRequest(parsed.data))
+ } catch (reason) {
+ setError(mapApiError(reason, 'protected').message)
+ }
+ }
+ return (
+
+ )
+}
diff --git a/src/features/student-profile/components/ProfileCollectionSection.tsx b/src/features/student-profile/components/ProfileCollectionSection.tsx
index 90efdd2..5d17030 100644
--- a/src/features/student-profile/components/ProfileCollectionSection.tsx
+++ b/src/features/student-profile/components/ProfileCollectionSection.tsx
@@ -1,4 +1,5 @@
import type { ReactNode } from 'react'
+import { useState } from 'react'
import { mapApiError } from '../../../shared/api/apiErrorMapper'
import { PaginationBar } from '../../../shared/components/data/PaginationBar'
import { SearchInput } from '../../../shared/components/data/SearchInput'
@@ -44,58 +45,86 @@ export function ProfileCollectionSection({
title: string
}) {
const mappedError = error ? mapApiError(error, 'protected') : null
+ const [isOpen, setIsOpen] = useState(true)
+ const slug = title.replaceAll(' ', '-').toLowerCase()
+ const headingId = `${slug}-title`
+ const bodyId = `${slug}-body`
return (
-
-
{title}
-
{description}
+
+
setIsOpen((current) => !current)}
+ type="button"
+ >
+
+
+
+
+
{title}
+
{description}
+
{addLabel}
-
{savedTitle}
-
onSearchChange(event.target.value)}
- placeholder={searchLabel}
- value={search}
- />
- {isFetching && !isPending ? (
-
- Updating results…
-
- ) : null}
- {isPending ? (
-
-
-
+ {isOpen ? (
+
+
{savedTitle}
+
onSearchChange(event.target.value)}
+ placeholder={searchLabel}
+ value={search}
+ />
+ {isFetching && !isPending ? (
+
+ Updating results…
+
+ ) : null}
+ {isPending ? (
+
+
+ ) : null}
+ {mappedError ? (
+
) : null}
- {mappedError ? (
-
- ) : null}
- {!isPending && !mappedError ? children : null}
- {page && page.totalPages > 0 ? (
-
- ) : null}
)
}
diff --git a/src/features/student-profile/components/ProfileIdentityCard.tsx b/src/features/student-profile/components/ProfileIdentityCard.tsx
index 838f542..29fefec 100644
--- a/src/features/student-profile/components/ProfileIdentityCard.tsx
+++ b/src/features/student-profile/components/ProfileIdentityCard.tsx
@@ -39,7 +39,7 @@ export function ProfileIdentityCard({
Level {profile.studentLevel}
-
Cohort / Batch
+ Batch
{profile.cohortYear ?? 'Not available'}
diff --git a/src/features/student-profile/components/ProfileSections.tsx b/src/features/student-profile/components/ProfileSections.tsx
index 696e1c0..5cbfba7 100644
--- a/src/features/student-profile/components/ProfileSections.tsx
+++ b/src/features/student-profile/components/ProfileSections.tsx
@@ -15,6 +15,8 @@ import {
useCertificateMutations,
useContactLinkMutations,
useContactLinks,
+ useEducation,
+ useEducationMutations,
useExperience,
useExperienceMutations,
} from '../hooks/useProfileEntries'
@@ -28,6 +30,8 @@ import type {
CertificateRequest,
ContactLink,
ContactLinkRequest,
+ Education,
+ EducationRequest,
Experience,
ExperienceRequest,
ProfileCollectionQuery,
@@ -38,6 +42,7 @@ import { ActivityEditor } from './ActivityEditor'
import { AwardEditor } from './AwardEditor'
import { CertificateEditor } from './CertificateEditor'
import { ContactLinkEditor } from './ContactLinkEditor'
+import { EducationEditor } from './EducationEditor'
import { ExperienceEditor } from './ExperienceEditor'
import { ProfileCollectionEmpty, ProfileCollectionSection } from './ProfileCollectionSection'
import { ProfileEntryCard } from './ProfileEntryCard'
@@ -244,6 +249,108 @@ export function ProfessionalLinksSection() {
)
}
+export function EducationSection() {
+ const state = useProfileSectionState('startDate,desc')
+ const query = useEducation(state.query)
+ const mutations = useEducationMutations()
+ const { notify } = useNotifications()
+ const [editing, setEditing] = useState(null)
+ const [deleting, setDeleting] = useState(null)
+ const pending =
+ mutations.create.isPending || mutations.update.isPending || mutations.remove.isPending
+ const save = async (values: EducationRequest) => {
+ const item =
+ editing === 'new'
+ ? await mutations.create.mutateAsync(values)
+ : await mutations.update.mutateAsync({ id: editing!.id, version: editing!.version, values })
+ notify({
+ tone: 'success',
+ title: editing === 'new' ? 'Education added' : 'Education updated',
+ message: `${item.degree} was saved.`,
+ })
+ setEditing(null)
+ }
+ const remove = async () => {
+ if (!deleting) return
+ try {
+ await mutations.remove.mutateAsync({ id: deleting.id, version: deleting.version })
+ afterDelete(query.data?.items ?? [], state.page, state.setPage)
+ setDeleting(null)
+ notify({ tone: 'success', title: 'Education deleted', message: 'The entry was removed.' })
+ } catch (error) {
+ notifyFailure(notify, error, 'Unable to delete Education entry')
+ }
+ }
+ const items = query.data?.items ?? []
+ return (
+ <>
+ setEditing('new')}
+ onPageChange={state.setPage}
+ onRetry={() => void query.refetch()}
+ onSearchChange={state.setSearch}
+ page={query.data?.page}
+ savedTitle="Saved Education"
+ search={state.search}
+ searchLabel="Search education entries"
+ title="Education"
+ >
+ {items.length === 0 ? (
+ setEditing('new')} search={state.search} title="Education" />
+ ) : (
+
+ {items.map((item) => (
+
setDeleting(item)}
+ onEdit={() => setEditing(item)}
+ />
+ }
+ cvInclude={item.cvInclude}
+ key={item.id}
+ subtitle={`${item.institution}${item.location ? ` · ${item.location}` : ''}${item.startDate ? ` · ${item.startDate} – ${item.current ? 'Present' : item.endDate ?? ''}` : ''}`}
+ title={item.degree}
+ >
+ {item.resultNote ? {item.resultNote}
: null}
+
+ ))}
+
+ {editing ? (
+ setEditing(null)}
+ title={editing === 'new' ? 'Add Education' : 'Edit Education'}
+ >
+ setEditing(null)}
+ onSubmit={save}
+ />
+
+ ) : null}
+ {deleting ? (
+ setDeleting(null)}
+ onConfirm={() => void remove()}
+ />
+ ) : null}
+
+ )
+}
+
export function CertificatesSection({ evidencePolicy }: { evidencePolicy?: FileUploadConstraint }) {
const state = useProfileSectionState('issueDate,desc')
const query = useCertificates(state.query)
diff --git a/src/features/student-profile/hooks/useProfileEntries.ts b/src/features/student-profile/hooks/useProfileEntries.ts
index 08395d4..abe0f77 100644
--- a/src/features/student-profile/hooks/useProfileEntries.ts
+++ b/src/features/student-profile/hooks/useProfileEntries.ts
@@ -4,6 +4,7 @@ import {
awardsApi,
certificatesApi,
contactLinksApi,
+ educationApi,
experienceApi,
} from '../api/studentProfileEntriesApi'
import type {
@@ -15,6 +16,8 @@ import type {
CertificateRequest,
ContactLink,
ContactLinkRequest,
+ Education,
+ EducationRequest,
Experience,
ExperienceRequest,
PagedResponse,
@@ -68,6 +71,8 @@ function useCollectionMutations(
export const useContactLinks = (query: ProfileCollectionQuery) =>
useCollection('contact-links', contactLinksApi, query)
+export const useEducation = (query: ProfileCollectionQuery) =>
+ useCollection('education', educationApi, query)
export const useCertificates = (query: ProfileCollectionQuery) =>
useCollection('certificates', certificatesApi, query)
export const useAwards = (query: ProfileCollectionQuery) =>
@@ -78,6 +83,8 @@ export const useExperience = (query: ProfileCollectionQuery) =>
useCollection('experience', experienceApi, query)
export const useContactLinkMutations = () =>
useCollectionMutations('contact-links', contactLinksApi)
+export const useEducationMutations = () =>
+ useCollectionMutations('education', educationApi)
export const useCertificateMutations = () =>
useCollectionMutations('certificates', certificatesApi)
export const useAwardMutations = () =>
diff --git a/src/features/student-profile/mappers/profileEntryMappers.ts b/src/features/student-profile/mappers/profileEntryMappers.ts
index 7113db8..b37b642 100644
--- a/src/features/student-profile/mappers/profileEntryMappers.ts
+++ b/src/features/student-profile/mappers/profileEntryMappers.ts
@@ -7,11 +7,26 @@ import type {
CertificateRequest,
ContactLinkFormValues,
ContactLinkRequest,
+ EducationFormValues,
+ EducationRequest,
ExperienceFormValues,
ExperienceRequest,
} from '../types/profileEntryTypes'
const nullable = (value: string) => value.trim() || null
+const nullableMonth = (value: string) => (value.trim() ? `${value.trim()}-01` : null)
+
+export const mapEducationRequest = (value: EducationFormValues): EducationRequest => ({
+ degree: value.degree.trim(),
+ institution: value.institution.trim(),
+ institutionUrl: nullable(value.institutionUrl),
+ location: nullable(value.location),
+ startDate: nullableMonth(value.startDate),
+ endDate: value.current ? null : nullableMonth(value.endDate),
+ current: value.current,
+ resultNote: nullable(value.resultNote),
+ cvInclude: value.cvInclude,
+})
export const mapContactLinkRequest = (value: ContactLinkFormValues): ContactLinkRequest => ({
label: value.label.trim(),
diff --git a/src/features/student-profile/pages/StudentProfilePage.tsx b/src/features/student-profile/pages/StudentProfilePage.tsx
index bc52939..1ba461b 100644
--- a/src/features/student-profile/pages/StudentProfilePage.tsx
+++ b/src/features/student-profile/pages/StudentProfilePage.tsx
@@ -8,6 +8,7 @@ import {
ActivitiesSection,
AwardsSection,
CertificatesSection,
+ EducationSection,
ExperienceSection,
ProfessionalLinksSection,
} from '../components/ProfileSections'
@@ -73,6 +74,7 @@ export function StudentProfilePage() {
+>({
+ path: `${apiBase}/me/profile/education`,
+ get: () => state.education,
+ set: (items) => {
+ state.education = items
+ },
+ searchable: (item) => `${item.degree} ${item.institution}`,
+ build: (body, previous) => ({
+ degree: body.degree ?? previous!.degree,
+ institution: body.institution ?? previous!.institution,
+ institutionUrl: body.institutionUrl ?? null,
+ location: body.location ?? null,
+ startDate: body.startDate ?? null,
+ endDate: body.current ? null : (body.endDate ?? null),
+ current: body.current ?? previous?.current ?? false,
+ resultNote: body.resultNote ?? null,
+ cvInclude: body.cvInclude ?? previous?.cvInclude ?? true,
+ }),
+})
const certificateHandlers = collectionHandlers<
Certificate,
CertificateRequest & Record
@@ -467,6 +506,7 @@ export const studentHandlers = [
return HttpResponse.json(state.profile)
}),
...contactHandlers,
+ ...educationHandlers,
...certificateHandlers,
http.put(`${apiBase}/me/profile/certificates/:id/evidence`, async ({ params, request }) => {
const index = state.certificates.findIndex((item) => item.id === params.id)
diff --git a/src/shared/components/forms/PasswordInput.tsx b/src/shared/components/forms/PasswordInput.tsx
new file mode 100644
index 0000000..42ea1bb
--- /dev/null
+++ b/src/shared/components/forms/PasswordInput.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, useId, useState } from 'react'
+import { TextInput, type TextInputProps } from './TextInput'
+
+export const PasswordInput = forwardRef(function PasswordInput(
+ { id, ...props },
+ ref,
+) {
+ const [visible, setVisible] = useState(false)
+ const generatedId = useId()
+ const inputId = id ?? generatedId
+
+ return (
+
+ setVisible((current) => !current)}
+ type="button"
+ >
+
+ {visible ? 'visibility_off' : 'visibility'}
+
+
+
+ )
+})
diff --git a/src/shared/components/overlays/LogoutConfirmDialog.tsx b/src/shared/components/overlays/LogoutConfirmDialog.tsx
new file mode 100644
index 0000000..db945bd
--- /dev/null
+++ b/src/shared/components/overlays/LogoutConfirmDialog.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { Button } from '../ui/Button'
+import { ConfirmDialog } from './ConfirmDialog'
+
+export function LogoutConfirmDialog({
+ onClose,
+ onConfirm,
+}: {
+ onClose: () => void
+ onConfirm: () => Promise
+}) {
+ const [isPending, setIsPending] = useState(false)
+
+ const confirm = async () => {
+ setIsPending(true)
+ try {
+ await onConfirm()
+ } finally {
+ setIsPending(false)
+ }
+ }
+
+ return (
+
+ Are you sure you want to log out?
+
+
+ Cancel
+
+ void confirm()}>
+ Log Out
+
+
+
+ )
+}
diff --git a/src/shared/skeletons/GatewaySkeleton.tsx b/src/shared/skeletons/GatewaySkeleton.tsx
index db21ae7..1ce38cd 100644
--- a/src/shared/skeletons/GatewaySkeleton.tsx
+++ b/src/shared/skeletons/GatewaySkeleton.tsx
@@ -3,10 +3,7 @@ import { SkeletonStatusRegion } from './SkeletonPrimitives'
export function GatewaySkeleton() {
return (
-
-
-
-
)
}
diff --git a/src/styles/skeleton-system.css b/src/styles/skeleton-system.css
index f9f16d3..0f6cd38 100644
--- a/src/styles/skeleton-system.css
+++ b/src/styles/skeleton-system.css
@@ -99,11 +99,13 @@
.loading-boundary {
display: grid;
+ min-width: 0;
}
.loading-boundary__skeleton,
.loading-boundary__content {
grid-area: 1 / 1;
+ min-width: 0;
}
.loading-boundary__skeleton {
diff --git a/src/styles/sprint78-wireframe-alignment.css b/src/styles/sprint78-wireframe-alignment.css
index 668a2d6..eeda023 100644
--- a/src/styles/sprint78-wireframe-alignment.css
+++ b/src/styles/sprint78-wireframe-alignment.css
@@ -1639,6 +1639,7 @@
}
.registered-students-page .registered-students-controls {
+ min-width: 0;
grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 0.65fr);
}
diff --git a/src/test/setupTests.ts b/src/test/setupTests.ts
index 0a6b71b..9a78e8d 100644
--- a/src/test/setupTests.ts
+++ b/src/test/setupTests.ts
@@ -12,6 +12,12 @@ import { resetSprint78Mocks } from '../mocks/handlers/sprint78Handlers'
beforeAll(() => {
server.listen({ onUnhandledRequest: 'error' })
+ if (typeof window !== 'undefined' && window.HTMLMediaElement) {
+ window.HTMLMediaElement.prototype.play = async () => undefined
+ window.HTMLMediaElement.prototype.pause = () => {}
+ window.HTMLMediaElement.prototype.load = () => {}
+ }
+
// MSW/Undici strict AbortSignal checking throws TypeError when receiving JSDOM's AbortSignal.
// We strip the signal from the test fetch wrapper AFTER MSW has patched fetch.
// This makes our wrapper the outermost layer, allowing MSW interception to succeed,
.png)
- 