feat: add in-app help tooltips and info cards across pages by b1ink0 · Pull Request #2309 · rtCamp/next-pms

b1ink0 · 2026-10-23T13:17:06Z

Description

This PR adds in-app help to most pages, so users can understand a figure, colour or control without leaving the page. An (i) beside a label opens a card with a short explanation and, where it helps, the formula, a legend and a link to the wiki. Smaller hints use a one-line tooltip.

Help is added to:

The leadership and manager dashboards.
The personal, team and project timesheets.
Settings and notifications.
Team and project allocations, and the allocation dialogs.
Tasks and the task log.
The projects list, Kanban and saved views.
The Project detail sidebar, Calendar tab and Tracking tab.
Legends use samples built from the real components (health dot, budget burn bar, calendar entry pills), so they look the same as the screen.

Relevant Technical Choices

Two shared components are added to the design system:
- An info card that takes its content as plain data.
- A Help panel that lists page tips and hides tips the user's roles don't allow. The Help panel is not shown in the app yet.
The info card has a tooltip mode for places where a card can't open, such as inside another hover card or popover.
Help text lives in a help.ts (or help.tsx) next to each page's constants.ts. Figures shown in more than one place reuse the same text, so the Projects list and the Project detail sidebar explain cost burn and lifetime value the same way.
Legends use samples built from the real components (health dot, budget burn bar, calendar entry pills), so they look the same as the screen.

Testing Instructions

Navigate to the Personal timesheet.
Hover the (i) beside "Total". Verify that a card opens with the formula and says the total is compared with your weekly working hours.
Navigate to the Team timesheet, open a member's week for review, and hover an (i) inside the review panel. Verify that the card opens above the panel.
Navigate to Team allocations, hover a member, and hover the (i) inside the hover card. Verify that a tooltip opens.
Open Add allocation and hover the (i) beside "Total hours". Verify that the card explains how the total is worked out.
Navigate to Tasks and hover the (i) in the "Status" column header. Verify that the card explains when a task becomes Overdue.
Navigate to Projects. Hover the (i) beside "Cost burn". Verify that the legend shows sample bars for under 60%, 60–80% and over 80% of target cost.
Hover the (i) beside "Currency". Verify that it lists the columns that are converted.
Switch to Kanban. Hover the health dot and the date row on a card. Verify that each shows a tooltip.
Open a project.
- In the sidebar, hover the (i) beside "Budget burn" and "Progress (hours)". Verify that each card explains the figures.
- Hover the health dot beside the project name. Verify that it shows the project health.
Open the Calendar tab and hover the (i) beside the entry filter. Verify that the legend shows a milestone, touchpoint, completed and internal pill.
Switch to List view and hover the (i) beside "Actual end" and "Watchers". Verify that each card opens.
Open the Tracking tab.
- Hover the (i) beside each card title. Verify that each card explains its figures.
- Click the "Total project value" card outside the (i). Verify that Sales Orders open in a new tab.
- Hover its (i). Verify that the card opens without following the link.
On a Fixed Cost or Retainer project, hover the (i) beside "Hours used" in Contracts. Verify that there is a gap between the label and the (i).

Additional Information:

Wiki links in the cards point to the GitHub wiki, which does not have these pages yet. They resolve once the wiki content is published there.

Screenshot/Screencast

Checklist

I have carefully reviewed the code before submitting it for review.
This code is adequately covered by unit tests to validate its functionality.
I have conducted thorough testing to ensure it functions as intended.
A member of the QA team has reviewed and tested this PR (To be checked by QA or code reviewer)
I have reviewed and updated the documentation as needed.

Fixes #2286

- Add InfoHoverCard: an (i) trigger that opens a hover card with a title, summary, optional formula, up to three notes and a wiki link. Content comes from a FieldHelp object. - Add HelpPanel: a non-modal panel that lists page tips and general tips, hides tips the user's roles don't allow, and opens each tip with a wiki link and previous/next navigation. It sits under dialog backdrops so it dims with the page while a dialog is open. - Add a fade-right animation for moving back in the help panel. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add info hover cards and tooltips to both dashboards, with all text in pages/dashboard/help.ts and checked against the backend queries. - Leadership: KPI cards, heatmap, utilised time, forecast, calendar and stat cards. - Manager: stat cards, heatmap, calendar, managed projects columns (Remaining, Hours Burn, billable hours) and timesheet columns (Expected h, Delta, status). - Heatmap and calendar take their help as a prop, so each dashboard passes its own text and wiki link. - Stat cards link through an overlay, so the info icon isn't nested inside the link. - Upcoming time-offs shows disabled approve and reject buttons, with a tooltip, on leave the manager is only notified about. - Profit margin shows N/A when there is no revenue. - Utilised time and forecast percentages always add up to 100. - Info hover card: smaller icon, and the popover no longer shifts the layout around its trigger while open. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add info cards to the personal timesheet: on the week header for the day cells, next to Total, on the Time-off row and next to the Half Day Date label in the add leave dialog. The design system HeaderRow and TimeOffRow take optional help props for this. Give the info card a legend that draws a small sample of the real mark next to a short label. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add info cards to the team and project timesheets: day cells and Total on the week header, the member's Time-off row, and the Reports to filter on the team timesheet. The texts reuse the personal timesheet records, rewritten for the member, and the project timesheet explains the project total. In the weekly approval panel, decided days get a tooltip on their disabled checkbox. The Edit button now shows disabled with the reason on approved, rejected or processing entries instead of being hidden. Move the approval panel to the same layer as other dialogs, so tooltips inside it open above it instead of behind it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add info cards to the settings that need explaining: Default Expanded Weeks, backdated entries, Allowed Departments, Default Currency and the missing allocation reminder. The notifications tray gets an info card beside its title, and each alert gets a tooltip saying what selecting it does. The tray takes the card and tooltip text as props, so the text stays in the app. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Add an info card to the Members and Projects column headers. Its legend draws real gantt bars for each state: free, partly or fully allocated, over capacity, tentative, non-billable, leave and holiday. - Add an info card beside the Allocation type filter explaining how options combine and what the remaining figures count. - Explain the hourly rate, weekly capacity, remaining hours and allocation hours lines in the hover cards. - Let InfoHoverCard take a tooltip instead of a card, for places a card can't open from, such as inside a hover card. It keeps the same (i) icon and wraps long text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Add an info card to the Status column explaining when a task becomes Overdue and how logging time changes its status. - Add an info card beside Actual / Est. in the task log explaining the percentage, the red over-time figure and what Actual counts. - Let task list columns carry an info card in their header. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Add info cards to the Project name, Burn rate/week, Cost burn, Total budget, Profit margin and Lifetime value to date column headers, with legends drawn from the real health dot and budget burn bar. - Add an info card beside Currency and reword the disabled sort tooltip. - Name each Kanban card row and the health dot in a tooltip. - Explain public views beside Make this view public in Create View and Edit View. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Name the project health dot beside the project name in a tooltip. - Add info cards to the Budget burn and Progress (hours) sections, explaining the figures, the target and the bar colours. - Say what to do first when a team member can't be removed, naming their role or pointing to Project rates on the Tracking tab. - Explain that Team members lists only people added to a project shared with everyone. - Add an info card beside Activity explaining changed rows, impersonated changes and the 50 change limit. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Add a legend beside the entry filter in Calendar and Gantt view, with sample pills for milestones, touchpoints, completed and internal entries. - Add info cards to the Actual end, Actual date and Watchers columns in List view. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Add info cards to Total project value, Projected and Current profit and their margins, with formulas and what each mode adds or leaves out. - Add info cards to Task completion, Hours usage, Invoice burn, Budget burn, Cost burn and the lifetime value cards. - Explain Hours used in Contracts and the Flat rate in Project rates. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot

🟡 Changes recommended

Critical modal stacking and role-filtering issues remain unresolved, and the HelpPanel is not mounted for users.

3 open issues

Keep approval modal above sticky table headers · New
Keep weekly approval modal above page overlays · New
Re-filter opened help tips when roles change · New

What changed in this PR

This pull request adds contextual in-app help across dashboards, timesheets, allocations, tasks, projects, settings, notifications, and project details through reusable informational cards, tooltips, legends, wiki links, and a role-aware help panel.

Changes:

Adds reusable InfoHoverCard and HelpPanel design-system components.
Integrates page-specific explanations, formulas, legends, and tooltips across the application.
Updates related Gantt views, dashboard metrics, settings fields, saved views, and weekly-approval interactions.
Review findings include unresolved modal stacking, hidden edit-button hit testing, role-filtering, missing HelpPanel mounting, and help-icon placement issues.

File	Description
`frontend/packages/design-system/src/components/timesheet/rows/timeOff/timeOffRow.tsx`	Adds optional time-off help.
`frontend/packages/design-system/src/components/timesheet/rows/header/headerRow.tsx`	Adds help triggers for cells and totals.
`frontend/packages/design-system/src/components/notificationTray/notificationItem.tsx`	Adds notification tooltips.
`frontend/packages/design-system/src/components/notificationTray/index.tsx`	Adds notification help and tooltip props.
`frontend/packages/design-system/src/components/info-hover-card/types.ts`	Defines help-card and legend types.
`frontend/packages/design-system/src/components/info-hover-card/index.tsx`	Implements informational popovers and tooltip mode.
`frontend/packages/design-system/src/components/info-hover-card/constants.ts`	Defines the wiki base URL.
`frontend/packages/design-system/src/components/index.ts`	Exports help components and types.
`frontend/packages/design-system/src/components/help-panel/types.ts`	Defines help-panel and tip types.
`frontend/packages/design-system/src/components/help-panel/tipList.tsx`	Renders grouped help topics.
`frontend/packages/design-system/src/components/help-panel/index.tsx`	Implements the role-filtered help panel.
`frontend/packages/design-system/src/components/gantt-view/types.ts`	Adds Gantt help and tooltip props.
`frontend/packages/design-system/src/components/gantt-view/index.ts`	Exports Gantt utilities.
`frontend/packages/design-system/src/components/gantt-view/ganttStore.ts`	Stores Gantt help configuration.
`frontend/packages/design-system/src/components/gantt-view/ganttProjectItem.tsx`	Supplies project tooltip content.
`frontend/packages/design-system/src/components/gantt-view/ganttProjectHoverCard.tsx`	Adds project tooltip UI.
`frontend/packages/design-system/src/components/gantt-view/ganttMemberItem.tsx`	Supplies member tooltip content.
`frontend/packages/design-system/src/components/gantt-view/ganttMemberHoverCard.tsx`	Adds member rate and capacity tooltips.
`frontend/packages/design-system/src/components/gantt-view/ganttGrid.tsx`	Adds row-header help and Gantt configuration.
`frontend/packages/design-system/src/components/gantt-view/gantt-bar/ganttBar.tsx`	Supports caller-provided bar styles.
`frontend/packages/design-system/src/components/gantt-view/gantt-bar/allocationPopover.tsx`	Adds allocation-hours tooltip content.
`frontend/packages/app/src/pages/timesheet/team/weekly-approval/rejectionPopup.tsx`	Changes rejection-dialog stacking.
`frontend/packages/app/src/pages/timesheet/team/weekly-approval/index.tsx`	Changes approval-backdrop stacking.
`frontend/packages/app/src/pages/timesheet/team/weekly-approval/entryRow.tsx`	Adds entry and edit tooltips.
`frontend/packages/app/src/pages/timesheet/team/weekly-approval/approvalPopup.tsx`	Adds decided-day help and changes popup stacking.
`frontend/packages/app/src/pages/timesheet/team/teamTimesheetTable.tsx`	Connects team-timesheet help.
`frontend/packages/app/src/pages/timesheet/team/subHeader.tsx`	Adds Reports To help.
`frontend/packages/app/src/pages/timesheet/team/help.ts`	Defines team-timesheet help.
`frontend/packages/app/src/pages/timesheet/project/projectTimesheetTable.tsx`	Connects project-timesheet help.
`frontend/packages/app/src/pages/timesheet/project/help.ts`	Defines project-timesheet help.
`frontend/packages/app/src/pages/timesheet/personal/personalTimesheetTable.tsx`	Connects personal-timesheet help.
`frontend/packages/app/src/pages/timesheet/personal/help.ts`	Defines personal-timesheet tips and formulas.
`frontend/packages/app/src/pages/timesheet/components/add-leave/index.tsx`	Adds half-day-date help.
`frontend/packages/app/src/pages/tasks/types.ts`	Adds task-column help metadata.
`frontend/packages/app/src/pages/tasks/list/view.tsx`	Renders task-column help icons.
`frontend/packages/app/src/pages/tasks/list/columns.ts`	Adds status help metadata.
`frontend/packages/app/src/pages/tasks/list/cells/likeCell.tsx`	Updates the starring tooltip.
`frontend/packages/app/src/pages/tasks/help.ts`	Defines task help content.
`frontend/packages/app/src/pages/projects/types.ts`	Adds project-column help metadata.
`frontend/packages/app/src/pages/projects/list/columns/header.tsx`	Renders project-column help.
`frontend/packages/app/src/pages/projects/list/columns/constants.ts`	Adds project-column help metadata.
`frontend/packages/app/src/pages/projects/list/cells/dot.tsx`	Allows SVG props on health dots.
`frontend/packages/app/src/pages/projects/kanban/projectCard.tsx`	Adds Kanban health and field tooltips.
`frontend/packages/app/src/pages/projects/help.tsx`	Defines project and Kanban help.
`frontend/packages/app/src/pages/projects/components/project-filters/index.tsx`	Adds currency and sorting help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/help.ts`	Defines tracking and financial help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/constants.ts`	Adds contract-column help metadata.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/taskCompletion.tsx`	Adds task-completion help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/projectRatesTable.tsx`	Adds flat-rate help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/lifetimeToDate.tsx`	Adds lifetime-value help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/lifetimeExpected.tsx`	Adds expected-lifetime help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/knowledgePoint.tsx`	Adds help while preserving linked cards.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/invoiceBurn.tsx`	Adds invoice-burn help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/hoursUsage.tsx`	Adds hours-usage help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/financialsColumn.tsx`	Adds total-project-value help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/financialsBlock.tsx`	Adds mode-aware financial help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/costBurn.tsx`	Adds cost-burn help.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/contractsTable.tsx`	Adds contract-column help icons.
`frontend/packages/app/src/pages/project-details/tabs/tracking/components/budgetBurn.tsx`	Adds budget-burn help.
`frontend/packages/app/src/pages/project-details/tabs/calendar/table/timelineTable.tsx`	Renders calendar-column help.
`frontend/packages/app/src/pages/project-details/tabs/calendar/table/columns.ts`	Adds calendar-column help metadata.
`frontend/packages/app/src/pages/project-details/tabs/calendar/provider.tsx`	Improves the document-follow error message.
`frontend/packages/app/src/pages/project-details/tabs/calendar/help.tsx`	Defines calendar help and legends.
`frontend/packages/app/src/pages/project-details/tabs/calendar/create-touchpoint/index.tsx`	Adds touchpoint-entry help.
`frontend/packages/app/src/pages/project-details/tabs/calendar/create-milestone/index.tsx`	Adds milestone-entry help.
`frontend/packages/app/src/pages/project-details/tabs/calendar/calendarToolbar.tsx`	Adds calendar-filter help.
`frontend/packages/app/src/pages/project-details/help.ts`	Defines sidebar help and member tooltips.
`frontend/packages/app/src/pages/project-details/components/activity/help.ts`	Defines activity help.
`frontend/packages/app/src/pages/project-details/components/activity/activitySection.tsx`	Adds activity help.
`frontend/packages/app/src/pages/project-details/about/sections/member.tsx`	Reuses shared visibility tooltip text.
`frontend/packages/app/src/pages/project-details/about/progressHoursSection.tsx`	Adds progress-hours help.
`frontend/packages/app/src/pages/project-details/about/index.tsx`	Adds project health and budget help.
`frontend/packages/app/src/pages/project-details/about/components/addMemberModal.tsx`	Reuses member-removal tooltip text.
`frontend/packages/app/src/pages/dashboard/widget/utilization/index.tsx`	Adds utilization help and percentage handling.
`frontend/packages/app/src/pages/dashboard/widget/upcoming-time-off/content.tsx`	Adds permission tooltips and disabled actions.
`frontend/packages/app/src/pages/dashboard/widget/timesheet-summary/statusIcon.tsx`	Exports status-icon metadata.
`frontend/packages/app/src/pages/dashboard/widget/timesheet-summary/index.tsx`	Adds timesheet-summary and column help.
`frontend/packages/app/src/pages/dashboard/widget/timesheet-summary/constants.ts`	Adds summary-column help metadata.
`frontend/packages/app/src/pages/dashboard/widget/stat-cards/statCard.tsx`	Adds stat-card help.
`frontend/packages/app/src/pages/dashboard/widget/stat-cards/managerStatCards.tsx`	Adds manager stat-card help.
`frontend/packages/app/src/pages/dashboard/widget/stat-cards/leadershipStatCards.tsx`	Adds leadership stat-card help.
`frontend/packages/app/src/pages/dashboard/widget/kpi-cards/useLeadershipKpi.ts`	Returns the complete KPI response.
`frontend/packages/app/src/pages/dashboard/widget/kpi-cards/index.tsx`	Adds KPI help and zero-revenue handling.
`frontend/packages/app/src/pages/dashboard/widget/heatmap/index.tsx`	Adds heatmap help.
`frontend/packages/app/src/pages/dashboard/widget/forecast-breakdown/index.tsx`	Adds forecast help and percentage rounding.
`frontend/packages/app/src/pages/dashboard/widget/calendar-timeline/index.tsx`	Adds calendar-timeline help.
`frontend/packages/app/src/pages/dashboard/widget/assigned-projects/index.tsx`	Adds assigned-project help and tooltips.
`frontend/packages/app/src/pages/dashboard/widget/assigned-projects/constants.ts`	Defines assigned-project help metadata.
`frontend/packages/app/src/pages/dashboard/manager/index.tsx`	Supplies manager-dashboard help.
`frontend/packages/app/src/pages/dashboard/leadership/index.tsx`	Supplies leadership-dashboard help.
`frontend/packages/app/src/pages/dashboard/help.ts`	Defines dashboard help content.
`frontend/packages/app/src/pages/allocations/team/subHeader.tsx`	Adds allocation-type help.
`frontend/packages/app/src/pages/allocations/team/edit-schedule/index.tsx`	Adds recurring-edit help.
`frontend/packages/app/src/pages/allocations/team/edit-schedule/components/scheduleTotalHoursField.tsx`	Adds schedule-total-hours help.
`frontend/packages/app/src/pages/allocations/team/allocationsTeamTable.tsx`	Supplies team Gantt help and tooltips.
`frontend/packages/app/src/pages/allocations/team/add-allocation/overAllocationWarning.tsx`	Adds over-allocation help.
`frontend/packages/app/src/pages/allocations/team/add-allocation/index.tsx`	Adds allocation-form help.
`frontend/packages/app/src/pages/allocations/project/subHeader.tsx`	Adds project allocation-type help.
`frontend/packages/app/src/pages/allocations/project/allocationsProjectTable.tsx`	Supplies project Gantt help and tooltips.
`frontend/packages/app/src/pages/allocations/help.tsx`	Defines allocation legends and dialog help.
`frontend/packages/app/src/layout/sidebar/index.tsx`	Supplies notification help configuration.
`frontend/packages/app/src/layout/sidebar/help.ts`	Defines notification help content.
`frontend/packages/app/src/global.css`	Adds help-panel transition animation.
`frontend/packages/app/src/components/timesheet-row/teamTimesheetRow.tsx`	Adds team time-off help.
`frontend/packages/app/src/components/timesheet-row/projectTimesheetRow.tsx`	Adds project time-off help.
`frontend/packages/app/src/components/timesheet-row/personalTimesheetRow.tsx`	Adds personal time-off help.
`frontend/packages/app/src/components/task-log/help.ts`	Defines task-log help.
`frontend/packages/app/src/components/task-log/components/progress.tsx`	Adds task-progress help.
`frontend/packages/app/src/components/settings/pages/timesheets.tsx`	Adds timesheet-settings help.
`frontend/packages/app/src/components/settings/pages/system-timesheets.tsx`	Adds system-timesheet help.
`frontend/packages/app/src/components/settings/pages/system-resource-management.tsx`	Adds resource-management help.
`frontend/packages/app/src/components/settings/help.ts`	Defines settings help content.
`frontend/packages/app/src/components/settings/fields.tsx`	Adds settings-field help support.
`frontend/packages/app/src/components/edit-view/index.tsx`	Adds saved-view help.
`frontend/packages/app/src/components/create-view/index.tsx`	Adds saved-view creation help.
`frontend/packages/app/src/components/create-view/help.ts`	Defines public-view help content.

_{Review effort: Lite}

…ange Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

b1ink0 and others added 11 commits October 20, 2026 12:59

b1ink0 requested a lite review from Copilot October 23, 2026 13:45

Copilot started reviewing on behalf of b1ink0 October 23, 2026 13:46

View session

Copilot AI reviewed Oct 23, 2026

View reviewed changes

Comment thread frontend/packages/app/src/pages/timesheet/team/weekly-approval/approvalPopup.tsx

Comment thread frontend/packages/app/src/pages/timesheet/team/weekly-approval/index.tsx

Comment thread frontend/packages/design-system/src/components/help-panel/index.tsx Outdated

fix(design-system): reset the help panel when visible general tips ch…

369cc7c

…ange Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Navigation Menu

Repository navigation

feat: add in-app help tooltips and info cards across pages - #2309

feat: add in-app help tooltips and info cards across pages#2309
b1ink0 wants to merge 12 commits into
developfrom
feat/help-section

b1ink0 commented Oct 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

b1ink0 commented Oct 23, 2026

Description

Relevant Technical Choices

Testing Instructions

Additional Information:

Screenshot/Screencast

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants