OnboardFlow is a web application built with Next.js designed to simplify and manage the employee onboarding process. It provides a tailored experience for different user roles: new hires (Onboardees), HR personnel, and Managers.

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

Open http://localhost:9002 with your browser to see the result.

The application supports three distinct user roles, each with a specific dashboard and set of functionalities. For demonstration purposes, authentication is mocked, allowing you to easily switch between roles.

• Login: On the homepage, you can select a role (Onboardee, HR, or Manager) and sign in with the default credentials to access a pre-populated dashboard for that role.
• Sign Up: New users can create an account using the "Sign up" link. The form captures the user's name, email, and desired role. Upon creation, the user is automatically logged in.

This dashboard is designed for new employees to track their onboarding progress.

• View Onboarding Journey: A progress bar shows the overall completion percentage of assigned tasks.
• Task List: Displays all assigned tasks in a table.
• Task Management: Onboardees can mark tasks as complete. The status of each task (To Do, In Progress, Done) is clearly visible.
• Task Details: Each task shows a description, an optional deadline, and a clickable link icon if a URL is associated with it.

This dashboard provides managers with the tools to oversee their team's onboarding.

• Team Progress Overview: A bar chart visualizes the onboarding progress for each member of the manager's team.
• Onboardee Cards: Each direct report has a dedicated card showing their name, role, and a progress bar.
• Manage Tasks: A "Manage Tasks" button on each card opens a dialog where managers can:
  • View all tasks currently assigned to that onboardee.
  • Unassign tasks by clicking the trash icon.
  • Assign new tasks from a dropdown list of all available tasks in the library.
• Create New Tasks: Managers can create team-specific tasks using the "Create New Task" button, which adds the new task to the central library for assignment.

The HR dashboard is the central hub for managing the entire onboarding task library.

• Task Library: View, edit, and manage all onboarding tasks for the entire organization.
• Create & Edit Tasks: HR users can create new tasks or edit existing ones. The task form includes fields for:
  • Task Name
  • Task Type
  • Target Employee Role
  • Business Area
  • Description (Optional)
  • Link (Optional)
  • Deadline (Optional)

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: ShadCN UI
• Generative AI: Genkit