Skip to content

Feature: Interns Overlay with Search & Management

🎯 Feature: Refactor Added Interns into Modal-Based Interns Management

Description

Refactor the existing Added Interns section into a compact Interns component that opens a modal or overlay displaying all interns with search and remove functionality. This improves scalability and UX when managing large intern lists.

Important Rules

  • ❌ Do NOT change backend or corpus API logic
  • ❌ Do NOT break existing intern add/remove behavior
  • ❌ Do NOT affect team or verification logic
  • ✅ UI/UX refactor only
  • ✅ Work ONLY in intern-related UI components

Current Problem

  • Added interns are rendered inline
  • With 30–40 interns, the page becomes long and cluttered

Desired UI Behavior

1. Main Page (Collapsed View)

  • Replace inline intern list with a compact component:
    • Label: Interns
    • Display count: Interns (N)
    • Clickable card/button (team-style)
  • No intern list rendered inline

2. Interns Overlay / Modal

  • Opens on clicking Interns component
  • Centered modal or right-side drawer
  • Header:
    • All Interns (N)
    • Close button (✕)

3. Modal Content

  • Search input:
    • Placeholder: Search intern by name or ID…
  • Scrollable intern list
  • Each item shows:
    • Intern name
    • Intern ID
    • Remove (✕ / Delete) button

4. Interaction Rules

  • Case-insensitive real-time filtering
  • Removing an intern:
    • Updates addedInterns
    • Reflects automatically in teams if applicable
  • Modal closes on:
    • Close button
    • Backdrop click
  • Background scrolling disabled when modal is open

5. UX & Styling

  • Modal height capped; internal scroll only
  • Reuse existing card and button styles
  • Mobile-safe layout
  • Empty states:
    • No interns added yet
    • No matching interns found

State Management

showInternsModal: boolean
searchQuery: string
filteredInterns: Array<{ id: string; name: string }>
addedInterns: Array<{ id: string; name: string }>