Implement Finished Modules list UI by ji-mmyliu · Pull Request #176 · uwblueprint/extend-a-family

ji-mmyliu · 2026-01-07T01:40:00Z

Still needs to determine which modules are completed

Notion ticket link

Ticket Name

Implementation description

Steps to test

What should reviewers focus on?

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

- Still needs to determine which modules are completed

github-actions · 2026-01-07T01:43:03Z

Visit the preview URL for this PR (updated for commit 9d8e2b7):

https://extendafamily-7613e--pr176-jimmy-finished-modul-f80genot.web.app

_{(expires Wed, 14 Jan 2026 01:42:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31}

Copilot

Pull request overview

This PR implements a new Finished Modules page UI that allows learners to view their completed course modules. The implementation adds a new route, creates several new components for displaying finished modules in an accordion layout, and updates the home page to include navigation to this new feature. However, the PR description notes that logic to determine which modules are actually completed is still pending.

Key changes:

New Finished Modules page with accordion-style unit sections and module grid display
Navigation button added to home page for accessing the Finished Modules page
Layout adjustments to home page components for responsive design with flexbox wrapping

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/src/constants/Routes.ts	Adds FINISHED_MODULES_PAGE route constant
frontend/src/App.tsx	Registers FinishedModules route with role-based access control
frontend/src/components/pages/Home.tsx	Updates layout with responsive flexbox and adds navigation button to Finished Modules page
frontend/src/components/pages/FinishedModules.tsx	Main page component that fetches and displays all units and modules with expand/collapse functionality
frontend/src/components/finished_modules/index.ts	Exports finished modules components
frontend/src/components/finished_modules/FinishedModulesContent.tsx	Content component that renders sorted unit sections with loading and error states
frontend/src/components/finished_modules/UnitSection.tsx	Accordion component for displaying a unit with its modules
frontend/src/components/finished_modules/ModulesGrid.tsx	Grid component that renders module cards using ModuleCardLearner
frontend/src/components/learners/NavButton.tsx	Reduces fixed width from 515px to 350px for better responsive layout
frontend/src/components/learners/FacilitatorCard.tsx	Changes width from fixed 1045px to maxWidth for responsive behavior
frontend/src/components/course_viewing/library-viewing/ModuleCardLearner.tsx	Adds "FINISHED ON [DATE]" badge with checkmark icon to all module cards
frontend/src/components/feedback/feedback-admin-view/FeedbackAdminView.tsx	Removes redundant comment

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-07T01:43:25Z

frontend/src/components/pages/FinishedModules.tsx

+  // Load all data on component mount
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      setError(null);
+
+      const fetchedUnits = await fetchUnits();
+
+      // Fetch modules for all units
+      await Promise.all(
+        fetchedUnits.map((unit) => fetchModulesForUnit(unit.id)),
+      );
+
+      setLoading(false);
+    };
+
+    loadData();


The FinishedModules page currently displays all modules for all units without any filtering logic to show only completed modules. According to the PR description, "Still needs to determine which modules are completed." The page should either filter modules based on completion status or clearly indicate this is a work-in-progress that displays all modules temporarily.

Copilot · 2026-01-07T01:43:26Z

frontend/src/components/pages/FinishedModules.tsx

+      display="flex"
+      width="100%"
+      minHeight="100vh"
+      height="100vh"


Setting both height="100vh" and minHeight="100vh" is redundant. When height is set to a fixed value like 100vh, minHeight has no effect. Consider using only minHeight="100vh" to allow the container to grow if content exceeds viewport height, or only height="100vh" if a fixed height is truly required.

Suggested change

height="100vh"

Copilot · 2026-01-07T01:43:26Z

frontend/src/components/finished_modules/UnitSection.tsx

+            sx={{
+              width: "43.192px",
+              height: "37.831px",
+              color: "#000000",


Hardcoded color value "#000000" should use the theme palette for consistency. Consider using theme.palette.text.primary or another appropriate theme color instead.

Suggested change

color: "#000000",

color: theme.palette.text.primary,

Copilot · 2026-01-07T01:43:26Z

frontend/src/components/finished_modules/UnitSection.tsx

+        }
+        sx={{
+          width: "100%",
+          backgroundColor: expanded ? "#F5F5F5" : "transparent",


Hardcoded color value "#F5F5F5" should use the theme palette for consistency. Consider using theme.palette.Neutral[100] or another appropriate theme color instead.

Suggested change

backgroundColor: expanded ? "#F5F5F5" : "transparent",

backgroundColor: expanded ? theme.palette.Neutral[100] : "transparent",

Copilot · 2026-01-07T01:43:27Z

frontend/src/components/course_viewing/library-viewing/ModuleCardLearner.tsx

+            <Stack
+              direction="row"
+              padding="4px 8px"
+              justifyContent="center"
+              alignItems="center"
+              gap="8px"
+              borderRadius="4px"
+              bgcolor={theme.palette.Success.Light.Hover}
+              color={theme.palette.Success.Dark.Default}
+            >
+              <CheckCircle sx={{ fontSize: 15 }} />
+              <Typography variant="labelMedium">FINISHED ON [DATE]</Typography>
+            </Stack>


The finished module badge is unconditionally rendered in the ModuleCardLearner component, which is used in multiple places including the regular course viewing grid (CourseModulesGrid.tsx). This will cause all modules to display the "FINISHED ON [DATE]" badge everywhere, not just on the Finished Modules page. The component needs a prop to conditionally show the badge, such as showFinishedBadge or isFinished, which should only be true when displaying actually finished modules.

Copilot · 2026-01-07T01:43:27Z

frontend/src/components/course_viewing/library-viewing/ModuleCardLearner.tsx

+              color={theme.palette.Success.Dark.Default}
+            >
+              <CheckCircle sx={{ fontSize: 15 }} />
+              <Typography variant="labelMedium">FINISHED ON [DATE]</Typography>


The hardcoded placeholder text "[DATE]" should be replaced with actual completion date data. This appears to be incomplete functionality based on the PR description noting "Still needs to determine which modules are completed".

Suggested change

<Typography variant="labelMedium">FINISHED ON [DATE]</Typography>

<Typography variant="labelMedium">FINISHED</Typography>

Implement Finished Modules list UI

9d8e2b7

- Still needs to determine which modules are completed

ji-mmyliu requested a review from Copilot January 7, 2026 01:40

Copilot started reviewing on behalf of ji-mmyliu January 7, 2026 01:40 View session

Copilot AI reviewed Jan 7, 2026

View reviewed changes

ji-mmyliu merged commit 0fff42e into main Jan 7, 2026
9 checks passed

ji-mmyliu deleted the jimmy/finished-modules-ui branch January 7, 2026 02:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Finished Modules list UI#176

Implement Finished Modules list UI#176
ji-mmyliu merged 1 commit intomainfrom
jimmy/finished-modules-ui

ji-mmyliu commented Jan 7, 2026

Uh oh!

github-actions bot commented Jan 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Copilot AI Jan 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	backgroundColor: expanded ? "#F5F5F5" : "transparent",
	backgroundColor: expanded ? theme.palette.Neutral[100] : "transparent",

	<Typography variant="labelMedium">FINISHED ON [DATE]</Typography>
	<Typography variant="labelMedium">FINISHED</Typography>

Conversation

ji-mmyliu commented Jan 7, 2026

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

Uh oh!

github-actions bot commented Jan 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant