Merge pull request #25 from Hack-Canada/development

WIP: Client app — shadcn UI + Neon Postgres

Author: faizm10

.DS_Store

@@ -0,0 +1 @@
+.cursor/

.gitignore

@@ -2,7 +2,6 @@
 
 # dependencies
 /node_modules
-package-lock.json
 /.pnp
 .pnp.*
 .yarn/*
@@ -33,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+.env.local
 
 # vercel
 .vercel
@@ -41,5 +41,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-#env
-.env.local
+/scripts

frontend/.gitignore client/.gitignorefrontend/.gitignore renamed to client/.gitignore

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

client/AGENTS.md

@@ -0,0 +1 @@
+@AGENTS.md

client/CLAUDE.md

@@ -18,40 +18,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Fredoka](https://fonts.google.com/specimen/Fredoka) and [Rubik](https://fonts.google.com/specimen/Rubik) fonts from Google Fonts.
-
-## Pre-commit hooks
-
-The repo uses [pre-commit](https://pre-commit.com/) to run checks before each commit. The config lives in the **project root** (`.pre-commit-config.yaml`) and currently runs [Gitleaks](https://github.com/gitleaks/gitleaks) to scan for secrets.
-
-**If you want to use it:**
-
-1. Install the pre-commit dependency (from the **repo root**, not the frontend folder):
-
-   ```bash
-   cd ..   # if you're in frontend/
-   pip install -r requirements-dev.txt
-   ```
-
-   Or install pre-commit directly:
-
-   ```bash
-   pip install pre-commit
-   ```
-
-2. Install the git hooks (from the repo root):
-
-   ```bash
-   pre-commit install
-   ```
-
-3. After that, every `git commit` will run the hooks automatically. To run them once without committing:
-
-   ```bash
-   pre-commit run --all-files
-   ```
-
-The first run may take a minute while pre-commit downloads the Gitleaks environment; later runs are fast.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More
 

frontend/README.md client/README.mdfrontend/README.md renamed to client/README.md

@@ -0,0 +1,28 @@
+import { AdminNav } from "@/components/admin/admin-nav";
+import { Toaster } from "@/components/ui/sonner";
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-full flex-1 flex-col bg-background text-foreground">
+      <header className="border-b bg-card">
+        <div className="mx-auto w-full max-w-6xl px-6 py-4">
+          <div className="mb-3 flex items-baseline gap-3">
+            <h1 className="text-lg font-semibold tracking-tight">Admin</h1>
+            <span className="text-sm text-muted-foreground">
+              HackCanada Judging Platform
+            </span>
+          </div>
+          <AdminNav />
+        </div>
+      </header>
+      <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-8">
+        {children}
+      </main>
+      <Toaster />
+    </div>
+  );
+}

client/app/admin/layout.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminPage() {
+  redirect("/admin/stats");
+}

client/app/admin/page.tsx

@@ -0,0 +1,38 @@
+import { getProjects } from "@/lib/queries";
+import {
+  seedScheduleIfEmpty,
+  getScheduleSlots,
+  DEFAULT_ROOMS,
+} from "@/lib/schedule";
+import { ScheduleManager } from "@/components/admin/schedule-manager";
+
+export const metadata = { title: "Admin · Schedule" };
+
+export default async function SchedulePage() {
+  const projects = await getProjects();
+  // Seed the schedule from the derived draft on first visit, then read it back.
+  await seedScheduleIfEmpty(projects);
+  const slots = await getScheduleSlots();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight">
+          Schedule manager
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          Override pitch times, add delays, and search across all projects.
+        </p>
+      </div>
+      <ScheduleManager
+        initialSlots={slots}
+        rooms={DEFAULT_ROOMS}
+        projects={projects.map((p) => ({
+          id: p.id,
+          name: p.project_name,
+          track: p.tracks[0] ?? "General",
+        }))}
+      />
+    </div>
+  );
+}

client/app/admin/schedule/page.tsx

@@ -0,0 +1,133 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { FolderGit2, Users, LinkIcon, UsersRound, Tags } from "lucide-react";
+import {
+  getSubmissionStats,
+  getTrackCounts,
+  getTeamSizeDistribution,
+  getSubmissionTimeline,
+} from "@/lib/queries";
+import { TrackChart, TimelineChart, TeamSizeChart } from "@/components/admin/charts";
+
+export const metadata = { title: "Admin · Stats" };
+
+function StatCard({
+  label,
+  value,
+  hint,
+  icon: Icon,
+}: {
+  label: string;
+  value: string | number;
+  hint?: string;
+  icon: React.ComponentType<{ className?: string }>;
+}) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
+        <Icon className="size-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-semibold tracking-tight">{value}</div>
+        {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default async function StatsPage() {
+  const [stats, tracks, teamSizes, timeline] = await Promise.all([
+    getSubmissionStats(),
+    getTrackCounts(),
+    getTeamSizeDistribution(),
+    getSubmissionTimeline(),
+  ]);
+
+  const devpostPct =
+    stats.totalProjects > 0
+      ? Math.round((stats.withDevpost / stats.totalProjects) * 100)
+      : 0;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight">Submission stats</h2>
+        <p className="text-sm text-muted-foreground">
+          Live from the submissions database.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        <StatCard label="Projects" value={stats.totalProjects} icon={FolderGit2} />
+        <StatCard label="Hackers" value={stats.totalHackers} hint="across all teams" icon={Users} />
+        <StatCard
+          label="Avg team size"
+          value={stats.avgTeamSize}
+          hint="members per project"
+          icon={UsersRound}
+        />
+        <StatCard label="Tracks" value={stats.distinctTracks} hint="distinct tracks entered" icon={Tags} />
+        <StatCard
+          label="Devpost links"
+          value={`${devpostPct}%`}
+          hint={`${stats.withDevpost} of ${stats.totalProjects} projects`}
+          icon={LinkIcon}
+        />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Projects per track</CardTitle>
+            <CardDescription>Top tracks by number of submissions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TrackChart data={tracks} />
+          </CardContent>
+        </Card>
+
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Submissions over time</CardTitle>
+              <CardDescription>Cumulative submissions by hour</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TimelineChart data={timeline} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Team sizes</CardTitle>
+              <CardDescription>Projects by number of members</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <TeamSizeChart data={teamSizes} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            All tracks
+            <Badge variant="secondary">{tracks.length}</Badge>
+          </CardTitle>
+          <CardDescription>Full breakdown, including smaller tracks</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {tracks.map((t) => (
+              <Badge key={t.track} variant="outline" className="font-normal">
+                {t.track}
+                <span className="ml-1.5 text-muted-foreground">{t.count}</span>
+              </Badge>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}