Project Overview
This area covers 38 features. Watch the walkthrough, then use the reference below — each feature links to the exact moment it appears (▶).
Who this is for: Project manager / owner (oversight). Each feature below lists the role/permission it requires.
Features
Display project name and metadata ▶ 00:00
As a project manager, I want to see the project name, language pair (source → target), and file count at a glance, so that I can quickly identify which project I'm looking at
How it works. The overview page header displays h1 with project name, language pair (e.g. 'Greek → Bambara'), and count of files in the project. All three pieces of information are visible on page load.
Key files
src/components/org/ProjectOverview.tsx:366src/components/org/ProjectOverview.tsx:382-385
Display project status chip ▶ 00:00
As a project manager, I want to see at-a-glance project status (On track / Due soon / Overdue) based on deadline, so that I can prioritize which projects need attention
How it works. A colored badge appears next to the project title showing 'On track' (green, deadline > 7 days), 'Due soon' (amber, deadline 0-7 days), or 'Overdue' (red, deadline in past). No badge appears if no deadline is set (no-deadline state).
Key files
src/components/org/ProjectOverview.tsx:38-49src/components/org/ProjectOverview.tsx:51-64src/components/org/ProjectOverview.tsx:264src/components/org/ProjectOverview.tsx:368
Display archived badge ▶ 00:00
As a project manager, I want to see immediately if a project is archived, so that I know it is not currently active
How it works. A secondary 'Archived' badge appears next to the project name when the project has a deletedAt timestamp (isArchived = Boolean(project?.deletedAt))
Key files
src/components/org/ProjectOverview.tsx:248src/components/org/ProjectOverview.tsx:369-371
Display inactive badge ▶ 00:00
As a project manager, I want to see when a project is marked as inactive/frozen, so that I know it cannot be edited
How it works. An amber 'Inactive' badge appears next to the project name when the project is frozen (!isFrozen = false in useProjectLifecycle). Only renders when project is not archived.
Key files
src/components/org/ProjectOverview.tsx:250-254src/components/org/ProjectOverview.tsx:372-379
Open project button ▶ 00:01
As a translator, I want to open the project editor workspace from the overview, so that I can start translating
How it works. A primary 'Open project' button navigates to /project/:id when clicked. Button is always visible in the header.
Key files
src/components/org/ProjectOverview.tsx:388-393
Restore archived project ▶ 00:00
As a project owner, I want to restore an archived project, so that I can resume work on it
How it works. When project is archived and caller is owner, a 'Restore' button appears. Clicking it calls unarchiveProjectRemote(), then refresh(). On success, the button disappears and project is restored. On error (e.g. forbidden), an error message is displayed.
Key files
src/components/org/ProjectOverview.tsx:244src/components/org/ProjectOverview.tsx:320-333src/components/org/ProjectOverview.tsx:394-402
Download deliverable ▶ 00:00
As a project manager, I want to download a bundle of the translated project files, so that I can share the deliverable with stakeholders
How it works. An overflow menu item 'Download deliverable' is available to maintainers+. It is disabled when the project has no files. Clicking triggers downloadProjectBundle(), which downloads a zip archive. On error, an error message is displayed.
Key files
src/components/org/ProjectOverview.tsx:245src/components/org/ProjectOverview.tsx:287-303src/components/org/ProjectOverview.tsx:406-412
Toggle project lifecycle (Mark as Active / Inactive) ▶ 00:00
As a project manager, I want to freeze a project to prevent edits, or reactivate it later, so that I can control when work is allowed
How it works. An overflow menu item 'Mark as Inactive' (or 'Mark as Active' if already inactive) is available to project_lead+. Clicking toggles isFrozen state via useProjectLifecycle.toggle(jwt). The button shows 'Reactivating…' while busy. On success, the page refreshes to reflect the new lifecycle state.
Key files
src/components/org/ProjectOverview.tsx:247src/components/org/ProjectOverview.tsx:250-254src/components/org/ProjectOverview.tsx:256-262src/components/org/ProjectOverview.tsx:414-421
Archive project ▶ 00:00
As a project owner, I want to archive a project to move it to trash, so that I can clean up completed or cancelled projects
How it works. An overflow menu item 'Archive' (danger/destructive styling) is available only to owners. Clicking calls archiveProjectRemote(id, jwt). On success, navigates to /projects (active list). On forbidden, shows error message. On error, shows error message.
Key files
src/components/org/ProjectOverview.tsx:244src/components/org/ProjectOverview.tsx:305-318src/components/org/ProjectOverview.tsx:422-430
Display inactive project banner ▶ 00:00
As a project member, I want to see a prominent warning that the project is frozen, so that I understand why I cannot edit
How it works. When a project is frozen (isFrozen=true from useProjectLifecycle), a full-width amber banner appears at the top of the page with an alert icon and message: '[ProjectName] is inactive — it cannot be edited until reactivated.' Project managers see a 'Reactivate' button; non-managers see read-only message.
Key files
src/components/org/ProjectOverview.tsx:348-355src/components/InactiveProjectBanner.tsx:51-83
Display progress section header ▶ 00:06
As a project manager, I want to see a 'Progress' section, so that I can monitor translation completion
How it works. A 'Progress' card header with uppercase text 'Progress' is displayed when the project has cells (audio.totalCells > 0). The card is hidden for empty projects.
Key files
src/components/org/ProjectOverview.tsx:440-442
Display translation progress percentage ▶ 00:06
As a project manager, I want to see what percentage of cells have been translated, so that I can assess project progress
How it works. A stat tile labeled 'Translated' displays the rounded percentage (Math.round(pct * 100))% in amber text. The percentage is calculated via translatedPct(audio) (filledCells / totalCells).
Key files
src/components/org/ProjectOverview.tsx:447-448src/lib/frontier/portfolio.ts:55-61
Display AI-drafted progress percentage ▶ 00:00
As a project manager, I want to track cells that were auto-generated by AI, so that I can distinguish them from human translations
How it works. A stat tile labeled 'AI Drafted' displays the rounded percentage in violet text, with a tooltip explaining: 'Cells drafted by AI (via "Translate all") that have not yet been human-edited or validated. Only shown when audio.aiDraftedCells > 0.'
Key files
src/components/org/ProjectOverview.tsx:449-456
Display validation progress percentage ▶ 00:06
As a project manager, I want to see what percentage of cells have been validated, so that I can assess review completion
How it works. A stat tile labeled 'Validated' displays the rounded percentage in emerald text. Calculated via validatedPct(audio) (validatedCells / totalCells).
Key files
src/components/org/ProjectOverview.tsx:457src/lib/frontier/portfolio.ts:50-54
Display audio progress percentage ▶ 00:00
As a project manager, I want to see what percentage of cells have audio recordings, so that I can track audio coverage
How it works. A stat tile labeled 'Audio' displays the rounded percentage in sky text. Calculated via audioPct(audio). Only shown when project has audio cells (hasAudio=true).
Key files
src/components/org/ProjectOverview.tsx:460-461src/lib/frontier/portfolio.ts:68-72
Display translation detail bar ▶ 00:00
As a project manager, I want to see the exact count of translated cells vs total, so that I can understand the absolute progress
How it works. A horizontal bar displays 'Translated' label, a filled amber progress bar, and stats showing '{filledCells}/{totalCells} cells'. The percentage fill is calculated as (filledCells / totalCells) * 100.
Key files
src/components/org/ProjectOverview.tsx:470-476src/components/org/ProjectOverview.tsx:92-116
Display AI-drafted detail bar ▶ 00:00
As a project manager, I want to see the exact count of AI-drafted cells, so that I can track the volume of AI suggestions
How it works. A horizontal bar displays 'AI Drafted' label, a filled violet progress bar, and stats showing '{aiDraftedCells}/{totalCells} cells'. Only shown when audio.aiDraftedCells > 0.
Key files
src/components/org/ProjectOverview.tsx:477-484
Display validation detail bar ▶ 00:00
As a project manager, I want to see the exact count of validated cells vs total, so that I can understand validation coverage
How it works. A horizontal bar displays 'Validated' label, a filled emerald progress bar, and stats showing '{validatedCells}/{totalCells} cells'.
Key files
src/components/org/ProjectOverview.tsx:486-492
Display audio detail bar ▶ 00:00
As a project manager, I want to see the exact count of cells with audio vs total, so that I can understand audio coverage
How it works. A horizontal bar displays 'Audio' label, a filled sky progress bar, and stats showing '{audioCells}/{totalCells} cells'. Only shown when audio cells exist (showAudio=true).
Key files
src/components/org/ProjectOverview.tsx:497-503
Display audio recording duration ▶ 00:00
As a project manager, I want to know how many minutes of audio have been recorded, so that I can assess audio volume
How it works. A small text line shows '{recordedMinutes(audio)} min recorded · {percentage}% of cells have audio' when audio.recordedMs > 0.
Key files
src/components/org/ProjectOverview.tsx:508-513
Display per-file progress list ▶ 00:00
As a project manager, I want to see progress by file, so that I can identify which files need attention
How it works. A card titled 'Files (top N of M)' lists files sorted by cell count (largest first). Each row shows file name, dual mini-bars (amber for translated, emerald for validated), and stats '{filledCount}/{approvedCount}/{cellCount} · {wordCount}w'. If more than FILE_ROW_CAP (12) files exist, a '+N more files' button expands the full list.
Key files
src/components/org/ProjectOverview.tsx:518-574src/components/org/ProjectOverview.tsx:24
Expand / collapse per-file list ▶ 00:00
As a project manager, I want to toggle between viewing top files and all files, so that I can manage the view size
How it works. When files exceed FILE_ROW_CAP (12), a 'Show all' button appears. Clicking toggles showAllFiles state, expanding the list or collapsing back to top 12. Button text changes to 'Show fewer'.
Key files
src/components/org/ProjectOverview.tsx:556-572src/components/org/ProjectOverview.tsx:199
Display deadline card ▶ 00:00
As a project manager, I want to see and manage the project deadline, so that I can track and communicate the due date
How it works. A 'Deadline' card displays the current deadline date (if set) with a status badge (On track / Due soon / Overdue). If no deadline, 'No deadline set' is shown. Managers can 'Set deadline', 'Change', or 'Clear' the deadline.
Key files
src/components/org/ProjectOverview.tsx:577-636
Set project deadline ▶ 00:00
As a project manager, I want to set a deadline for the project, so that I can establish a target completion date
How it works. Clicking 'Set deadline' opens a date input (aria-label='Project deadline'). User selects a date and clicks 'Save'. The function saveDeadline(value) calls setProjectDeadline(jwt, id, value), then refreshes the overview. On error, an error message appears.
Key files
src/components/org/ProjectOverview.tsx:272-285src/components/org/ProjectOverview.tsx:614-622
Change project deadline ▶ 00:00
As a project manager, I want to update an existing deadline, so that I can adjust the target completion date
How it works. When a deadline is already set, a 'Change' button appears. Clicking opens the date input pre-filled with the current deadline. User edits and saves via the same Save/Cancel flow.
Key files
src/components/org/ProjectOverview.tsx:616-622
Clear project deadline ▶ 00:00
As a project manager, I want to remove a deadline, so that I can indicate the project has no fixed due date
How it works. When a deadline is set, a 'Clear' button appears. Clicking calls saveDeadline(null), which persists a null deadline. The overview then shows 'No deadline set' again.
Key files
src/components/org/ProjectOverview.tsx:623-631
Display deadline status badge ▶ 00:00
As a project manager, I want to quickly see the deadline status, so that I know if the project is on track, due soon, or overdue
How it works. Next to the deadline date, a DeadlineChip badge displays 'On track' (green), 'Due soon' (amber), or 'Overdue' (red) based on deadlineStatus(audio, now). Badge is hidden if no deadline (dstatus=null).
Key files
src/components/org/ProjectOverview.tsx:263src/components/org/ProjectOverview.tsx:68-76src/components/org/ProjectOverview.tsx:605-610
Display team workload card ▶ 00:00
As a project manager, I want to see each team member's workload, so that I can understand who is doing what and track progress
How it works. A 'Team' card displays a list of members with open assignments, showing: username, a progress bar (blue fill), and '{openAssignments} open · {donePct}%'. If no assignments exist, 'No open assignments in this project yet.' is shown.
Key files
src/components/org/ProjectOverview.tsx:638-678
Assign work to team member ▶ 00:00
As a project manager, I want to assign specific files or chapters to a team member, so that I can distribute work and track individual progress
How it works. An 'Assign…' button (collapsed) in the Team card opens an inline form (role='group' aria-label='Assign work') when clicked. The form shows: Assignee select, Book (file) select, Chapter select (optional, defaults to 'Whole book'), Deadline input (optional), Assign and Cancel buttons. Clicking Assign calls createAssignment(), shows success message, then collapses the form. Cancel collapses without saving.
Key files
src/components/org/ProjectOverview.tsx:666-677src/components/org/AssignWork.tsx:32-199
Display members card ▶ 00:00
As a project manager, I want to manage project members from the overview, so that I don't need to navigate to a separate members page
How it works. A 'Members' card (FRO-335) renders the MembersTab component, showing current members, role management, add member form, and revoke all options. The card only renders when caller is canManage and project is not archived.
Key files
src/components/org/ProjectOverview.tsx:683-688
Add project member ▶ 00:00
As a project manager, I want to add a new member to the project, so that they can access and contribute to the translation
How it works. In the Members card, an 'Add member' section shows a username input, a role select, and an 'Add' button. User types a username, selects a role, and clicks Add. The function calls add(username, role) via useProjectMembers hook. On success, the member appears in the list. On error, an error message is shown. The button is disabled during submission.
Key files
src/components/ProjectMembersPage.tsx:325-378
Change project member role ▶ 00:00
As a project manager, I want to change a team member's role, so that I can adjust their permission level
How it works. Next to each member's name in the Members card, a role select dropdown allows changing roles. Clicking a new role calls add(username, newRole), which updates the member's access level. Only direct grants (not org members or creators) can be changed. The select is disabled while saving.
Key files
src/components/ProjectMembersPage.tsx:252-283
Remove project member (direct grant) ▶ 00:00
As a project manager, I want to remove a directly-added member from the project, so that they no longer have access
How it works. Next to directly-granted members (role.source === 'override'), a 'Remove' button appears. Clicking calls remove(userId) via useProjectMembers hook, which removes the member from the project. The member disappears from the list on success.
Key files
src/components/ProjectMembersPage.tsx:286-295
Revoke all member access ▶ 00:00
As a project manager, I want to completely revoke a member's access to a project across all grant paths, so that I can ensure they cannot access the project
How it works. A 'Revoke all' button (destructive red styling) appears for each member. Clicking opens a confirmation dialog listing all grant paths (org, team, direct) that give the member access. User must confirm to proceed. Clicking Revoke calls revokeAllProjectAccess(), which removes access across all paths. On success, the dialog closes and the member list refreshes.
Key files
src/components/ProjectMembersPage.tsx:304-316src/components/ProjectMembersPage.tsx:381-391
Display project state error ▶ 00:00
As a project manager, I want to see error messages when operations fail, so that I understand what went wrong
How it works. When an error occurs during archive, restore, deadline save, or download operations, a red error message is displayed below the header. Errors are cleared when operations start.
Key files
src/components/org/ProjectOverview.tsx:194src/components/org/ProjectOverview.tsx:436
Loading state for operations ▶ 00:00
As a project manager, I want to see visual feedback during long-running operations, so that I know the app is processing my request
How it works. During archive, restore, download, deadline save, or lifecycle toggle operations, affected buttons show disabled state (opacity-50) and (for lifecycle) text changes to 'Reactivating…'. The busy flag prevents duplicate submissions.
Key files
src/components/org/ProjectOverview.tsx:193-194src/components/org/ProjectOverview.tsx:250-254
Responsive file list scrolling ▶ 00:00
As a project manager on a mobile device, I want the file list to scroll horizontally, so that I can see all file stat columns
How it works. When the files card is displayed with many columns (name, bars, stats), the page allows horizontal scrolling to view all columns. The overflow is managed via CSS overflow classes.
Key files
src/components/org/ProjectOverview.tsx:537-554
Role-based feature visibility ▶ 00:00
As a collaborator, I want to see only the actions I have permission to perform, so that the UI is not cluttered with unavailable actions
How it works. UI elements are conditionally rendered based on role: canManage (maintainer+) sees deadline actions and download; canAssign (project_lead+) sees assign form; canToggleLifecycle (project_lead+) sees lifecycle toggle; isOwner (owner+) sees archive and restore buttons.
Key files
src/components/org/ProjectOverview.tsx:244-247src/components/org/ProjectOverview.tsx:404-432