Feature/enhancement

src/app/config/routePaths.ts

@@ -24,6 +24,7 @@ export const routePaths = {
   adminInternships: '/admin/internships',
   adminCandidateFiltering: '/admin/candidate-filtering',
   adminShortlists: '/admin/shortlists',
+  adminEligibleStudents: '/admin/eligible-students',
   unauthorized: '/unauthorized',
 } as const
 

src/app/layouts/AdminLayout.test.tsx

@@ -121,6 +121,9 @@ describe('AdminLayout', () => {
     expect(screen.getAllByRole('button', { name: /switch to dark mode/i })).toHaveLength(1)
 
     await user.click(screen.getByRole('button', { name: 'Log Out' }))
+    const logoutDialog = await screen.findByRole('dialog', { name: 'Log Out' })
+    expect(logout).not.toHaveBeenCalled()
+    await user.click(within(logoutDialog).getByRole('button', { name: 'Log Out' }))
     expect(logout).toHaveBeenCalledOnce()
   })
 

src/app/layouts/AdminLayout.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useLocation, useOutlet } from 'react-router-dom'
+import { LogoutConfirmDialog } from '../../shared/components/overlays/LogoutConfirmDialog'
 import { ThemeToggle } from '../../shared/components/ui/ThemeToggle'
 import { useAuth } from '../../shared/hooks/useAuth'
 import { AdminSidebar } from './admin/AdminSidebar'
@@ -20,6 +21,7 @@ export function AdminLayout() {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
   const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false)
   const [isMobileViewport, setIsMobileViewport] = useState(isMobileViewportNow)
+  const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false)
   const menuButtonRef = useRef<HTMLButtonElement | null>(null)
   const sidebarRef = useRef<HTMLElement | null>(null)
   const firstNavigationItemRef = useRef<HTMLAnchorElement | null>(null)
@@ -105,7 +107,7 @@ export function AdminLayout() {
         isMobileViewport={isMobileViewport}
         navigationItems={adminNavigation}
         onCloseMobile={closeMobileDrawer}
-        onLogout={() => void auth.logout()}
+        onLogout={() => setIsLogoutConfirmOpen(true)}
         onToggleCollapsed={() => setIsSidebarCollapsed((current) => !current)}
         sidebarRef={sidebarRef}
       />
@@ -153,6 +155,16 @@ export function AdminLayout() {
           </div>
         </div>
       </div>
+
+      {isLogoutConfirmOpen ? (
+        <LogoutConfirmDialog
+          onClose={() => setIsLogoutConfirmOpen(false)}
+          onConfirm={async () => {
+            await auth.logout()
+            setIsLogoutConfirmOpen(false)
+          }}
+        />
+      ) : null}
     </section>
   )
 }

src/app/layouts/StudentLayout.test.tsx

@@ -132,6 +132,9 @@ describe('StudentLayout', () => {
     expect(drawerCloseButton).toHaveFocus()
 
     await user.click(screen.getByRole('button', { name: 'Log Out' }))
+    const logoutDialog = await screen.findByRole('dialog', { name: 'Log Out' })
+    expect(logout).not.toHaveBeenCalled()
+    await user.click(within(logoutDialog).getByRole('button', { name: 'Log Out' }))
     expect(logout).toHaveBeenCalledOnce()
 
     await user.keyboard('{Escape}')

src/app/layouts/StudentLayout.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useLocation, useOutlet } from 'react-router-dom'
+import { LogoutConfirmDialog } from '../../shared/components/overlays/LogoutConfirmDialog'
 import { ThemeToggle } from '../../shared/components/ui/ThemeToggle'
 import { useAuth } from '../../shared/hooks/useAuth'
 import { StudentSidebar } from './student/StudentSidebar'
@@ -23,6 +24,7 @@ export function StudentLayout() {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
   const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false)
   const [isMobileViewport, setIsMobileViewport] = useState(isMobileViewportNow)
+  const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false)
   const menuButtonRef = useRef<HTMLButtonElement | null>(null)
   const sidebarRef = useRef<HTMLElement | null>(null)
   const firstNavigationItemRef = useRef<HTMLAnchorElement | null>(null)
@@ -136,7 +138,7 @@ export function StudentLayout() {
         isMobileViewport={isMobileViewport}
         navigationItems={studentNavigation}
         onCloseMobile={closeMobileDrawer}
-        onLogout={() => void auth.logout()}
+        onLogout={() => setIsLogoutConfirmOpen(true)}
         onToggleCollapsed={() => setIsSidebarCollapsed((current) => !current)}
         sidebarRef={sidebarRef}
         studentName={studentName}
@@ -185,6 +187,16 @@ export function StudentLayout() {
           </div>
         </div>
       </div>
+
+      {isLogoutConfirmOpen ? (
+        <LogoutConfirmDialog
+          onClose={() => setIsLogoutConfirmOpen(false)}
+          onConfirm={async () => {
+            await auth.logout()
+            setIsLogoutConfirmOpen(false)
+          }}
+        />
+      ) : null}
     </section>
   )
 }

src/app/layouts/admin/adminNavigation.ts

@@ -17,4 +17,5 @@ export const adminNavigation: readonly AdminNavigationItem[] = [
     icon: 'filter_alt',
   },
   { label: 'Shortlists', route: routePaths.adminShortlists, icon: 'assignment_turned_in' },
+  { label: 'Eligible Students', route: routePaths.adminEligibleStudents, icon: 'how_to_reg' },
 ]

src/app/router/lazyRoutes.ts

@@ -122,3 +122,9 @@ export const ShortlistsPage = lazy(() =>
     default: module.ShortlistsPage,
   })),
 )
+
+export const EligibleStudentsPage = lazy(() =>
+  import('../../features/eligible-students/pages/EligibleStudentsPage').then((module) => ({
+    default: module.EligibleStudentsPage,
+  })),
+)

src/app/router/routes.tsx

@@ -25,6 +25,7 @@ import {
   InternshipManagementPage,
   CandidateFilteringPage,
   ShortlistsPage,
+  EligibleStudentsPage,
   AdminForgotPasswordPage,
   AdminLoginPage,
   AdminVerifyResetOtpPage,
@@ -270,6 +271,10 @@ export const routes: RouteObject[] = [
             path: routePaths.adminShortlists,
             element: withSuspense(<ShortlistsPage />, <ShortlistExportSkeleton />),
           },
+          {
+            path: routePaths.adminEligibleStudents,
+            element: withSuspense(<EligibleStudentsPage />),
+          },
         ],
       },
       ...fallbackRoutes,

src/features/academic-ledger/api/academicLedgerApi.ts

@@ -85,4 +85,10 @@ export const academicLedgerApi = {
     )
     return ledgerCommitResponseSchema.parse(response)
   },
+
+  async remove(uploadId: string) {
+    await httpClient<void>(`/admin/academic-ledger/uploads/${encodeURIComponent(uploadId)}`, {
+      method: 'DELETE',
+    })
+  },
 }

src/features/academic-ledger/components/LedgerUploadPanel.tsx

@@ -43,7 +43,7 @@ export function LedgerUploadPanel({
     const parsed = academicLedgerFileSchema.safeParse(nextFile)
     if (!parsed.success) {
       setFile(null)
-      setValidationMessage(parsed.error.issues[0]?.message ?? 'Choose a valid CSV file.')
+      setValidationMessage(parsed.error.issues[0]?.message ?? 'Choose a valid CSV or Excel file.')
       if (inputRef.current) inputRef.current.value = ''
       return
     }
@@ -68,20 +68,17 @@ export function LedgerUploadPanel({
   return (
     <section aria-labelledby="ledger-upload-title" className="section-card ledger-upload-panel">
       <div className="ledger-upload-heading">
-        <h2 id="ledger-upload-title">Upload academic records here.</h2>
-        <p>
-          Select one official UTF-8 CSV ledger file. The file is parsed, staged, and validated
-          before any academic record can be committed.
-        </p>
+        <h2 id="ledger-upload-title">Upload academic records</h2>
+        <p>Upload a CSV or Excel file. It's staged and validated before you commit it.</p>
       </div>
 
       <FileUploadField
-        accept=".csv,text/csv"
+        accept=".csv,text/csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
         aria-describedby={`ledger-file-help${
           validationMessage || requestError ? ' ledger-file-error' : ''
         }`}
         aria-invalid={Boolean(validationMessage || requestError) || undefined}
-        aria-label="Official academic ledger CSV"
+        aria-label="Official academic ledger file"
         className="visually-hidden"
         disabled={isPending}
         id={inputId}
@@ -110,12 +107,12 @@ export function LedgerUploadPanel({
         <span aria-hidden="true" className="material-symbols-outlined ledger-dropzone-icon">
           cloud_upload
         </span>
-        <strong>Drag &amp; drop official transcript file here or click to browse</strong>
-        <span>Supported format: official academic CSV ledger file · Maximum size: 5 MiB</span>
+        <strong>Drag &amp; drop a file here, or click to browse</strong>
+        <span>CSV or Excel (.xlsx) · Max 5 MiB</span>
       </button>
 
       <p className="field-help" id="ledger-file-help">
-        Required headers and row values are validated by the backend before commit.
+        Columns and values are checked automatically before you can commit.
       </p>
 
       {file ? (
@@ -139,11 +136,11 @@ export function LedgerUploadPanel({
 
       <div className="button-row ledger-upload-actions">
         <Button disabled={!file} isLoading={isPending} onClick={() => file && onUpload(file)}>
-          Process and Stage Ledger
+          Upload
         </Button>
         {file ? (
           <Button disabled={isPending} onClick={clearFile} variant="secondary">
-            Clear selected file
+            Clear
           </Button>
         ) : null}
       </div>

src/features/academic-ledger/components/LedgerUploadsTable.tsx

@@ -3,13 +3,17 @@ import { Button } from '../../../shared/components/ui/Button'
 import { StatusBadge } from '../../../shared/components/ui/StatusBadge'
 import { mapUploadStatus, mapValidationStatus } from '../mappers/academicLedgerMappers'
 
+const DELETE_BLOCKED_STATUSES = new Set(['PROCESSING', 'COMMITTING', 'COMMITTED'])
+
 export function LedgerUploadsTable({
   items,
+  onDelete,
   onSelect,
   selectedId,
 }: {
   items: ApiAcademicLedgerUploadSummaryResponse[]
   selectedId: string | null
+  onDelete: (item: ApiAcademicLedgerUploadSummaryResponse) => void
   onSelect: (uploadId: string) => void
 }) {
   return (
@@ -51,14 +55,19 @@ export function LedgerUploadsTable({
                   <StatusBadge tone={validation.tone}>{validation.label}</StatusBadge>
                 </td>
                 <td data-label="Rows">{item.totalRows}</td>
-                <td data-label="Action">
+                <td className="ledger-action-cell" data-label="Action">
                   <Button
                     aria-pressed={selectedId === item.uploadId}
                     onClick={() => onSelect(item.uploadId)}
                     variant="secondary"
                   >
                     Inspect
                   </Button>
+                  {!DELETE_BLOCKED_STATUSES.has(item.uploadStatus) ? (
+                    <Button onClick={() => onDelete(item)} variant="secondary">
+                      Remove
+                    </Button>
+                  ) : null}
                 </td>
               </tr>
             )

src/features/academic-ledger/hooks/useLedgerUpload.ts

@@ -27,7 +27,7 @@
     enabled: Boolean(uploadId),
     queryKey: academicLedgerKeys.upload(uploadId ?? ''),
     queryFn: ({ signal }) => academicLedgerApi.getUpload(uploadId ?? '', signal),
     refetchInterval: (query) => ledgerPollInterval(query.state.data),
     retry: shouldRetryAcademicLedger,
   })
 }
@@ -45,3 +45,13 @@
     },
   })
 }
+
+export function useDeleteLedgerUpload() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (uploadId: string) => academicLedgerApi.remove(uploadId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: academicLedgerKeys.uploads() })
+    },
+  })
+}

src/features/academic-ledger/pages/AcademicLedgerPage.tsx

@@ -1,41 +1,38 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { mapApiError } from '../../../shared/api/apiErrorMapper'
 import { SearchInput } from '../../../shared/components/data/SearchInput'
 import { PaginationBar } from '../../../shared/components/data/PaginationBar'
 import { EmptyState } from '../../../shared/components/feedback/EmptyState'
 import { ErrorState } from '../../../shared/components/feedback/ErrorState'
 import { PageHeader } from '../../../shared/components/layout/PageHeader'
+import { ConfirmDialog } from '../../../shared/components/overlays/ConfirmDialog'
+import { Button } from '../../../shared/components/ui/Button'
 import { LedgerSelectedBatchSkeleton, LedgerUploadsTableSkeleton } from '../../../shared/skeletons'
-import { LedgerAcademicInspection } from '../components/LedgerAcademicInspection'
 import { LedgerCommitControl } from '../components/LedgerCommitControl'
 import { LedgerReviewSection } from '../components/LedgerReviewSection'
 import { LedgerUploadPanel } from '../components/LedgerUploadPanel'
 import { LedgerUploadStatus } from '../components/LedgerUploadStatus'
 import { LedgerUploadsTable } from '../components/LedgerUploadsTable'
 import { useAcademicLedgerUrlState } from '../hooks/useAcademicLedgerUrlState'
-import { useLedgerUploadDetail, useLedgerUploads, useUploadLedger } from '../hooks/useLedgerUpload'
+import {
+  useDeleteLedgerUpload,
+  useLedgerUploadDetail,
+  useLedgerUploads,
+  useUploadLedger,
+} from '../hooks/useLedgerUpload'
+import type { ApiAcademicLedgerUploadSummaryResponse } from '../../../shared/api/generated/cvManagementApi.types'
 
 const pageTitle = 'Academic Ledger Management | CV Management & Filtering System'
-const pageDescription =
-  'Centralized academic data validation repository. Import official undergraduate transcripts ' +
-  'via batch files to evaluate data parameters, review staged records, and protect academic data ' +
-  'from unauthorized modification.'
+const pageDescription = 'Upload official transcripts, review them, and commit academic records.'
 
 export function AcademicLedgerPage() {
-  const {
-    state,
-    rowSearchInput,
-    studentSearchInput,
-    selectUpload,
-    setRowSearchInput,
-    setStudentSearchInput,
-    updateRows,
-    updateStudents,
-    updateUploads,
-  } = useAcademicLedgerUrlState()
+  const { state, rowSearchInput, selectUpload, setRowSearchInput, updateRows, updateUploads } =
+    useAcademicLedgerUrlState()
   const uploads = useLedgerUploads(state.uploads)
   const selected = useLedgerUploadDetail(state.uploadId)
   const upload = useUploadLedger()
+  const deleteUpload = useDeleteLedgerUpload()
+  const [deleting, setDeleting] = useState<ApiAcademicLedgerUploadSummaryResponse | null>(null)
 
   useEffect(() => {
     const previousTitle = document.title
@@ -69,15 +66,8 @@
         }
       />
 
-      <LedgerAcademicInspection
-        onQueryChange={updateStudents}
-        onSearchChange={setStudentSearchInput}
-        query={state.students}
-        searchInput={studentSearchInput}
-      />
-
       {state.uploadId && selected.isPending ? <LedgerSelectedBatchSkeleton /> : null}
       {selected.data ? <LedgerUploadStatus detail={selected.data} /> : null}
       {selected.isError ? (
         <ErrorState
           title="Unable to load selected batch"
@@ -94,7 +84,7 @@
           uploadId={state.uploadId}
         />
       ) : null}
       {selected.data && isReviewable ? <LedgerCommitControl detail={selected.data} /> : null}
 
       <section aria-labelledby="ledger-batches-title" className="section-card ledger-batches-panel">
         <div className="ledger-section-heading">
@@ -146,7 +136,8 @@
         ) : null}
         {uploads.data?.items.length ? (
           <LedgerUploadsTable
             items={uploads.data.items}
+            onDelete={setDeleting}
             selectedId={state.uploadId}
             onSelect={selectUpload}
           />
@@ -170,6 +161,45 @@
           />
         ) : null}
       </section>
+
+      {deleting ? (
+        <ConfirmDialog
+          closeDisabled={deleteUpload.isPending}
+          onClose={() => setDeleting(null)}
+          title="Remove upload"
+        >
+          <p>
+            Remove <strong>{deleting.originalFilename}</strong>? This cannot be undone.
+          </p>
+          {deleteUpload.isError ? (
+            <p className="error-text" role="alert">
+              {mapApiError(deleteUpload.error, 'protected').message}
+            </p>
+          ) : null}
+          <div className="modal-actions">
+            <Button
+              disabled={deleteUpload.isPending}
+              onClick={() => setDeleting(null)}
+              variant="secondary"
+            >
+              Cancel
+            </Button>
+            <Button
+              isLoading={deleteUpload.isPending}
+              onClick={() => {
+                deleteUpload.mutate(deleting.uploadId, {
+                  onSuccess: () => {
+                    if (state.uploadId === deleting.uploadId) selectUpload(null)
+                    setDeleting(null)
+                  },
+                })
+              }}
+            >
+              Remove
+            </Button>
+          </div>
+        </ConfirmDialog>
+      ) : null}
     </main>
   )
 }