implemented

Author: Edwin Chan

.github/workflows/ci.yml

@@ -9,13 +9,70 @@ on:
 jobs:
   verify:
     runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_DB: dbsmo
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_USER: postgres
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+    env:
+      AUTH_DEV_BYPASS: "true"
+      DATABASE_URL: postgresql://postgres:postgres@localhost:5432/dbsmo?schema=public
+      GOOGLE_CLIENT_ID: ""
+      GOOGLE_CLIENT_SECRET: ""
+      LOCAL_STORAGE_ROOT: ./storage
+      NEXTAUTH_SECRET: ci-only-nextauth-secret
+      NEXTAUTH_URL: http://localhost:3001
+      SCHOOL_EMAIL_DOMAINS: g.dbs.edu.hk
+      STORAGE_DRIVER: local
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: npm
+      - uses: astral-sh/setup-uv@v5
       - run: npm ci
+      - run: npx prisma migrate deploy
+      - run: npm run db:seed
       - run: npm run lint
       - run: npm run typecheck
       - run: npm run test
+      - run: npm run build
+      - run: python3 -m py_compile tests/browser_harness_smoke.py
+      - name: Browser harness E2E
+        run: |
+          git clone https://github.com/browser-use/browser-harness /tmp/browser-harness
+          uv tool install -e /tmp/browser-harness
+          export PATH="$HOME/.local/bin:$PATH"
+
+          npm run dev -- --port 3001 > /tmp/dbsmo-next.log 2>&1 &
+          SERVER_PID=$!
+
+          CHROME_BIN="$(command -v google-chrome || command -v chromium-browser || command -v chromium)"
+          "$CHROME_BIN" --headless=new --no-sandbox --disable-gpu --remote-debugging-port=9222 --user-data-dir=/tmp/dbsmo-chrome about:blank > /tmp/dbsmo-chrome.log 2>&1 &
+          CHROME_PID=$!
+
+          cleanup() {
+            kill "$SERVER_PID" "$CHROME_PID" 2>/dev/null || true
+          }
+          trap cleanup EXIT
+
+          for _ in {1..90}; do
+            if curl -fsS http://localhost:3001 >/dev/null 2>&1; then
+              break
+            fi
+            sleep 1
+          done
+          curl -fsS http://localhost:3001 >/dev/null
+
+          BU_NAME=dbsmo-ci BU_CDP_URL=http://127.0.0.1:9222 BASE_URL=http://localhost:3001 browser-harness -c 'exec(open("tests/browser_harness_smoke.py").read())'
+          fi

app/admin/analytics/page.tsx

@@ -1,14 +1,19 @@
 import Link from "next/link";
 import { ArrowLeft, Download, Flame } from "lucide-react";
 import { Prisma } from "@prisma/client";
+import { getServerSession } from "next-auth/next";
+import { redirect } from "next/navigation";
 import { prisma } from "@/lib/db";
+import { authOptions } from "@/lib/auth";
 import { computeTopicAccuracy, computeQuestionStats, accuracyLevel } from "@/lib/analytics";
 import { normalizeTagList } from "@/lib/problem-tags";
+import { hasPermission } from "@/lib/permissions";
 
 export const dynamic = "force-dynamic";
 
 type AnalyticsSearchParams = Promise<{
   from?: string;
+  group?: string;
   set?: string;
   student?: string;
   to?: string;
@@ -30,6 +35,10 @@ export default async function AnalyticsOverviewPage({
 }: {
   searchParams?: AnalyticsSearchParams;
 }) {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.id) redirect("/");
+  if (!hasPermission(session.user.role, "admin:analytics")) redirect("/dashboard");
+
   const params = (await searchParams) ?? {};
   const fromDate = parseDateParam(params.from);
   const toDate = parseDateParam(params.to, true);
@@ -38,15 +47,21 @@ export default async function AnalyticsOverviewPage({
     prisma.problemSet.findMany({ select: { id: true, title: true, slug: true } }),
     prisma.user.findMany({
       where: { role: "STUDENT" },
-      select: { id: true, name: true, email: true, displayName: true },
+      select: { id: true, name: true, email: true, displayName: true, group: true },
       orderBy: { name: "asc" },
     }),
     prisma.problem.findMany({ select: { topicTags: true } }),
   ]);
 
   const selectedSet = problemSets.find((set) => set.slug === params.set) ?? null;
   const selectedTopic = params.topic?.trim() || "";
+  const selectedGroup = params.group?.trim() || "";
   const selectedStudent = students.find((student) => student.id === params.student) ?? null;
+  const groupOptions = Array.from(
+    new Set(
+      students.map((student) => student.group).filter((group): group is string => Boolean(group)),
+    ),
+  ).sort((a, b) => a.localeCompare(b));
   const topicOptions = normalizeTagList(allProblems.flatMap((problem) => problem.topicTags)).sort(
     (a, b) => a.localeCompare(b),
   );
@@ -58,10 +73,11 @@ export default async function AnalyticsOverviewPage({
 
   const responseWhere: Prisma.ResponseWhereInput = {
     ...(Object.keys(problemWhere).length > 0 ? { problem: problemWhere } : {}),
-    ...(selectedStudent || fromDate || toDate
+    ...(selectedStudent || selectedGroup || fromDate || toDate
       ? {
           attempt: {
             ...(selectedStudent ? { userId: selectedStudent.id } : {}),
+            ...(selectedGroup ? { user: { group: selectedGroup } } : {}),
             ...(fromDate || toDate
               ? {
                   submittedAt: {
@@ -78,6 +94,7 @@ export default async function AnalyticsOverviewPage({
   const attemptWhere: Prisma.AttemptWhereInput = {
     ...(selectedSet ? { problemSetId: selectedSet.id } : {}),
     ...(selectedStudent ? { userId: selectedStudent.id } : {}),
+    ...(selectedGroup ? { user: { group: selectedGroup } } : {}),
     ...(fromDate || toDate
       ? {
           submittedAt: {
@@ -186,6 +203,31 @@ export default async function AnalyticsOverviewPage({
     })
     .filter((question) => question.reasons.length > 0)
     .slice(0, 6);
+  const trendBuckets = new Map<string, { attempts: number; completions: number }>();
+  const trendNow = new Date();
+  for (let offset = 5; offset >= 0; offset--) {
+    const start = new Date(trendNow);
+    start.setDate(start.getDate() - offset * 7);
+    const key = `${start.getMonth() + 1}/${start.getDate()}`;
+    trendBuckets.set(key, { attempts: 0, completions: 0 });
+  }
+  for (const attempt of attempts) {
+    const ageDays = Math.floor((trendNow.getTime() - attempt.submittedAt.getTime()) / 86_400_000);
+    if (ageDays < 0 || ageDays > 41) continue;
+    const bucketStart = new Date(trendNow);
+    bucketStart.setDate(bucketStart.getDate() - Math.floor(ageDays / 7) * 7);
+    const key = `${bucketStart.getMonth() + 1}/${bucketStart.getDate()}`;
+    const bucket = trendBuckets.get(key) ?? { attempts: 0, completions: 0 };
+    bucket.attempts += 1;
+    if (attempt.maxScore > 0 && attempt.score / attempt.maxScore >= 0.8) {
+      bucket.completions += 1;
+    }
+    trendBuckets.set(key, bucket);
+  }
+  const trendRows = Array.from(trendBuckets.entries()).map(([label, bucket]) => ({
+    label,
+    ...bucket,
+  }));
 
   return (
     <main className="single-page">
@@ -231,6 +273,14 @@ export default async function AnalyticsOverviewPage({
               </option>
             ))}
           </select>
+          <select aria-label="Filter by cohort" name="group" defaultValue={selectedGroup}>
+            <option value="">All cohorts</option>
+            {groupOptions.map((group) => (
+              <option key={group} value={group}>
+                {group}
+              </option>
+            ))}
+          </select>
           <select aria-label="Filter by topic" name="topic" defaultValue={selectedTopic}>
             <option value="">All topics</option>
             {topicOptions.map((topic) => (
@@ -244,7 +294,12 @@ export default async function AnalyticsOverviewPage({
           <button className="secondary-action compact" type="submit">
             Filter
           </button>
-          {selectedSet || selectedStudent || selectedTopic || params.from || params.to ? (
+          {selectedSet ||
+          selectedStudent ||
+          selectedGroup ||
+          selectedTopic ||
+          params.from ||
+          params.to ? (
             <Link className="text-link" href="/admin/analytics">
               Clear
             </Link>
@@ -281,6 +336,28 @@ export default async function AnalyticsOverviewPage({
             <strong>{recentAttemptCount}</strong>
           </article>
         </section>
+
+        <section className="panel table-panel">
+          <div className="panel-header">
+            <div>
+              <p className="eyebrow">Completion trends</p>
+              <h2>Last 6 weeks</h2>
+            </div>
+          </div>
+          <div className="trend-strip">
+            {trendRows.map((row) => (
+              <div className="trend-bar" key={row.label}>
+                <span
+                  style={{
+                    height: `${Math.max(8, Math.min(100, row.attempts * 14))}%`,
+                  }}
+                />
+                <strong>{row.completions}</strong>
+                <small>{row.label}</small>
+              </div>
+            ))}
+          </div>
+        </section>
         <section className="heatmap-section">
           <div className="panel-header">
             <div>

app/admin/audit/page.tsx

@@ -0,0 +1,91 @@
+import Link from "next/link";
+import { getServerSession } from "next-auth/next";
+import { redirect } from "next/navigation";
+import { ArrowLeft, ShieldCheck } from "lucide-react";
+import { prisma } from "@/lib/db";
+import { authOptions } from "@/lib/auth";
+import { hasPermission } from "@/lib/permissions";
+
+export const dynamic = "force-dynamic";
+
+export default async function AdminAuditPage() {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.id) redirect("/");
+  if (!hasPermission(session.user.role, "admin:audit")) redirect("/dashboard");
+
+  const logs = await prisma.auditLog.findMany({
+    orderBy: { createdAt: "desc" },
+    take: 100,
+    include: { actor: { select: { email: true, name: true, displayName: true } } },
+  });
+
+  return (
+    <main className="single-page">
+      <div className="page-frame">
+        <header className="topbar standalone">
+          <div>
+            <p className="eyebrow">Admin</p>
+            <h1>
+              <ShieldCheck size={22} />
+              Audit log
+            </h1>
+          </div>
+          <Link className="secondary-action" href="/dashboard">
+            <ArrowLeft size={18} />
+            Dashboard
+          </Link>
+        </header>
+
+        <section className="panel table-panel">
+          <div className="panel-header">
+            <div>
+              <p className="eyebrow">Latest events</p>
+              <h2>{logs.length} recorded actions</h2>
+            </div>
+          </div>
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>Actor</th>
+                  <th>Action</th>
+                  <th>Target</th>
+                  <th>Metadata</th>
+                </tr>
+              </thead>
+              <tbody>
+                {logs.length === 0 ? (
+                  <tr>
+                    <td colSpan={5}>No audit events recorded yet.</td>
+                  </tr>
+                ) : (
+                  logs.map((log) => (
+                    <tr key={log.id}>
+                      <td>{log.createdAt.toLocaleString()}</td>
+                      <td>
+                        {log.actor?.displayName || log.actor?.name || log.actor?.email || "System"}
+                      </td>
+                      <td>
+                        <code className="slug-code">{log.action}</code>
+                      </td>
+                      <td>
+                        {log.targetType ?? "—"}
+                        {log.targetId ? `:${log.targetId.slice(0, 8)}` : ""}
+                      </td>
+                      <td>
+                        <code className="slug-code">
+                          {log.metadata ? JSON.stringify(log.metadata).slice(0, 120) : "—"}
+                        </code>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}