Web Components

This section details the primary custom components architecture within the apps/web module. We utilize a modular component design aimed at high performance and recruiter accessibility.

Job Management Components

JobDialog

The primary interface for standardizing data entry for new vacancies.

• Dual Mode Support: Intelligently toggles between "Create" and "Edit" modes based on the presence of a job prop.
• Validation: Enforces strict character limits and formats via react-hook-form and zod before committing to the API.
• Array Parsing: Automatically handles the conversion of multi-line strings into strict Array formats for "Requirements" and "Skills" as required by the backend.

JobDetailsDialog

A read-only high-fidelity view of a job's metadata.

• Rich Visualization: Displays full descriptions, requirement lists with checkmark iconography, and tech stack badges.
• Metadata Context: Exposes internal system data such as posting dates and vacancy statuses.
• UX Integration: Triggers both from the "Actions" menu and directly from clicking Job Titles in any list view.

JobList

An exhaustive data table for managing active pipelines.

• Contextual Actions: Integrated dropdown for viewing, editing, or deleting records.
• Dynamic Feedback: Implements IconLoader2 animations during fetch states and "Empty State" UI when no vacancies are found.
• Status Badging: Uses semantic color coding to distinguish "Open" vs "Closed" vacancies.

Applicant & Screening Components

TalentDetailsDialog

An advanced "Drawer-style" interface that visualizes parsed resume data, AI matches, and historical screening metrics for a single applicant.

Leaderboard

The core visualization for AI results. Aggregates "Match Score", "Rank", and "Reasoning" into a high-performance sortable table.

Future Areas to Document:

• Dashboard Layouts
• Reusable Forms
• Shared UI components originating from @repo/ui

(Draft: Documentation will be updated as we make changes to apps/web)