Skip to content

Created Alternate Schedule Component#234

Open
ExistentialKevin wants to merge 9 commits intodevfrom
HK-215
Open

Created Alternate Schedule Component#234
ExistentialKevin wants to merge 9 commits intodevfrom
HK-215

Conversation

@ExistentialKevin
Copy link

@ExistentialKevin ExistentialKevin commented Mar 6, 2026

Why

  • A table of events should be simple and display all the necessary information to the viewer.

What

  • Created a table of events that groups by day.
  • Events link to to their respective event pages for more information on the event.

Satisfies

HK-215

Summary by CodeRabbit

  • New Features

    • Added a table-based schedule view that groups events by day and shows times, colored type badges, titles, and descriptions.
    • Replaced the timeline view with the new table on the Schedule page.
    • Added a Schedule link to the navigation.
  • Style

    • Tightened table cell spacing and adjusted header sizing.
    • Minor navbar spacing tweak.
  • Content

    • Updated main Schedule heading text.

@linear
Copy link

linear bot commented Mar 6, 2026

@coderabbitai
Copy link

coderabbitai bot commented Mar 6, 2026

📝 Walkthrough

Walkthrough

Adds a new ScheduleTable component and EventRow, replaces ScheduleTimeline usage with ScheduleTable, tweaks table styling, alters NavBarLinksGrouper to render a single Schedule item, and adds revalidation exports and a minor heading text change.

Changes

Cohort / File(s) Summary
Schedule components
apps/web/src/app/dash/schedule/page.tsx, apps/web/src/app/dash/schedule/schedule-table.tsx, apps/web/src/app/schedule/page.tsx
Introduces ScheduleTable (default) and exported EventRow; groups events by day (splitByDay), formats dates/times per timezone, and renders per-event rows. Replaces ScheduleTimeline with ScheduleTable. Heading text changed in dash page. Adds export const revalidate = 60 and a new (unused) getRequestContext import in apps/web/src/app/schedule/page.tsx.
Table styling
apps/web/src/components/shadcn/ui/table.tsx
Removed overflow-auto wrapper and reduced TableCell padding from p-4 to p-2, altering container scroll behavior and horizontal cell spacing.
Navigation updates
apps/web/src/components/shared/NavBarLinksGrouper.tsx, apps/web/src/components/shared/Navbar.tsx
NavBarLinksGrouper now returns only a hardcoded Schedule NavbarItem (previous dynamic rendering ignored); retains export const revalidate = 30. Navbar.tsx has a minor formatting change only.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A tiny renderer hops tonight,
Rows of days in tidy light,
Badges, times, and links in line,
A Schedule table, neat design.
Hooray — I nibbled bugs; all's just right! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Created Alternate Schedule Component' accurately summarizes the main objective of the PR, which is to create a new ScheduleTable component as an alternative to the ScheduleTimeline.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch HK-215

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 6, 2026

Deploying hackkit with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4b6883d
Status:🚫  Build failed.

View logs

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
apps/web/src/app/schedule/page.tsx (1)

1-1: ⚠️ Potential issue | 🟡 Minor

Unused import: ScheduleTimeline.

ScheduleTimeline is imported but no longer used after switching to ScheduleTable. Remove this dead import.

💡 Remove unused import
-import ScheduleTimeline from "../dash/schedule/schedule-timeline";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/schedule/page.tsx` at line 1, Remove the dead import of
ScheduleTimeline from the module: delete the import statement "import
ScheduleTimeline from \"../dash/schedule/schedule-timeline\";" in
apps/web/src/app/schedule/page.tsx since the component was replaced by
ScheduleTable and ScheduleTimeline is not referenced anywhere in this file.
🧹 Nitpick comments (5)
apps/web/src/app/dash/schedule/schedule-table.tsx (4)

90-103: Inconsistent time formatting between start and end times.

Start time uses "hh:mm a" (leading zero, e.g., "09:30 AM") while end time uses "h:mm a" (no leading zero, e.g., "9:30 AM"). This creates visual inconsistency.

Also, useAdditionalDayOfYearTokens on lines 95-96 is unnecessary for "hh:mm a" format since it's only relevant for D and DD tokens.

💡 Consistent time format
 	const startTimeFormatted = formatInTimeZone(
 		event.startTime,
 		userTimeZone,
-		"hh:mm a",
-		{
-			useAdditionalDayOfYearTokens: true,
-		},
+		"h:mm a",
 	);
 
 	const endTimeFormatted = formatInTimeZone(
 		event.endTime,
 		userTimeZone,
 		"h:mm a",
 	);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx` around lines 90 - 103, The
startTimeFormatted and endTimeFormatted use inconsistent format strings and an
unnecessary option: change both formatInTimeZone calls to the same time format
(e.g., "hh:mm a") so startTimeFormatted and endTimeFormatted render
consistently, and remove the useAdditionalDayOfYearTokens option from the
formatInTimeZone invocation since it’s irrelevant for time-only formats; update
the calls that reference formatInTimeZone, userTimeZone, startTimeFormatted, and
endTimeFormatted accordingly.

59-76: Unnecessary Fragment wrapper and semantic concern.

The Fragment (<>...</>) on lines 59/76 is unnecessary since there's only one child element (TableBody). Additionally, TableHeader (renders <thead>) inside TableBody (renders <tbody>) is semantically incorrect HTML, though it may still render visually.

💡 Remove unnecessary Fragment
 				{Array.from(splitByDay(schedule).entries()).map(
 					([dateID, arr]): ReactNode => (
-						<>
-							<TableBody key={dateID} className="border">
+						<TableBody key={dateID} className="border">
+							<TableRow className="flex justify-start">
+								<TableCell colSpan={2} className="m-1 p-4 text-center text-xl font-bold lg:text-4xl">
+									<p>{`${eventDateString(arr, timezone)}`}</p>
+								</TableCell>
+							</TableRow>
 							...
-							</TableBody>
-						</>
+						</TableBody>
 					),
 				)}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx` around lines 59 - 76,
Remove the unnecessary Fragment around the TableBody and fix the semantic HTML
by not placing TableHeader (which renders a thead) inside TableBody (tbody);
instead render TableHeader as a sibling above the TableBody (so put the
TableHeader that contains the date label outside the TableBody keyed by dateID)
or replace TableHeader with a semantically correct element (e.g., a
TableRow/TableCell or a non-table wrapper) inside the tbody; update the block
that maps arr to EventRow (keyed by event.id) to remain inside TableBody and
keep eventDateString, timezone, dateID and EventRow references intact.

44-48: Brittle date formatting using fixed substring length.

Slicing the last 6 characters assumes the year is always 4 digits plus ", " (e.g., ", 2026"). This could break with different locales or for years with fewer digits in edge cases.

💡 Consider using explicit format tokens
 function eventDateString(arr: Event[], timezone: string) {
-	const date = formatInTimeZone(arr[0].startTime, timezone, "PPPP");
-	const retString = date.substring(0, date.length - 6);
-	return retString;
+	// Use explicit format: "EEEE, MMMM do" produces "Saturday, March 6th"
+	return formatInTimeZone(arr[0].startTime, timezone, "EEEE, MMMM do");
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx` around lines 44 - 48, The
eventDateString function is brittle because it chops the formatted string with a
hard-coded substring; instead use explicit date-fns format tokens so the
formatter produces the exact pieces you want. Replace the substring hack in
eventDateString by calling formatInTimeZone(arr[0].startTime, timezone,
"<explicit format>") with an explicit token pattern (e.g., weekday, month and
day tokens like "EEEE, MMMM do" or whatever view you need) so the year/locale
won’t be sliced incorrectly; also ensure eventDateString handles an empty arr
before accessing arr[0].

107-108: Redundant key prop on TableRow.

The key={event.id} on TableRow is unnecessary since the parent already provides key={event.id} when rendering <EventRow> (line 69). Keys only need to be on the outermost element returned from a map callback.

💡 Remove redundant key
 		<TableRow
-			key={event.id}
 			className="flex flex-col justify-around bg-transparent px-4 pb-1 odd:bg-white/5"
 		>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx` around lines 107 - 108,
Remove the redundant key prop on the inner TableRow: the map rendering provides
key={event.id} on the outer <EventRow>, so delete key={event.id} from the
TableRow element in schedule-table.tsx (locate the TableRow JSX inside the
EventRow component or render function) to avoid duplicate/unnecessary keys while
leaving the outer EventRow key intact.
apps/web/src/components/shadcn/ui/table.tsx (1)

91-91: Global padding reduction may affect other tables.

Changing default cell padding from p-4 to p-2 affects all tables using this component. If other tables depend on the original spacing, consider passing padding via className prop on individual tables instead.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/shadcn/ui/table.tsx` at line 91, The change reduced
the default cell padding string ("p-2 align-middle
[&:has([role=checkbox])]:pr-0") which globally affects all tables; restore the
default padding to "p-4 align-middle [&:has([role=checkbox])]:pr-0" in the
TableCell (or similar cell-rendering component in
apps/web/src/components/shadcn/ui/table.tsx) and make padding overridable by
respecting a passed className/props.className (merge with the default using the
existing class merge utility or clsx) so individual Table or TableCell instances
can supply a different padding without changing the global default.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/app/dash/schedule/page.tsx`:
- Line 12: Update the placeholder heading text in the page component: locate the
h1 element with className "mx-auto my-8 w-3/4 text-8xl font-black" in the
page.tsx file and replace the debug text "Render This" with a meaningful title
such as "Schedule" so the UI shows the correct page heading.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx`:
- Around line 16-28: splitByDay currently groups events by weekday name (using
daysOfWeek[event.startTime.getDay()]) which will merge events from different
weeks; change the grouping key in splitByDay to use a full date-based key (e.g.,
event.startTime.toDateString() or event.startTime.toISOString().slice(0,10)) so
events are grouped by calendar date instead of weekday, and update any UI/header
code that reads the map key (where eventDateString is used) to display a
human-friendly formatted date from that key or directly from the first event's
startTime.

In `@apps/web/src/components/shadcn/ui/table.tsx`:
- Line 9: The wrapper div in the shared Table component (the <div
className="w-full"> inside the Table UI) was stripped of overflow handling,
which can cause page-level horizontal overflow for wide tables (used by
UserDataTable, ScheduleTable, EventDataTable, etc.); update the wrapper's
className to include overflow-x-auto (e.g., "w-full overflow-x-auto") so tables
scroll horizontally on narrow viewports, or alternatively ensure every consumer
(e.g., ScheduleTable) wraps the table with an overflow-x-auto container if you
prefer per-usage control.

In `@apps/web/src/components/shared/NavBarLinksGrouper.tsx`:
- Around line 17-21: The component builds a toRender array of enabled nav items
but the return only renders a hardcoded Schedule link; update the
NavBarLinksGrouper component to render the dynamic items alongside the Schedule
link by mapping toRender (or navLinks.items if present) to produce <NavbarItem>
elements (using the item's href/label/id) before or after the existing Schedule
<NavbarItem>, ensuring each generated item uses a stable key; keep the existing
Schedule item intact and remove the unused toRender warning.

---

Outside diff comments:
In `@apps/web/src/app/schedule/page.tsx`:
- Line 1: Remove the dead import of ScheduleTimeline from the module: delete the
import statement "import ScheduleTimeline from
\"../dash/schedule/schedule-timeline\";" in apps/web/src/app/schedule/page.tsx
since the component was replaced by ScheduleTable and ScheduleTimeline is not
referenced anywhere in this file.

---

Nitpick comments:
In `@apps/web/src/app/dash/schedule/schedule-table.tsx`:
- Around line 90-103: The startTimeFormatted and endTimeFormatted use
inconsistent format strings and an unnecessary option: change both
formatInTimeZone calls to the same time format (e.g., "hh:mm a") so
startTimeFormatted and endTimeFormatted render consistently, and remove the
useAdditionalDayOfYearTokens option from the formatInTimeZone invocation since
it’s irrelevant for time-only formats; update the calls that reference
formatInTimeZone, userTimeZone, startTimeFormatted, and endTimeFormatted
accordingly.
- Around line 59-76: Remove the unnecessary Fragment around the TableBody and
fix the semantic HTML by not placing TableHeader (which renders a thead) inside
TableBody (tbody); instead render TableHeader as a sibling above the TableBody
(so put the TableHeader that contains the date label outside the TableBody keyed
by dateID) or replace TableHeader with a semantically correct element (e.g., a
TableRow/TableCell or a non-table wrapper) inside the tbody; update the block
that maps arr to EventRow (keyed by event.id) to remain inside TableBody and
keep eventDateString, timezone, dateID and EventRow references intact.
- Around line 44-48: The eventDateString function is brittle because it chops
the formatted string with a hard-coded substring; instead use explicit date-fns
format tokens so the formatter produces the exact pieces you want. Replace the
substring hack in eventDateString by calling formatInTimeZone(arr[0].startTime,
timezone, "<explicit format>") with an explicit token pattern (e.g., weekday,
month and day tokens like "EEEE, MMMM do" or whatever view you need) so the
year/locale won’t be sliced incorrectly; also ensure eventDateString handles an
empty arr before accessing arr[0].
- Around line 107-108: Remove the redundant key prop on the inner TableRow: the
map rendering provides key={event.id} on the outer <EventRow>, so delete
key={event.id} from the TableRow element in schedule-table.tsx (locate the
TableRow JSX inside the EventRow component or render function) to avoid
duplicate/unnecessary keys while leaving the outer EventRow key intact.

In `@apps/web/src/components/shadcn/ui/table.tsx`:
- Line 91: The change reduced the default cell padding string ("p-2 align-middle
[&:has([role=checkbox])]:pr-0") which globally affects all tables; restore the
default padding to "p-4 align-middle [&:has([role=checkbox])]:pr-0" in the
TableCell (or similar cell-rendering component in
apps/web/src/components/shadcn/ui/table.tsx) and make padding overridable by
respecting a passed className/props.className (merge with the default using the
existing class merge utility or clsx) so individual Table or TableCell instances
can supply a different padding without changing the global default.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 30e7f492-c143-4620-a03c-0d7bcdf41d03

📥 Commits

Reviewing files that changed from the base of the PR and between 105d85c and 38e9af1.

📒 Files selected for processing (6)
  • apps/web/src/app/dash/schedule/page.tsx
  • apps/web/src/app/dash/schedule/schedule-table.tsx
  • apps/web/src/app/schedule/page.tsx
  • apps/web/src/components/shadcn/ui/table.tsx
  • apps/web/src/components/shared/NavBarLinksGrouper.tsx
  • apps/web/src/components/shared/Navbar.tsx

return (
<>
<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Schedule</h1>
<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Render This</h1>
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Placeholder text "Render This" should be updated.

The heading "Render This" appears to be debug/placeholder text. This should be updated to an appropriate title like "Schedule" before merging.

💡 Fix placeholder text
-			<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Render This</h1>
+			<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Schedule</h1>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Render This</h1>
<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Schedule</h1>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/page.tsx` at line 12, Update the placeholder
heading text in the page component: locate the h1 element with className
"mx-auto my-8 w-3/4 text-8xl font-black" in the page.tsx file and replace the
debug text "Render This" with a meaningful title such as "Schedule" so the UI
shows the correct page heading.

Comment on lines +16 to +28
function splitByDay(schedule: Event[]) {
const days: Map<string, Event[]> = new Map<string, Event[]>();
schedule.forEach((event) => {
const day = daysOfWeek[event.startTime.getDay()];

if (days.get(day)) {
days.get(day)?.push(event);
} else {
days.set(day, [event]);
}
});
return days;
}
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Grouping by day name may merge events from different weeks.

Using only the day name (e.g., "Saturday") as the grouping key means events from different weeks with the same weekday would be incorrectly merged. The eventDateString header would only show the first event's date.

If events span multiple weeks, consider using a date-based key instead:

💡 Suggested fix using full date as key
 function splitByDay(schedule: Event[]) {
 	const days: Map<string, Event[]> = new Map<string, Event[]>();
 	schedule.forEach((event) => {
-		const day = daysOfWeek[event.startTime.getDay()];
+		// Use ISO date string as key to avoid merging same weekday from different weeks
+		const day = event.startTime.toISOString().split('T')[0];
 
 		if (days.get(day)) {
 			days.get(day)?.push(event);
 		} else {
 			days.set(day, [event]);
 		}
 	});
 	return days;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function splitByDay(schedule: Event[]) {
const days: Map<string, Event[]> = new Map<string, Event[]>();
schedule.forEach((event) => {
const day = daysOfWeek[event.startTime.getDay()];
if (days.get(day)) {
days.get(day)?.push(event);
} else {
days.set(day, [event]);
}
});
return days;
}
function splitByDay(schedule: Event[]) {
const days: Map<string, Event[]> = new Map<string, Event[]>();
schedule.forEach((event) => {
// Use ISO date string as key to avoid merging same weekday from different weeks
const day = event.startTime.toISOString().split('T')[0];
if (days.get(day)) {
days.get(day)?.push(event);
} else {
days.set(day, [event]);
}
});
return days;
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/dash/schedule/schedule-table.tsx` around lines 16 - 28,
splitByDay currently groups events by weekday name (using
daysOfWeek[event.startTime.getDay()]) which will merge events from different
weeks; change the grouping key in splitByDay to use a full date-based key (e.g.,
event.startTime.toDateString() or event.startTime.toISOString().slice(0,10)) so
events are grouped by calendar date instead of weekday, and update any UI/header
code that reads the map key (where eventDateString is used) to display a
human-friendly formatted date from that key or directly from the first event's
startTime.

React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="w-full overflow-auto">
<div className="w-full">
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's check the file structure and see the actual changes
fd "table.tsx" --type f -x wc -l {}

Repository: acmutsa/HackKit

Length of output: 286


🏁 Script executed:

# Find all usages of the Table component
rg -l "import.*Table.*from.*shadcn/ui/table" --type=tsx --type=ts

Repository: acmutsa/HackKit

Length of output: 86


🏁 Script executed:

# Let's examine the actual table.tsx file to understand the context
cat -n apps/web/src/components/shadcn/ui/table.tsx

Repository: acmutsa/HackKit

Length of output: 3562


🏁 Script executed:

# Check the UserDataTable to see if it handles overflow
head -n 50 apps/web/src/components/admin/users/UserDataTable.tsx

Repository: acmutsa/HackKit

Length of output: 1208


🏁 Script executed:

# Check the ScheduleTable to see if it handles overflow
head -n 50 apps/web/src/app/dash/schedule/schedule-table.tsx

Repository: acmutsa/HackKit

Length of output: 1149


🏁 Script executed:

# Check the EventDataTable to see if it handles overflow
head -n 50 apps/web/src/components/events/shared/EventDataTable.tsx

Repository: acmutsa/HackKit

Length of output: 1060


🏁 Script executed:

# Search for overflow handling in the codebase around these tables
rg "overflow-auto|overflow-x" --type ts -A 2 -B 2 | head -50

Repository: acmutsa/HackKit

Length of output: 4916


🏁 Script executed:

# Let's see more of the EventDataTable to check for overflow handling
cat -n apps/web/src/components/events/shared/EventDataTable.tsx

Repository: acmutsa/HackKit

Length of output: 2428


🏁 Script executed:

# Let's see the complete ScheduleTable to check for overflow handling
cat -n apps/web/src/app/dash/schedule/schedule-table.tsx

Repository: acmutsa/HackKit

Length of output: 4567


🏁 Script executed:

# Check if there are any parent containers with overflow handling wrapping these tables
rg "overflow-auto|overflow-x" -B 5 -A 5 apps/web/src/components/admin/users/UserDataTable.tsx apps/web/src/app/dash/schedule/schedule-table.tsx apps/web/src/components/events/shared/EventDataTable.tsx

Repository: acmutsa/HackKit

Length of output: 41


🏁 Script executed:

# Check where these table components are actually used (not just imported)
rg "<Table|<UserDataTable|<ScheduleTable|<EventDataTable" --type ts -B 3 -A 3

Repository: acmutsa/HackKit

Length of output: 12847


🏁 Script executed:

# Check if parent pages have overflow handling
cat -n apps/web/src/app/schedule/page.tsx | head -30

Repository: acmutsa/HackKit

Length of output: 982


🏁 Script executed:

# Check the admin pages that use UserDataTable
fd "page.tsx" "apps/web/src/app/admin" -x cat -n {} \; | head -100

Repository: acmutsa/HackKit

Length of output: 4262


🏁 Script executed:

# Let's specifically check what wraps the UserDataTable
rg -B 10 -A 2 "UserDataTable" apps/web/src/app/admin/users/page.tsx

Repository: acmutsa/HackKit

Length of output: 291


🏁 Script executed:

# Let's check the full page.tsx for users admin page to see the full context
cat -n apps/web/src/app/admin/users/page.tsx

Repository: acmutsa/HackKit

Length of output: 2277


Removing overflow-auto from the Table wrapper may cause horizontal overflow on narrow viewports.

This is a shared component used across the app (UserDataTable, ScheduleTable, EventDataTable, and others). Without overflow handling, tables with wide content will cause page-level horizontal overflow instead of scrolling. The ScheduleTable is particularly vulnerable—it uses w-[99vw] with no overflow constraint. Add overflow-x-auto to the wrapper div or ensure each table usage has proper overflow handling.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/shadcn/ui/table.tsx` at line 9, The wrapper div in
the shared Table component (the <div className="w-full"> inside the Table UI)
was stripped of overflow handling, which can cause page-level horizontal
overflow for wide tables (used by UserDataTable, ScheduleTable, EventDataTable,
etc.); update the wrapper's className to include overflow-x-auto (e.g., "w-full
overflow-x-auto") so tables scroll horizontally on narrow viewports, or
alternatively ensure every consumer (e.g., ScheduleTable) wraps the table with
an overflow-x-auto container if you prefer per-usage control.

Comment on lines +17 to +21
return <>
<NavbarItem link={"/schedule"}>
Schedule
</NavbarItem>
</>;
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical: Dynamic nav items are fetched but never rendered.

The toRender array (lines 7-16) accumulates all enabled nav items from Redis but is completely ignored. The return statement only renders a hardcoded "Schedule" link, dropping all admin-configured navigation items.

Compare with MobileNavBarLinks.tsx (lines 11-22) which correctly renders navLinks.items. This creates an inconsistency where mobile nav shows dynamic items but desktop nav only shows "Schedule".

🐛 Proposed fix to render dynamic items alongside Schedule
-	return <>
-	<NavbarItem link={"/schedule"}>
-		Schedule
-	</NavbarItem>
-	</>;
+	return (
+		<>
+			{toRender}
+			<NavbarItem link={"/schedule"}>
+				Schedule
+			</NavbarItem>
+		</>
+	);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
return <>
<NavbarItem link={"/schedule"}>
Schedule
</NavbarItem>
</>;
return (
<>
{toRender}
<NavbarItem link={"/schedule"}>
Schedule
</NavbarItem>
</>
);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/shared/NavBarLinksGrouper.tsx` around lines 17 - 21,
The component builds a toRender array of enabled nav items but the return only
renders a hardcoded Schedule link; update the NavBarLinksGrouper component to
render the dynamic items alongside the Schedule link by mapping toRender (or
navLinks.items if present) to produce <NavbarItem> elements (using the item's
href/label/id) before or after the existing Schedule <NavbarItem>, ensuring each
generated item uses a stable key; keep the existing Schedule item intact and
remove the unused toRender warning.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/app/schedule/page.tsx`:
- Around line 4-6: Run Prettier to fix formatting issues in this module:
reformat the import block and surrounding code where getRequestContext and
ScheduleTable are imported/used and any nearby JSX references to the schedule
page (the areas around the import statements and the JSX that renders the
schedule table), then stage the changed file so CI formatting checks pass.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 18d1004f-74a8-4a3a-b009-d45362b2bde3

📥 Commits

Reviewing files that changed from the base of the PR and between 38e9af1 and 4b6883d.

📒 Files selected for processing (4)
  • apps/web/src/app/dash/schedule/page.tsx
  • apps/web/src/app/schedule/page.tsx
  • apps/web/src/components/shared/NavBarLinksGrouper.tsx
  • apps/web/src/components/shared/Navbar.tsx
✅ Files skipped from review due to trivial changes (1)
  • apps/web/src/components/shared/Navbar.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/web/src/components/shared/NavBarLinksGrouper.tsx
  • apps/web/src/app/dash/schedule/page.tsx

Comment on lines +4 to +6
import { getRequestContext } from "@cloudflare/next-on-pages";

import ScheduleTable from "../dash/schedule/schedule-table";
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Run Prettier before merge.

CI is already failing the formatting check on this file, so these edits need to be reformatted before the branch can go green.

Also applies to: 14-15, 20-20

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/schedule/page.tsx` around lines 4 - 6, Run Prettier to fix
formatting issues in this module: reformat the import block and surrounding code
where getRequestContext and ScheduleTable are imported/used and any nearby JSX
references to the schedule page (the areas around the import statements and the
JSX that renders the schedule table), then stage the changed file so CI
formatting checks pass.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant