fix: split enrollment page on status for pagination

[CK-7vn]

Description of the change

This PR fixes the pagination issue for the Graduated/Incomplete students view in the class enrollment details page.

Prior to this there was an arguable architectural flaw where a single API call would fetch all enrollments with pagination applied to the entire dataset, the frontend would then split the results client side, while the pagination operated on the backend not the split ararys. This made pagination meaningless and would clearly cause issues when program management gets into the hands of a user at a facility with thousands of people and potentially hundreds of residents in a specific class.

• Related issues:https://app.asana.com/1/1201607307149189/project/1209460078641109/task/1211777135502388?focus=true

Screenshot(s)

Additional context

Each view now has accurate page counts with separate navigation, the smaller api responses and a single dataset per view will undoubtebly improve performance, there's a more clear visual indication of active view with the segmented button controls and this scales much better than what we had prior.

Why This?

Why toggle view instead of dual pagination?

• Showing both tables simultaneously with seperate pagination for each
• Decided against because it would add UI complexity (gross), and i thought would be more confusing for users and make status filtering ambiguous.
• Chose: Single-view toggle for cleaner UX, clearer focus, and simpler state management.

Contextual status filter

• Enrolled view: Only one status, "Enrolled" so it rendered the filter dropdown unnecessary

[CK-7vn]

All fixed

[corypride]

Approved with confidence.

On another note. I am attaching a vid here, This behavior that i am showing in the video was not a side effect of your PR, but something that we may need to address. If a user selects more records per page than records in the dataset, the user is then not able to select fewer records per page later bc the pagination button disappears. In the case of this PR, a pg refresh takes care of resetting pagination for the Enrolled tab, but for the Graduated/Other tab pagination controls never return. We have other pages in our app that have the same behavior as the Graduated/Other tab (Program Management pg for sure). This is something that @calisio @carddev81 should put eyes on too.
https://github.com/user-attachments/assets/e0ba159f-cafc-4755-b810-ee949a32df26

[carddev81]

Looks and tested good. I like the toggle. @calisio are you wanting to take a look at this before it gets merged?

I agree with Cory that the pagination issue should be logged as another Asana ticket.

[calisio]

I approved toggle before it was built, so good to merge if it works as expected. I can also take a further look as I review the UI anyways. Good to merge 👍

[carddev81]

@CK-7vn I missed this small issue: when selecting an enrollment status and submitting the change the count doesn't immediately update for Graduated/Other and I think it should since the Enrolled count does. See below:

2025-11-12.15-41-55.mp4

[CK-7vn]

@CK-7vn I missed this small issue: when selecting an enrollment status and submitting the change the count doesn't immediately update for Graduated/Other and I think it should since the Enrolled count does. See below:

2025-11-12.15-41-55.mp4

I'm so sick of react state -_- I can't wait to be writing code in any other language. I'd rather be writing pointers in C all day long then dealing with React. Jeeeeeesh. Good catch though for sure. I'll get it wrapped up.