Feature: Display Case Requirement Pills on Case Card and Details View

Description

Parents can now select specific tags, target schools, and minimum grade requirements when posting a case. To allow tutors to quickly scan and determine if they are qualified, these selections must be displayed as visual "Pills" (or badges) on both the compact Case Card (in the marketplace list) and the full Case Details page.

Acceptance Criteria

• Implement a reusable UI pill component with properties for text, icon, and background color.
• Render the most critical requirement pills on the compact Case Card (Marketplace view) with a limit (e.g., max 3 pills) and an overflow indicator (e.g., "+2 more").
• Render all selected pills on the Case Details page, grouped by category.
• Apply a consistent color-coding system so tutors can instantly recognize the type of requirement (e.g., Strict Grade vs. Teaching Style).
• Add a visual indicator (e.g., a "verified" shield icon) to the grade pill if the parent toggled "Only accept tutors with verified academic transcripts."

UI/UX Specifications: Pill Color-Coding & Mapping

To make the UI scannable, pills should be color-coded based on the data category.

1. Hard Requirements (Color: Red / Alert)

These are strict filters tutors must meet before applying.

• Minimum Grade: 🎯 DSE 5** Only / 🎯 IB Level 7
• Verification: 🛡️ Verified Transcripts Only (Appears if the verification toggle is checked)

2. Educational Background (Color: Gold / Premium Brand Color)

Specific schools or elite credentials requested by the parent.

• Target University: 🎓 HKU / 🎓 Oxbridge
• Target Secondary School: 🏫 St. Stephen's College / 🏫 ESF
• Tutor Credential: ⭐ Official Examiner / ⭐ Top Scorer

3. Curriculum & Subject Focus (Color: Blue / Primary)

The specific syllabus the tutor needs to be familiar with.

• Curriculum: 📚 IBDP / 📚 HKDSE / 📚 IGCSE
• Coursework: 📝 IA / EE / TOK / 📝 SBA

4. Teaching Goals & Perks (Color: Gray or Green / Neutral)

Soft requirements and expectations for the lessons.

• Goal: 📈 Aim for Top Grades (拔尖) / 🛠️ Foundational Support (補底)
• Materials: 🖨️ Provides Past Papers / 📓 Custom Notes
• Support: 📱 WhatsApp Q&A

View Implementation Logic

View 1: Marketplace Case Card (Compact List View)

Due to limited space on the preview card, prioritize the most restrictive pills.

• Layout: Display below the subject/budget/location row.
• Display Logic: Show a maximum of 3 to 4 pills.
• Priority Order:
  1. Grade Requirement
  2. Target University / Target Secondary School
  3. Curriculum Specialty
• Overflow: If there are more tags, display a neutral pill reading +X more requirements.

View 2: Case Details (Expanded View)

When a tutor clicks into the case to view the full details, display everything the parent requested cleanly categorized.

• Section Header: "Parent's Special Requirements (家長特殊要求)"
• Layout: Display all pills in a wrapping flex-box container. Group them by category (e.g., row 1: Background & Grades, row 2: Teaching Style & Materials) or use small subheadings above the pill clusters if there are more than 5 tags.