feat: discussion page

packages/backend/src/resolvers/user.resolver.ts

@@ -1,12 +1,13 @@
 import { AuthenticatedContext, GqlResolvers, User } from '@lara/api'
 
-import { isAdmin, isTrainee, isTrainer } from '../permissions'
+import { isAdmin, isTrainee, isTrainer, isMentor } from '../permissions'
 import { allTrainees } from '../repositories/trainee.repo'
 import { saveUser } from '../repositories/user.repo'
 import { generateAdmin } from '../services/admin.service'
 import { alexaSkillLinked } from '../services/alexa.service'
 import { generateTrainee } from '../services/trainee.service'
 import { generateTrainer } from '../services/trainer.service'
+import { generateMentor } from '../services/mentor.service'
 
 export const userResolver: GqlResolvers<AuthenticatedContext> = {
   UserInterface: {
@@ -41,6 +42,14 @@ export const userResolver: GqlResolvers<AuthenticatedContext> = {
         }
       }
 
+      if (!isMentor(currentUser) && type === 'Mentor') {
+        newUser = {
+          ...(await generateMentor(currentUser)),
+          ...currentUser,
+          type,
+        }
+      }
+
       if (!isAdmin(currentUser) && type === 'Admin') {
         newUser = {
           ...generateAdmin(currentUser),

packages/frontend/src/pages/mentor-paper-page.tsx

@@ -14,6 +14,14 @@ export const MentorPaperPage: React.FC = () => {
   const { loading, data } = useMentorPaperPageDataQuery()
   const navigate = useNavigate()
 
+  const navigateToPaperFeedbackPage = (paperId: string) => {
+    navigate('/paper/feedback/' + paperId)
+  }
+
+  const navigateToPaperDiscussionPage = (paperId: string) => {
+    navigate('/paper/feedback/discussion/' + paperId)
+  }
+
   if (!data) {
     return (
       <Template type="Main">
@@ -98,13 +106,25 @@ export const MentorPaperPage: React.FC = () => {
                   <Spacer y="xl">
                     <ProgressBar progress={mapStatusToProgess(paper.status)} color={'primaryDefault'} />
                   </Spacer>
-                  {paper?.status === PaperStatus.TraineeDone ? (
+                  {[
+                    PaperStatus.NotStarted,
+                    PaperStatus.InProgress,
+                    PaperStatus.TraineeDone,
+                    PaperStatus.Archived,
+                    PaperStatus.MentorDone,
+                  ].includes(paper?.status) && (
                     <Flex justifyContent={'flex-end'}>
-                      <PrimaryButton onClick={() => navigate(`/paper/feedback/${paper?.id}`)}>
-                        {paper.feedbackMentor.length > 0 ? strings.edit : strings.start}
+                      <PrimaryButton
+                        onClick={() =>
+                          (paper?.feedbackTrainee?.length ?? 0) > 0 && (paper?.feedbackMentor?.length ?? 0) > 0
+                            ? navigateToPaperDiscussionPage(paper.id)
+                            : navigateToPaperFeedbackPage(paper.id)
+                        }
+                      >
+                        {(paper?.feedbackTrainee?.length ?? 0) > 0 ? strings.edit : strings.start}
                       </PrimaryButton>
                     </Flex>
-                  ) : null}
+                  )}
                 </Container>
               </Spacer>
             ) : null

packages/frontend/src/pages/paper-feedback-discussion-page.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { useParams } from 'react-router'
+import { Box, PaperH2, PaperLayout, Spacer } from '@lara/components'
+import NavigationButtonLink from '../components/navigation-button-link'
+import { Template } from '../templates/template'
+import strings from '../locales/localization'
+import {
+  useTraineePaperPageDataQuery,
+  useMentorPaperPageDataQuery,
+  FeedbackEntryProps,
+  PaperFormData,
+} from '../graphql'
+import CommentSection from '../components/comment-section'
+
+// FeedbackEntryProps already declares:
+// { entry: PaperFormData; comments: string[]; onSubmit: (comment: string) => void; displayTextInput: boolean }
+
+export const FeedbackEntry: React.FC<FeedbackEntryProps> = ({ entry, comments, onSubmit, displayTextInput }) => {
+  // If CommentSection expects richer objects, convert at boundary (kept minimal)
+  const commentSectionData = (comments || []).map((text, i) => ({
+    id: `generated-${i}`,
+    text,
+    published: true,
+    user: {
+      id: 'unknown',
+      firstName: '',
+      lastName: '',
+    },
+  }))
+
+  return (
+    <Box mb="4" p="4">
+      <Box mb="3">
+        <strong>{entry.question}</strong>
+        <p>{entry.answer}</p>
+      </Box>
+
+      <CommentSection comments={commentSectionData} onSubmit={onSubmit} displayTextInput={displayTextInput} />
+    </Box>
+  )
+}
+
+type PaperWithFeedback = {
+  id: string
+  feedbackTrainee?: PaperFormData[]
+  feedbackMentor?: PaperFormData[]
+}
+
+/**
+ * Keep minimal changes: type the currentUser->papers access so we can call .map
+ * with concrete PaperFormData elements instead of `any`.
+ */
+export const PaperFeedbackDiscussionPage: React.FC = () => {
+  const { paperId } = useParams<{ paperId: string }>()
+  const traineePaperData = useTraineePaperPageDataQuery()
+  const mentorPaperData = useMentorPaperPageDataQuery()
+
+  const currentUser = traineePaperData.data?.currentUser || mentorPaperData.data?.currentUser
+
+  // Narrow `papers` to a known shape (no `any`)
+  const papers = (currentUser as unknown as { papers?: PaperWithFeedback[] })?.papers
+  const paper = papers?.find((p) => p.id === paperId)
+
+  if (!paper || !currentUser) {
+    return (
+      <Template type="Main">
+        <div>Loading...</div>
+      </Template>
+    )
+  }
+
+  // keep returning string[] as per FeedbackEntryProps
+  const getCommentsForEntry = (_entryId: string): string[] => {
+    return []
+  }
+
+  // prefix unused args with _ to satisfy eslint no-unused-vars rule
+  const handleCommentSubmit = (_entryId: string, _text: string) => {
+    // TODO: Implement mutation to save comment for entry
+  }
+
+  return (
+    <Template type="Main">
+      <Spacer bottom="m">
+        <NavigationButtonLink
+          label={strings.back}
+          to="/paper"
+          icon="ChevronLeft"
+          isLeft
+          alignLeft
+          iconColor="iconLightGrey"
+        />
+      </Spacer>
+      <PaperLayout>
+        <div style={{ width: '100%' }}>
+          <PaperH2>{strings.paper.feedback.headlineEvaluationByTrainee}</PaperH2>
+
+          {Array.isArray(paper.feedbackTrainee) &&
+            paper.feedbackTrainee.map((entry: PaperFormData) => (
+              <FeedbackEntry
+                key={entry.id}
+                entry={entry}
+                comments={getCommentsForEntry(entry.id)}
+                onSubmit={(text) => handleCommentSubmit(entry.id, text)}
+                displayTextInput={true}
+              />
+            ))}
+
+          <PaperH2>{strings.paper.feedback.headlineEvaluationByMentor}</PaperH2>
+
+          {Array.isArray(paper.feedbackMentor) &&
+            paper.feedbackMentor.map((entry: PaperFormData) => (
+              <FeedbackEntry
+                key={entry.id}
+                entry={entry}
+                comments={getCommentsForEntry(entry.id)}
+                onSubmit={(text) => handleCommentSubmit(entry.id, text)}
+                displayTextInput={true}
+              />
+            ))}
+        </div>
+      </PaperLayout>
+    </Template>
+  )
+}
+
+export default PaperFeedbackDiscussionPage

packages/frontend/src/pages/trainee-paper-page.tsx

@@ -19,6 +19,10 @@ export const TraineePaperPage: React.FC = () => {
     navigate('/paper/feedback/' + paperId)
   }
 
+  const navigateToPaperDiscussionPage = (paperId: string) => {
+    navigate('/paper/feedback/discussion/' + paperId)
+  }
+
   if (!data) {
     return (
       <Template type="Main">
@@ -101,13 +105,25 @@ export const TraineePaperPage: React.FC = () => {
                 <Spacer y="xl">
                   <ProgressBar progress={mapStatusToProgess(paper.status)} color={'primaryDefault'} />
                 </Spacer>
-                {paper?.status === PaperStatus.InProgress ? (
+                {[
+                  PaperStatus.NotStarted,
+                  PaperStatus.InProgress,
+                  PaperStatus.TraineeDone,
+                  PaperStatus.Archived,
+                  PaperStatus.MentorDone,
+                ].includes(paper?.status) && (
                   <Flex justifyContent={'flex-end'}>
-                    <PrimaryButton onClick={() => navigateToPaperFeedbackPage(paper.id)}>
-                      {paper?.feedbackTrainee.length > 0 ? strings.edit : strings.start}
+                    <PrimaryButton
+                      onClick={() =>
+                        (paper?.feedbackTrainee?.length ?? 0) > 0 && (paper?.feedbackMentor?.length ?? 0) > 0
+                          ? navigateToPaperDiscussionPage(paper.id)
+                          : navigateToPaperFeedbackPage(paper.id)
+                      }
+                    >
+                      {(paper?.feedbackTrainee?.length ?? 0) > 0 ? strings.edit : strings.start}
                     </PrimaryButton>
                   </Flex>
-                ) : null}
+                )}
               </Container>
             </Spacer>
           ) : null

packages/frontend/src/pages/trainer-paper-page.tsx

@@ -184,13 +184,13 @@ export const TrainerPaperPage: React.FC = () => {
                   <Spacer y="xl">
                     <ProgressBar progress={mapStatusToProgess(paper.status)} color={'primaryDefault'} />
                   </Spacer>
-                  {paper.status === 'NotStarted' ? (
+                  {[PaperStatus.NotStarted, PaperStatus.InProgress].includes(paper?.status) && (
                     <Flex justifyContent={'flex-end'}>
                       <PrimaryButton onClick={() => navigateToEditPaperPage(paper.id)}>
-                        {paper?.briefing.length > 0 ? strings.edit : strings.start}
+                        {(paper?.feedbackTrainee?.length ?? 0) > 0 ? strings.edit : strings.start}
                       </PrimaryButton>
                     </Flex>
-                  ) : null}
+                  )}
                   <Modal show={showDeletePaperModal} customClose handleClose={() => toggleDeletePaperModal(undefined)}>
                     <Flex flexDirection={'row'} alignItems={'center'}>
                       <Box width={1 / 3}>

packages/frontend/src/routes.tsx

@@ -34,6 +34,7 @@ import { isWikiFeatureEnabled } from './helper/wiki-helper'
 import { AdminAdminsPage } from './pages/admin-admins-page'
 import { TraineePaperFeedbackPage } from './pages/trainee-paper-feedback-page'
 import { MentorPaperFeedbackPage } from './pages/mentor-paper-feedback-page'
+import PaperFeedbackDiscussionPage from './pages/paper-feedback-discussion-page'
 import { isPaperFeatureEnabled } from './helper/paper-helper'
 
 type RoutesProps = {
@@ -92,6 +93,7 @@ const AppRoutes: React.FunctionComponent<RoutesProps> = ({ currentUser }) => {
                   <>
                     <Route path="/paper" element={<TraineePaperPage />} />
                     <Route path="/paper/feedback/:paperId" element={<TraineePaperFeedbackPage />} />
+                    <Route path="/paper/feedback/discussion/:paperId" element={<PaperFeedbackDiscussionPage />} />
                   </>
                 )}
               </>
@@ -127,6 +129,7 @@ const AppRoutes: React.FunctionComponent<RoutesProps> = ({ currentUser }) => {
             <Route path="/" element={<MentorPaperPage />} />
             <Route path="/paper" element={<MentorPaperPage />} />
             <Route path="/paper/feedback/:paperId" element={<MentorPaperFeedbackPage />} />
+            <Route path="/paper/feedback/discussion/:paperId" element={<PaperFeedbackDiscussionPage />} />
           </>
         )}