Skip to content

Feat/updated dashboard #335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
michelleyeoh merged 8 commits into from
Sep 1, 2025
Merged

Feat/updated dashboard #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
82a766b
Updated UI of Dashboard
haylietan Aug 14, 2025
bebcc1a
Update "Score and Shortlist" UI
haylietan Aug 14, 2025
2d86394
UI For Scroll (removed my mock data)
haylietan Aug 14, 2025
c808915
Update RankTeamsUI.tsx
haylietan Aug 14, 2025
58ab4f4
Moved "Best Hack for Social Good" under optedHDTracks
haylietan Aug 14, 2025
be33d5d
Fixed formatting + build errors
haylietan Aug 17, 2025
85df28a
Revert "Fixed formatting + build errors"
haylietan Aug 17, 2025
2f098c5
Build errors part 2 TT
haylietan Aug 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 30 additions & 23 deletions app/(pages)/admin/_components/RankTeams/RankTeamsUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,17 +395,19 @@ export default function RankTeamsUI() {
className="w-full"
onValueChange={(value) => setActiveTrack(value)}
>
<TabsList className="flex overflow-x-auto gap-2 mb-4">
{trackNames.map((trackName) => (
<TabsTrigger
key={trackName}
value={trackName}
className="px-3 py-2"
>
{trackName}
</TabsTrigger>
))}
</TabsList>
<div className="overflow-x-auto -mx-6 px-6">
<TabsList className="flex w-max gap-2 h-auto min-h-[3rem] p-4 bg-muted rounded-lg">
{trackNames.map((trackName) => (
<TabsTrigger
key={trackName}
value={trackName}
className="px-4 py-3 whitespace-nowrap flex-shrink-0 min-w-fit text-sm font-medium rounded-md"
>
{trackName}
</TabsTrigger>
))}
</TabsList>
</div>

{trackNames.map((trackName) => (
<TabsContent key={trackName} value={trackName} className="space-y-4">
Expand All @@ -427,9 +429,9 @@ export default function RankTeamsUI() {
return (
<div
key={result.team.team_id}
className="flex items-start gap-4 p-4 border rounded-lg"
className="flex items-start gap-4 p-4 border rounded-lg hover:shadow-md transition-shadow"
>
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-800 font-bold rounded-full flex items-center justify-center">
<div className="flex-shrink-0 w-10 h-10 bg-blue-100 text-blue-800 font-bold rounded-full flex items-center justify-center text-lg">
{index + 1}
</div>
<div className="flex-grow">
Expand All @@ -448,7 +450,10 @@ export default function RankTeamsUI() {
)}
</div>
<div className="flex flex-col items-end gap-1">
<Badge variant="secondary">
<Badge
variant="secondary"
className="text-lg px-3 py-1"
>
Score: {result.team.final_score.toFixed(2)}
</Badge>
<Badge variant="outline" className="text-xs">
Expand All @@ -461,20 +466,20 @@ export default function RankTeamsUI() {
</div>

{questions.length > 0 && (
<div className="mt-3">
<p className="text-sm font-medium text-gray-700">
<div className="mt-4">
<p className="text-sm font-medium text-gray-700 mb-2">
Question Scores:
</p>
<div className="mt-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
{questions.map((question) => (
<div
key={question}
className="text-sm p-2 bg-gray-50 rounded flex justify-between"
className="text-sm p-3 bg-gray-50 rounded-lg flex justify-between items-center"
>
<span className="font-medium">
{question}:
</span>
<span>
<span className="font-bold text-blue-600">
{questionScores[question] || 0}
</span>
</div>
Expand All @@ -484,17 +489,19 @@ export default function RankTeamsUI() {
)}

{result.team.comments.length > 0 && (
<div className="mt-3">
<p className="text-sm font-medium text-gray-700">
<div className="mt-4">
<p className="text-sm font-medium text-gray-700 mb-2">
Judge Comments:
</p>
<ul className="mt-2 space-y-2">
{result.team.comments.map((comment, i) => (
<li
key={i}
className="text-sm p-2 bg-gray-50 rounded"
className="text-sm p-3 bg-blue-50 rounded-lg border-l-4 border-blue-200"
>
"{comment}"
<span className="italic">
"{comment}"
</span>
</li>
))}
</ul>
Expand All @@ -505,7 +512,7 @@ export default function RankTeamsUI() {
);
})
) : (
<p className="text-gray-500">
<p className="text-gray-500 text-center py-8">
No teams ranked for this track yet.
</p>
)}
Expand Down
90 changes: 0 additions & 90 deletions app/(pages)/admin/dashboard/page.tsx
View file
Open in desktop

This file was deleted.

0 app/(pages)/admin/dashboard/page.module.scss → app/(pages)/admin/page.module.scss
View file
Open in desktop
File renamed without changes.
105 changes: 92 additions & 13 deletions app/(pages)/admin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,98 @@
'use client';
import styles from './page.module.scss';

import Link from 'next/link';
import JudgingProgress from './_components/JudgingProgress/JudgingProgress';

const action_links = [
{
href: '/admin/csv',
body: 'Import Teams with CSV',
},
{
href: '/admin/match',
body: 'Assign Judges to Teams',
},
{
href: '/admin/score',
body: 'Score and Shortlist',
},
{
href: '/admin/panels',
body: 'Create Panels',
},
{
href: '/admin/invite-link',
body: 'Invite Judges',
},
{
href: '/admin/randomize-projects',
body: 'Randomize Projects',
},
{
href: '/admin/announcements',
body: 'Announcements',
},
];

const data_links = [
{
href: '/admin/teams',
body: 'View Teams',
},
{
href: '/admin/judges',
body: 'View Judges',
},
{
href: '/admin/rollouts',
body: 'View Rollouts',
},
];

export default function Admin() {
export default function Dashboard() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<Link href="/admin/dashboard">Dashboard</Link>
<Link href="/admin/csv">Import Teams with CSV</Link>
<Link href="/admin/match">Group Judges and Teams</Link>
<Link href="/admin/panels">Create Panels</Link>
<Link href="/admin/invite-link">Invite Users</Link>
<Link href="/admin/score">Score and Shortlist</Link>
<Link href="/admin/randomize-projects">Randomize Projects</Link>
<Link href="/admin/announcements">Announcements</Link>
<Link href="/admin/rollouts">Rollouts</Link>
<Link href="/admin/judges">View Judges</Link>
<Link href="/admin/teams">View Teams</Link>
<div className={styles.page_container}>
<div className={styles.dashboard_container}>
<div className={styles.overview_container}>
<div className={styles.navigation}>
<h2>Navigation</h2>
<div className={styles.navigation_flex}>
<div className={styles.action_links}>
{action_links.map(({ href, body }) => (
<Link
key={JSON.stringify({ href, body })}
href={href}
className={styles.action_link}
>
{body}
</Link>
))}
</div>
<div className={styles.data_links}>
{data_links.map(({ href, body }) => (
<Link
key={JSON.stringify({ href, body })}
href={href}
className={styles.data_link}
>
{body}
</Link>
))}
</div>
</div>
</div>
<hr></hr>
<h2>Overview</h2>
<div className={styles.scoring_progress_container}>
<JudgingProgress />
</div>
</div>
<div className={styles.divider} />
<div className={styles.problems_container}>
<h2>Problems</h2>
</div>
</div>
</div>
);
}
16 changes: 8 additions & 8 deletions app/_data/tracks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,6 @@ const nonHDTracks: Tracks = {
};

const automaticTracks: Tracks = {
'Best Hack for Social Good': {
name: 'Best Hack for Social Good',
filter: 'General',
prizes: ['IPad', 'JBL Speaker'],
images: [ipad, jblSpeaker],
eligibility_criteria:
'Encapsulate your authentic idea of "social good". All entries are automatically considered for this prize category.',
},
"Hacker's Choice Award": {
name: "Hacker's Choice Award",
filter: 'General',
Expand All @@ -159,6 +151,14 @@ const automaticTracks: Tracks = {
};

const optedHDTracks: Tracks = {
'Best Hack for Social Good': {
name: 'Best Hack for Social Good',
filter: 'General',
prizes: ['IPad', 'JBL Speaker'],
images: [ipad, jblSpeaker],
eligibility_criteria:
'Encapsulate your authentic idea of "social good". All entries are automatically considered for this prize category.',
},
'Most Technically Challenging Hack': {
name: 'Most Technically Challenging Hack',
filter: 'Technical',
Expand Down
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@
"@mui/material": "^5.15.4",
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-slot": "^1.1.2",
"@szhsin/react-accordion": "^1.4.0",
"@radix-ui/react-tooltip": "^1.1.8",
"@radix-ui/react-tabs": "^1.1.3",
"@radix-ui/react-tooltip": "^1.1.8",
"@szhsin/react-accordion": "^1.4.0",
"bcryptjs": "^2.4.3",
"chart.js": "^4.4.9",
"class-variance-authority": "^0.7.1",
Expand Down