Assessment Flow (Middle Section - minimal intro and outro) by bderbs30 · Pull Request #271 · sandboxnu/sarge

bderbs30 · 2026-04-01T21:13:59Z

Changes

Created the assessment flow (mainly the middle section but added a simple intro and outro part)

Currently, we don't have text sections, so the logic for that will need to be added (for the timer)
Updated the unique link within the assessment (it doesn't really make sense to have the full link since its env dependent so if we have it showing to local host it would only work locally and vice versa - thats why we should just use id and construct the link from there based on the env - when we send emails we'll construct based off current env)
the panels are resizable but we don't show an indicator (its only on hover so user will have to discover this)

Notes

refreshing doesn't auto submit (I think I need to make an edit to the schema to have a start time and start the assessment
It does auto submit if we run out of time tho
No longer using routed intro outro and task bc having it in a single flow made state (such as the timer) easier to keep track of)
didn't reuse the testcase and code editor panels from the previous task and assessment template editor bc the data that we take in is different and what we show is also different (different enough to warrant new components) we'd essentially be creating new components within them imo)

Screen

https://sandboxneu.slack.com/archives/C09E7L2RK16/p1775078268444749?thread_ts=1775078043.152429&cid=C09E7L2RK16

Checklist

Please go through all items before requesting reviewers:

Closes

Closes #261

vercel · 2026-04-01T21:14:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sarge	Ready	Preview, Comment	Apr 3, 2026 0:43am

bderbs30 · 2026-04-01T21:27:27Z

+                className="flex w-full items-center gap-3 text-left"
+            >
+                {isLoading && (
+                    <Loader2 className="text-sarge-gray-500 size-4.5 flex-shrink-0 animate-spin" />


would it be better to use ternary logic instead of the && operator here @cherman23 @LOTaher

bderbs30 · 2026-04-01T21:29:23Z

@@ -0,0 +1,17 @@
+import { HighlightGuard } from '@/lib/components/core/HighlightGuard';


Could just move this into the main layout however I've been breaking things out lmk what you think

bderbs30 · 2026-04-01T21:31:14Z

+    AssessmentQuestion,
+} from '@/lib/types/candidate-assessment.types';
+
+export type AssessmentPhase = 'intro' | 'assessment' | 'outro';


might be good to move these types into the candidate assessment types (thoughts?)

I agree with this, types should def be managed in the same place

bderbs30 · 2026-04-01T21:33:08Z

        }
    }

-    async function setAssessmentStatus(status: AssessmentStatus) {


wait I'm realizing I prob shouldn't have removed this since we want to keep the admins up to date if the user took the oa (TODO for me btw)

hmmm actually second thought this is fine - we don't have an in progress enum anyways so if font wants to know if someone is taking but I don't think that info is any useful rlly

LOTaher

Few requested changes. Want to chat during standup about a few things

LOTaher · 2026-04-01T21:24:26Z

+    main: React.ReactNode;
+};
+
+export default function AssessmentFlowLayout({ navbar, sidebar, main }: AssessmentFlowLayoutProps) {


Is this necessary? Seems like we can just inline this component no?

LOTaher · 2026-04-01T21:26:10Z

@@ -0,0 +1,101 @@
+import { Loader2, CircleCheck, CircleX, AlarmClock } from 'lucide-react';


I thought the purpose of us component-izing our task template page was to reuse our test case section? Would we be able to do that instead and just add extra parameters? If that's too big of an ask then I'd rather we combine these components and have a parameter to determine whether it should behave like its in an OA or editable

Yeah we can talk abt this I realized that this might be hard to abstract away to use with the oa - but we can abstract for the task and assessment template stuff since its admin side data objects and we present similar info)

LOTaher · 2026-04-01T21:26:18Z

@@ -0,0 +1,151 @@
+'use client';


Same feedback as the test case card

LOTaher · 2026-04-01T21:27:43Z

@@ -0,0 +1,95 @@
+import {


Main seems somewhat unclear on first glance imo. Can we call this "AssessmentFlowScreen" or something?

LOTaher · 2026-04-01T21:28:24Z

+    onStart: () => void;
+};
+
+// move this to utils? (thoughts)


Can be a good call! We'd prob want to move formatDuration too

LOTaher · 2026-04-01T21:30:24Z

@@ -0,0 +1,37 @@
+import { CircleCheck, Lock } from 'lucide-react';


Can you call this something like "AssessmentFlowSidebarQuestion" or "AssessmentSidebarQuestion"

LOTaher · 2026-04-01T21:31:55Z

@@ -0,0 +1,91 @@
+'use client';


Same feedback as the new test case component

cherman23 · 2026-04-02T00:49:38Z

+    AssessmentQuestion,
+} from '@/lib/types/candidate-assessment.types';
+
+export type AssessmentPhase = 'intro' | 'assessment' | 'outro';


I agree with this, types should def be managed in the same place

cherman23 · 2026-04-02T01:05:28Z

+    try {
+        const { assessmentId } = await params;
+        await AssessmentService.submitAssessmentForCandidate(assessmentId);
+        return Response.json({ data: null }, { status: 200 });


This should prob be a 201 🤓

cherman23 · 2026-04-02T01:06:46Z

+
+export async function submitCandidateAssessment(assessmentId: string): Promise<void> {
+    const res = await fetch(`/api/oa/${assessmentId}/submit`, { method: 'PUT' });
+    const json = await res.json();


This should return something because the route returns data.

LOTaher · 2026-04-03T14:24:20Z

        );
    }
-
+    // the unique link shouldn't be the full link (bc the env of the link matters) so we just use id


Note: we've talked about this, this will just be a set of random characters for the url

bderbs30 self-assigned this Apr 1, 2026

bderbs30 requested a review from cherman23 April 1, 2026 21:15

bderbs30 force-pushed the 261/assessment-flow branch from 3e71e12 to 0aa3861 Compare April 1, 2026 21:20

LOTaher self-requested a review April 1, 2026 21:20

vercel Bot deployed to Preview April 1, 2026 21:22 View deployment

bderbs30 commented Apr 1, 2026

View reviewed changes

LOTaher requested changes Apr 1, 2026

View reviewed changes

vercel Bot deployed to Preview April 1, 2026 21:53 View deployment

cherman23 reviewed Apr 2, 2026

View reviewed changes

vercel Bot deployed to Preview April 2, 2026 10:56 View deployment

vercel Bot deployed to Preview April 2, 2026 22:58 View deployment

bderbs30 added 15 commits April 2, 2026 19:01

assessment flow types

ab8e27c

add route for assessment oa (retrieve the oa)

f3d8079

update assessment hook to now utilize oa routes (out of auth context)

9885e78

remove old pages (moving to a single page flow)

e9d2a4a

add globals for errors and easing animation

2aa6d28

refactor to not utilize token for oa verification

822aad6

refactor dropdown for CE toolbar

62646d7

hooks for assessment flow

f60bdd2

update service to no longer use unique links for oas

cbabfea

The assessment flow and components

a03c9fa

prettier fix

1104ac0

fix linting

3762b0d

remove ref thats not needed

0b54d56

use err var for linting

a81f599

resolving comments

74a7983

bderbs30 added 4 commits April 2, 2026 19:01

renaming and organizing components

07e3b8c

move assessment flow types to type file

8ace0ac

reorganize types (templates and assessment)

ae59086

update returns for assessment submission

b87633d

bderbs30 force-pushed the 261/assessment-flow branch from 3b91025 to b87633d Compare April 2, 2026 23:03

vercel Bot deployed to Preview April 2, 2026 23:04 View deployment

combine test case card into a single component

84cee37

vercel Bot deployed to Preview April 3, 2026 00:27 View deployment

remove helper that did nothing lol

e419ae6

vercel Bot deployed to Preview April 3, 2026 00:43 View deployment

LOTaher reviewed Apr 3, 2026

View reviewed changes

LOTaher approved these changes Apr 3, 2026

View reviewed changes

LOTaher merged commit 55e00b3 into main Apr 3, 2026
4 checks passed

		@@ -0,0 +1,17 @@
		import { HighlightGuard } from '@/lib/components/core/HighlightGuard';

		@@ -0,0 +1,101 @@
		import { Loader2, CircleCheck, CircleX, AlarmClock } from 'lucide-react';

		@@ -0,0 +1,37 @@
		import { CircleCheck, Lock } from 'lucide-react';

Conversation

bderbs30 commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Notes

Screen

Checklist

Closes

Uh oh!

vercel Bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LOTaher left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bderbs30 commented Apr 1, 2026 •

edited

Loading

vercel Bot commented Apr 1, 2026 •

edited

Loading