Skip to content

Handika: Create a People Report solution for when people have more than 20 tasks. - #5405

Open
handikaharianto wants to merge 74 commits into
developmentfrom
handika/people-report-solution-for-large-tasks
Open

Handika: Create a People Report solution for when people have more than 20 tasks.#5405
handikaharianto wants to merge 74 commits into
developmentfrom
handika/people-report-solution-for-large-tasks

Conversation

@handikaharianto

@handikaharianto handikaharianto commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Description

image

Related PRS (if any):

This frontend PR is related to the #4635 and #3670

Main changes explained:

  • Create CompletedTasksPieChart.jsx for implementing the completed tasks table and empty state.
  • Create CompletedTasksPieChart.module.css for the CSS styles of the table.
  • Update PeopleTasksPieChart.jsx‎ for adding empty state.
  • Update PeopleTasksPieChart.module.css for modifying the CSS styles.
  • Update PeopleReport.jsx to display CompletedTasksPieChart.
  • Update PeopleReport.module.css for modifying the CSS styles.
  • Update ReportPage.module.css for modifying the CSS styles.
  • Update ProjectPieChart.jsx for replacing the previous table implementation with react-table.

How to test:

  1. check into handika/people-report-solution-for-large-tasks
  2. do npm install and npm run start:local to run this PR locally
  3. Clear site data/cache
  4. log as admin/owner user
  5. go to Reports → Reports→ People → Click one the person's name on the table
  6. verify the Tasks With Completed Hours section properly handles large number of completed tasks.
  7. verify the Tasks With Completed Hours section displays an empty state when there is no data to display.
  8. verify the Time Logged to Projects/Non-tasks section displays an empty state when there is no data to display.
  9. verify the height of user profile box (right size) is lined up with the height of both Tasks With Completed Hours and Time Logged to Projects/Non-tasks.
  10. verify the dark mode.
Screen.Recording.2026-08-04.at.8.49.36.PM.mov

Note:

None

@netlify

netlify Bot commented Jul 24, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 6570a93
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a78f78fc0334900085ec7a7
😎 Deploy Preview https://deploy-preview-5405--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Aug 5, 2026

@AdiDubbs AdiDubbs left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The row limiting and empty states look good, but a few things need sorting before this merges.

The PeopleReport.jsx rewrite no longer syncs isRehireable from the loaded profile, so a non-rehireable person appears rehireable. Its new catch/finally path also renders with incomplete data after a failed request instead of retaining a safe loading or error state.

In the new chart, visibleCount starts at the full task count, so the entire table paints before it is trimmed. The CSS-module conversion in PeopleTableDetails is incomplete: several table classes are still plain strings, so the updated grid, padding, and dark-row rules cannot match. The resource-count badge also references a missing module class, and the project empty state misses the zero-hours case.

On scope, package.json is unchanged but yarn.lock has 3,982 changed lines, including registry rewrites and dependency-version changes. ApplicationTimeChart/data.js also appears unrelated and unused. The description should note that PeopleReport.jsx is a class-to-hooks rewrite and include test steps for the rewritten behavior, including the rehireable state and a failed data request.

Comment thread src/components/Reports/PeopleReport/PeopleReport.jsx
Comment thread src/components/Reports/PeopleReport/PeopleReport.jsx
// render every row regardless of this number. The renderer slices in half: the
// measurement effect owns the cap, the JSX owns the slice.
const tbodyRef = useRef(null);
const [visibleCount, setVisibleCount] = useState(tasks.length);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

visibleCount starts at tasks.length, so the first paint renders every row and the effect trims it only afterwards. With a long list, the full table can flash before it snaps down, which defeats the point of this large-list change. Starting with a small count and measuring before paint would avoid that.

Comment thread src/components/Reports/PeopleTableDetails.jsx
Comment thread src/components/Reports/PeopleTableDetails.jsx
// setShowAllTasks(prev => !prev);
// }

const hasProjectData = hoursLoggedToProjectsOnly.length > 0;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only checks whether project entries exist, not whether they have logged hours. A project entry with totalTime 0 renders this section while ProjectPieChart returns no chart, so the new empty state is skipped. The selector already exposes showProjectsPieChart using totalTime > 0; could this use that value?

Comment thread src/components/Reports/ReportTableSearchPanel.jsx Outdated
Comment thread src/components/ApplicationTimeChart/data.js Outdated

@DeepighaJ DeepighaJ left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Tested the PR locally,
  • The Time Logged to Projects/Non-tasks and Tasks with Completed hours shows data however still empty state message is displayed in the graph section below.
  • Suggestion:
    The infringement graph shows No plotted data, it can say No data instead of showing a blank chart.
Image Image

@handikaharianto

Copy link
Copy Markdown
Contributor Author
  • Tested the PR locally,
  • The Time Logged to Projects/Non-tasks and Tasks with Completed hours shows data however still empty state message is displayed in the graph section below.
  • Suggestion:
    The infringement graph shows No plotted data, it can say No data instead of showing a blank chart.

Image Image

Hi, thanks for the review. Your screenshot doesn't reflect the latest updates of this branch. Please make sure to always pull the latest changes from the branch. I've included a video of how it looks like. Also, the section below the Tasks with Completed Hours is not within the scope of this PR.

@sonarqubecloud

sonarqubecloud Bot commented Aug 9, 2026

Copy link
Copy Markdown

@RuthwikHM RuthwikHM left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes. I tested it out locally and things worked fine. Found no regressions. I tested it out in dark and light mode. I even tested the responsiveness and that works too.

Screenshot 2026-08-13 at 20 33 01 Screenshot 2026-08-13 at 20 33 08 Screenshot 2026-08-13 at 21 02 59

@ShreyasB02 ShreyasB02 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this PR locally using the development backend, as the corresponding backend PR has already been merged into the development branch.

What works

  • Verified the data is populated correctly in the table.
  • Confirmed the pie chart renders successfully with the correct data.
  • Verified the chart legend matches the corresponding pie chart segment colors and remains consistent.
  • Confirmed that when the selected user has no available data, the page displays an empty state as expected.
  • Dark mode renders as expected.
Screenshot 2026-08-15 at 10 06 33 AM Screenshot 2026-08-15 at 10 22 09 AM

Suggested improvements

  • When there is no data available for the infringement chart, consider displaying a message such as "No data available to display" instead of rendering an empty graph.
Screenshot 2026-08-15 at 10 16 37 AM
  • In light mode, the table content could use a darker text color to improve readability and contrast.
Screenshot 2026-08-15 at 10 14 55 AM
  • It would also improve the user experience if hovering over the pie chart displayed a tooltip with the corresponding segment details.

@Adit0717 Adit0717 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this locally by checking out to handika/people-report-solution-for-large-tasks, Followed all the steps and tested against the checklist.

Working as expected - on both light and dark mode:
"Tasks With Completed Hours" handles a large number of completed tasks correctly.
Empty state displays correctly when there's no data for "Tasks With Completed Hours."
Empty state displays correctly when there's no data for "Time Logged to Projects/Non-tasks."

Image Image

Issue found:
Clicking on the "Infringements" graph opens a popup titled "Infringement" with a "Descriptions" header, but the content area is completely empty - no data loads inside it.

Image

@linlin-husky linlin-husky left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested the checkpoints in admin role. Most of them work fine. I found two issues that need to be corrected:

  1. Infringement Modal Description Issue:
    When clicking on the displayed Infringements graph for a user with recorded infringement points, the modal pops up with a "Descriptions" section that contains no text at all. Showing nothing here can easily mislead users into thinking there are no infringements, even though the graph clearly shows active data points. It would be much more user-friendly to display the detailed records or at least an informative summary (e.g., "There are 3 infringement records"). Please check the attached screenshot for reference.
Image
  1. Datepicker Dark Mode UI
    In dark mode, when clicking the date input in the Tasks contributed section, the datepicker popover has serious visual and rendering issues. The weekday headers (Su, Mo, Tu...) are nearly invisible due to poor text contrast against the background, and the calendar content appears severely clipped/blank (only showing day '1' while other dates are cut off). Please adjust the styling, contrast, and layout so the date picker is fully visible and usable. Please check the attached screenshot for reference.
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants