Skip to content

FE-Admin-Shell - #58

Merged
natphua merged 11 commits into
mainfrom
FE-admin-shell
Nov 11, 2026
Merged

natphua merged 11 commits into
mainfrom
FE-admin-shell

Conversation

@jeremiahlongino

@jeremiahlongino jeremiahlongino commented Nov 11, 2026 •

Copy link
Copy Markdown
Collaborator

Describe your changes

Me and @cartier37 worked on making the admin tabs for the admin profile view.

isActiveTab makes sure every tab click stays on the selected tab even on reload.

Every tab has a page related to it but just placeholders for now.

The tabs will naturally move down to the center when profile section is added but for now functionality is completely there.

On phone only the AdminTab bar moves left and right.

Related Issue

Closes #42

Files Changed:

  • /(protected)/page.tsx: Changed to always redirect to /admin/applicants whenever first signing in and typing in /admin again

Files Added:

  • admin-tabs.ts: Admin Tabs list
  • admin-tabs.test.ts: Jest tests for admin-tabs
  • /(dashboard)/layout.tsx`: Layout used for the four tab pages. Puts AdminTabs above the page with placeholders below
  • /(dashboard)/applicants/page.tsx: Calls requireAdminPage() and shows a heading and "Coming soon."
  • /(dashboard)/volunteers/page.tsx: Calls requireAdminPage() and shows a heading and "Coming soon."
  • /(dashboard)/edits/page.tsx: Calls requireAdminPage() and shows a heading and "Coming soon."
  • /(dashboard)/scheduling/page.tsx: Calls requireAdminPage() and shows a heading and "Coming soon."

How to test

npm run dev

  • Go to /admin after signing in and should automatically go to /applicants.
  • Tab through every other tab and press 'Enter' to go to the new tab.
  • Re-type /admin into url to be redirected to /applicants automatically.

Screenshots

image image image image image

Notes

The top bar's "Damien's Food Pantry" text wraps onto two lines on phones. That comes from the protected layout, which this ticket doesn't change.

Estimated Hours Spent

4.67

Checklist before requesting a review

  • Satisfies all Deliverables
  • Tested thoroughly
  • No unused dependencies
  • Requested review from Natalie

jeremiahlongino and others added 10 commits November 6, 2026 15:17
Sign in successful redirected to Applicants page with other placeholder pages.
Adding the profile section later makes the tabs section go to the middle, for now since we don't know the dimensions of those everything works fine.

Added redirect to the AdminDashboardPage.

Made Admin Tabs a little faster by doing a const of the isActiveTab.

Also ran Prettier on everything.
Slightly better but have to get design insights from the bosses.

@natphua natphua left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Amazing work guys! Thanks for being thorough about the tabs and layout.tsx stuff, I know it can get confusing sometimes. Everything looks great, and keep up the good work 😁

{ label: "Edits", href: "/admin/edits" },
];

// TODO: function contract

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

You forgot function contract and file header here 😔

Small so I will add it in myself but look over everything next time!

@natphua
natphua merged commit 6ba8544 into main Nov 11, 2026
2 of 4 checks passed
@natphua
natphua deleted the FE-admin-shell branch November 11, 2026 14:32
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.

FE: Admin Dashboard Shell

3 participants