# Team Leave Tracker

Welcome to the `team-leave-tracker` plugin. This Backstage plugin helps teams keep track of who is away and when, by adding a **Leave Tracker** tab to Group entity pages. The tab is only visible to members of that group, so each team sees and manages its own leaves.

## Components

### Leave Tracker (Group entity tab)

The plugin registers a single **Leave Tracker** tab that is shown only on entities of kind **Group**. Once opened by a group member, it provides two views plus an **Add Leave** action.

#### Calendar

A month view of the team's leaves, directly within the group entity view.

**Features:**

- Monday-first monthly calendar grid
- Color-coded leave pills by type (Annual, Sick, Personal, Conference, Parental)
- Month navigation with a "Today" shortcut
- An "Upcoming Leaves" panel highlighting the next planned absences
- Click a day/leave to see details

![Example of the Calendar view](../team-leave-tracker/assests/calendar-view.png)

#### Team Overview

A per-member breakdown of the team's leaves, directly within the group entity view.

**Features:**

- One card per team member
- "On Leave" indicator for anyone currently away
- Leave type badges and formatted date ranges
- Total and upcoming leave-day counts per member
- Edit and delete actions for existing leaves

![Example of the Team Overview](../team-leave-tracker/assests/team-overview.png)

#### Add Leave

A modal for recording a new leave.

![Example of the Add Leave](../team-leave-tracker/assests/add-leave.png)

**Features:**

- Date range selection with validation (end date cannot precede start date)
- Leave type selection
- Optional note

## Setup

The following section will help you get the team-leave-tracker plugin set up and running.

### Backend

You need to set up the [team-leave-tracker backend plugin](../team-leave-tracker-backend/README.md) before you move forward with any of the following steps.

### Frontend (new frontend system)

This plugin is built for the Backstage [new frontend system](https://backstage.io/docs/frontend-system/). It uses an entity content extension, so once the plugin is enabled the **Leave Tracker** tab is added automatically — no manual `EntityPage.tsx` edits are required. The tab is only rendered on entities of kind **Group**, and its contents are only accessible to members of that group.

1. Add the `@codeverse-gp/plugin-team-leave-tracker` package to your frontend app:

   ```sh
   # From your Backstage root directory
   yarn --cwd packages/app add @codeverse-gp/plugin-team-leave-tracker
   ```

2. Enable the plugin in your `packages/app/src/App.tsx`:

   After all other imports:

   ```tsx
   import teamLeaveTrackerPlugin from '@codeverse-gp/plugin-team-leave-tracker';
   ```

   Then add it to the app's `features`:

   ```tsx
   export default createApp({
     features: [
       catalogPlugin,
       teamLeaveTrackerPlugin,
       // ...
     ],
   });
   ```

3. Now run `yarn start` from the root of your project. Open any Group entity and you should see the **Leave Tracker** tab (visible to members of that group).

## Links

- [Backend part of the plugin](../team-leave-tracker-backend/README.md)
- [The Backstage homepage](https://backstage.io)