Assessment Flow (Middle Section - minimal intro and outro)

src/app/(web)/(oa)/assessment/[assessmentId]/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { use } from 'react';
+import useAssessment from '@/lib/hooks/useAssessment';
+import AssessmentIntro from '@/lib/components/assessment-flow/AssessmentIntro';
+import AssessmentOutro from '@/lib/components/assessment-flow/AssessmentOutro';
+import AssessmentSidebar from '@/lib/components/assessment-flow/AssessmentSidebar';
+import AssessmentNavbar from '@/lib/components/assessment-flow/AssessmentNavbar';
+import AssessmentContent from '@/lib/components/assessment-flow/AssessmentContent';
+
+export default function AssessmentPage({ params }: { params: Promise<{ assessmentId: string }> }) {
+    const { assessmentId } = use(params);
+    const assessment = useAssessment(assessmentId);
+
+    if (assessment.isLoading)
+        return (
+            <div className="text-sarge-gray-500 flex h-screen items-center justify-center">
+                Loading...
+            </div>
+        );
+    if (assessment.error)
+        return (
+            <div className="text-sarge-error-400 flex h-screen items-center justify-center">
+                {assessment.error.message}
+            </div>
+        );
+
+    if (assessment.phase === 'intro' && assessment.assessment) {
+        return (
+            <AssessmentIntro
+                assessment={assessment.assessment}
+                totalTimeSeconds={assessment.totalTimeSeconds}
+                onStart={assessment.startAssessment}
+            />
+        );
+    }
+
+    if (assessment.phase === 'outro') {
+        return (
+            <AssessmentOutro
+                reason={assessment.outroReason}
+                candidateName={assessment.candidateName}
+            />
+        );
+    }
+
+    return (
+        <div className="flex h-screen w-full flex-col overflow-hidden">
+            <AssessmentNavbar candidateName={assessment.candidateName} />
+            <div className="flex flex-1 overflow-hidden">
+                <AssessmentSidebar
+                    sections={assessment.sections}
+                    currentSectionIndex={assessment.currentSectionIndex}
+                    formattedTime={assessment.timer.formattedTime}
+                />
+                <main className="flex-1 overflow-hidden">
+                    <AssessmentContent
+                        currentSection={assessment.currentSection}
+                        availableLanguages={assessment.availableLanguages}
+                        publicTestCases={assessment.publicTestCases}
+                        testCaseResults={assessment.testCaseResults}
+                        isTransitioning={assessment.isTransitioning}
+                        onLanguageChange={assessment.changeLanguage}
+                        onEditorMount={assessment.handleEditorMount}
+                        onRunTests={assessment.runTests}
+                        onSubmit={assessment.submitAndContinue}
+                    />
+                </main>
+            </div>
+        </div>
+    );
+}

src/app/(web)/crm/assessment-templates/[id]/edit/page.tsx

@@ -5,8 +5,8 @@ import { ChevronDown, Users } from 'lucide-react';
 import Image from 'next/image';
 import { toast } from 'sonner';
 import AddTaskModal from '@/lib/components/modal/AddTaskModal';
-import AssessmentEditorSidebar from '@/lib/components/core/AssessmentEditorSidebar';
-import AssessmentTaskPreviewPanel from '@/lib/components/core/AssessmentTaskPreviewPanel';
+import AssessmentTemplateEditorSidebar from '@/lib/components/templates/AssessmentTemplateEditorSidebar';
+import AssessmentTaskTemplatePreviewPanel from '@/lib/components/templates/AssessmentTaskTemplatePreviewPanel';
 import Breadcrumbs from '@/lib/components/core/Breadcrumbs';
 import useAssessmentTemplateEditPage from '@/lib/hooks/useAssessmentTemplateEditPage';
 import { Combobox } from '@/lib/components/ui/Combobox';
@@ -124,7 +124,7 @@ export default function AssessmentTemplateEditPage({
             </div>
 
             <div className="flex min-h-0 flex-1">
-                <AssessmentEditorSidebar
+                <AssessmentTemplateEditorSidebar
                     sections={sections}
                     selectedSection={selectedSection}
                     notes={notes}
@@ -137,7 +137,7 @@ export default function AssessmentTemplateEditPage({
                     onOpenAddTaskModal={() => setAddTaskOpen(true)}
                 />
 
-                <AssessmentTaskPreviewPanel
+                <AssessmentTaskTemplatePreviewPanel
                     selectedSection={selectedSection}
                     onDeleteSection={deleteSection}
                 />

src/app/(web)/crm/templates/page.tsx

@@ -14,8 +14,8 @@ import {
 import { Tabs, TabsContent, TabsList, UnderlineTabsTrigger } from '@/lib/components/ui/Tabs';
 import { ArrowDownUp, Plus, SlidersHorizontal } from 'lucide-react';
 import { useTaskTemplateList } from '@/lib/hooks/useTaskTemplateList';
-import TaskCard from '@/lib/components/core/TaskCard';
-import { TaskTemplatePreviewPanel } from '@/lib/components/core/TaskTemplatePreviewPanel';
+import TaskTemplateCard from '@/lib/components/templates/TaskTemplateCard';
+import { TaskTemplatePreview } from '@/lib/components/templates/TaskTemplatePreview';
 import type { TaskTemplateListItemDTO } from '@/lib/schemas/task-template.schema';
 import Image from 'next/image';
 import Pager from '@/lib/components/ui/Pager';
@@ -24,7 +24,7 @@ import useSearch from '@/lib/hooks/useSearch';
 import { useAssessmentTemplateList } from '@/lib/hooks/useAssessmentTemplateList';
 import CreateAssessmentTemplateModal from '@/lib/components/modal/CreateAssessmentModal';
 import { type AssessmentTemplateListItemDTO } from '@/lib/schemas/assessment-template.schema';
-import AssessmentCard from '@/lib/components/core/AssessmentCard';
+import AssessmentTemplateCard from '@/lib/components/templates/AssessmentTemplateCard';
 import {
     deleteTaskTemplate,
     duplicateTaskTemplate,
@@ -40,7 +40,7 @@ import {
     DialogTitle,
 } from '@/lib/components/ui/Modal';
 import { useAuth } from '@/lib/auth/auth-context';
-import { AssessmentTemplatePreview } from '@/lib/components/core/AssessmentTemplatePreview';
+import { AssessmentTemplatePreview } from '@/lib/components/templates/AssessmentTemplatePreview';
 
 export default function TemplatesPage() {
     const [selectedTaskTemplate, setSelectedTaskTemplate] =
@@ -231,7 +231,7 @@ export default function TemplatesPage() {
                             ).map((task: TaskTemplateListItemDTO, idx: number) => {
                                 const absoluteIdx = page * limit + idx;
                                 return (
-                                    <TaskCard
+                                    <TaskTemplateCard
                                         key={task.id}
                                         title={task.title}
                                         subtitle={task.taskType ?? ''}
@@ -351,7 +351,7 @@ export default function TemplatesPage() {
                                 ? assessmentTemplateSearch.data
                                 : assessmentTemplateList.assessmentTemplateList
                             ).map((assessment: AssessmentTemplateListItemDTO) => (
-                                <AssessmentCard
+                                <AssessmentTemplateCard
                                     key={assessment.id}
                                     template={assessment}
                                     isSelected={selectedAssessmentTemplate?.id === assessment.id}
@@ -378,7 +378,7 @@ export default function TemplatesPage() {
 
                 <div className="flex min-h-0 w-3/4 flex-col">
                     {selectedTaskTemplate ? (
-                        <TaskTemplatePreviewPanel
+                        <TaskTemplatePreview
                             taskTemplatePreview={selectedTaskTemplate}
                             onDuplicate={isMutating ? undefined : onDuplicate}
                             onDelete={isMutating ? undefined : onDelete}