@codeverse-gp/plugin-team-leave-tracker

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

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

Add Leave

A modal for recording a new leave.

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 before you move forward with any of the following steps.

Frontend (new frontend system)

This plugin is built for the Backstage new 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:

   # 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:

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

   Then add it to the app's features:

   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
• The Backstage homepage