Assessment: Send automatic reminders to students once assessment deadline has passed

.gitignore

@@ -40,6 +40,7 @@ build/
 # Go / Backend
 # =============================================================================
 **/.gocache/
+**/.cache/
 
 # =============================================================================
 # IDE & Editor

clients/assessment_component/package.json

@@ -7,6 +7,7 @@
     "dev": "webpack serve --open --mode development",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
+    "test": "../node_modules/.bin/ts-node --compiler-options '{\"module\":\"commonjs\"}' src/assessment/pages/SettingsPage/components/AssessmentReminderCard/utils.test.ts",
     "build": "webpack --mode=production --env NODE_ENV=production",
     "check-performance": "webpack --mode=production --env NODE_ENV=production --env BUNDLE_SIZE=true"
   },

clients/assessment_component/src/assessment/interfaces/evaluationReminder.ts

@@ -0,0 +1,22 @@
+export type EvaluationReminderType = 'self' | 'peer' | 'tutor'
+
+export interface AssessmentReminderMetaData {
+  subject: string
+  content: string
+  lastSentAtByType: Partial<Record<EvaluationReminderType, string>>
+}
+
+export interface SendEvaluationReminderRequest {
+  evaluationType: EvaluationReminderType
+}
+
+export interface EvaluationReminderReport {
+  successfulEmails: string[]
+  failedEmails: string[]
+  requestedRecipients: number
+  evaluationType: EvaluationReminderType
+  deadline?: string
+  deadlinePassed: boolean
+  sentAt: string
+  previousSentAt?: string | null
+}

clients/assessment_component/src/assessment/network/mutations/sendEvaluationReminder.ts

@@ -0,0 +1,27 @@
+import { axiosInstance } from '@/network/configService'
+import {
+  SendEvaluationReminderRequest,
+  EvaluationReminderReport,
+} from '../../interfaces/evaluationReminder'
+
+export const sendEvaluationReminder = async (
+  coursePhaseID: string,
+  request: SendEvaluationReminderRequest,
+): Promise<EvaluationReminderReport> => {
+  try {
+    return (
+      await axiosInstance.post(
+        `/assessment/api/course_phase/${coursePhaseID}/config/reminders/send`,
+        request,
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+    ).data
+  } catch (err) {
+    console.error('Failed to send evaluation reminder:', err)
+    throw err
+  }
+}

clients/assessment_component/src/assessment/pages/SettingsPage/SettingsPage.tsx

@@ -21,6 +21,7 @@ import { ScoreLevelDistributionDiagram } from '../components/diagrams/ScoreLevel
 
 import { CoursePhaseConfigSelection } from './components/CoursePhaseConfigSelection/CoursePhaseConfigSelection'
 import { CategoryList } from './components/CategoryList/CategoryList'
+import { AssessmentReminderCard } from './components/AssessmentReminderCard'
 
 export const SettingsPage = () => {
   const [showReleaseDialog, setShowReleaseDialog] = useState(false)
@@ -100,6 +101,8 @@ export const SettingsPage = () => {
         hasTutorEvalData={tutorEvalSchemaData?.hasAssessmentData ?? false}
       />
 
+      {(isPromptAdmin || isLecturer) && <AssessmentReminderCard />}
+
       {(isPromptAdmin || isLecturer) && !config?.resultsReleased && (
         <div className='w-full'>
           <Button

clients/assessment_component/src/assessment/pages/SettingsPage/components/AssessmentReminderCard.tsx

@@ -0,0 +1,295 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { AxiosError } from 'axios'
+import type { CoursePhaseWithMetaData } from '@tumaet/prompt-shared-state'
+import { useParams } from 'react-router-dom'
+
+import { AvailableMailPlaceholders } from '@/components/pages/Mailing/components/AvailableMailPlaceholders'
+import { useGetMailingIsConfigured } from '@/hooks/useGetMailingIsConfigured'
+import { useModifyCoursePhase } from '@/hooks/useModifyCoursePhase'
+import { getCoursePhase } from '@/network/queries/getCoursePhase'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  useToast,
+} from '@tumaet/prompt-ui-components'
+
+import type { EvaluationCompletion } from '../../../interfaces/evaluationCompletion'
+import type {
+  AssessmentReminderMetaData,
+  EvaluationReminderReport,
+  EvaluationReminderType,
+} from '../../../interfaces/evaluationReminder'
+import { sendEvaluationReminder } from '../../../network/mutations/sendEvaluationReminder'
+import { getAllEvaluationCompletionsInPhase } from '../../../network/queries/getAllEvaluationCompletionsInPhase'
+import { useCoursePhaseConfigStore } from '../../../zustand/useCoursePhaseConfigStore'
+import { useParticipationStore } from '../../../zustand/useParticipationStore'
+import { useTeamStore } from '../../../zustand/useTeamStore'
+import { ManualReminderSendingSection } from './AssessmentReminderCard/components/ManualReminderSendingSection'
+import { ReminderSendConfirmationDialog } from './AssessmentReminderCard/components/ReminderSendConfirmationDialog'
+import { ReminderTemplateEditor } from './AssessmentReminderCard/components/ReminderTemplateEditor'
+import {
+  ASSESSMENT_REMINDER_PLACEHOLDERS,
+  deadlinePassed,
+  EMPTY_REMINDER_META,
+  formatDeadline,
+  getReminderTypes,
+  parseReminderMetaData,
+} from './AssessmentReminderCard/utils'
+
+interface ErrorResponse {
+  error?: string
+}
+
+export const AssessmentReminderCard = () => {
+  const { phaseId } = useParams<{ phaseId: string }>()
+  const { toast } = useToast()
+  const queryClient = useQueryClient()
+
+  const { coursePhaseConfig } = useCoursePhaseConfigStore()
+  const { participations } = useParticipationStore()
+  const { teams } = useTeamStore()
+  const courseMailingIsConfigured = useGetMailingIsConfigured()
+
+  const [subject, setSubject] = useState('')
+  const [content, setContent] = useState('')
+  const [initialMetaData, setInitialMetaData] = useState(EMPTY_REMINDER_META)
+  const [confirmationType, setConfirmationType] = useState<EvaluationReminderType | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [lastReport, setLastReport] = useState<EvaluationReminderReport | null>(null)
+  const contentTextareaRef = useRef<HTMLTextAreaElement>(null)
+  const initializedPhaseIdRef = useRef<string | null>(null)
+
+  const {
+    data: coursePhase,
+    isPending: isCoursePhasePending,
+    isError: isCoursePhaseError,
+  } = useQuery<CoursePhaseWithMetaData>({
+    queryKey: ['course_phase', phaseId],
+    queryFn: () => getCoursePhase(phaseId ?? ''),
+    enabled: !!phaseId,
+  })
+
+  const { data: evaluationCompletions, isPending: isEvaluationCompletionsPending } = useQuery<
+    EvaluationCompletion[]
+  >({
+    queryKey: ['evaluationCompletions', phaseId],
+    queryFn: () => getAllEvaluationCompletionsInPhase(phaseId ?? ''),
+    enabled: !!phaseId,
+  })
+
+  const { mutate: updateCoursePhase, isPending: isSavingTemplate } = useModifyCoursePhase(
+    () => {
+      toast({ title: 'Assessment reminder template updated' })
+      queryClient.invalidateQueries({ queryKey: ['course_phase', phaseId] })
+    },
+    () => {
+      toast({
+        title: 'Failed to update reminder template',
+        description: 'Please try again later.',
+        variant: 'destructive',
+      })
+    },
+  )
+
+  const sendReminderMutation = useMutation({
+    mutationFn: (type: EvaluationReminderType) =>
+      sendEvaluationReminder(phaseId ?? '', { evaluationType: type }),
+    onSuccess: (report) => {
+      setLastReport(report)
+      toast({
+        title: `Reminder sent for ${report.evaluationType} evaluation`,
+        description: `Successful: ${report.successfulEmails.length}, Failed: ${report.failedEmails.length}`,
+      })
+      queryClient.invalidateQueries({ queryKey: ['course_phase', phaseId] })
+    },
+    onError: (error: AxiosError<ErrorResponse>) => {
+      const serverError = error.response?.data?.error ?? 'Failed to send reminder emails.'
+      toast({
+        title: 'Reminder sending failed',
+        description: serverError,
+        variant: 'destructive',
+      })
+    },
+    onSettled: () => {
+      setDialogOpen(false)
+      setConfirmationType(null)
+    },
+  })
+
+  useEffect(() => {
+    if (!coursePhase) return
+
+    const currentPhaseId = phaseId ?? coursePhase.id
+    if (initializedPhaseIdRef.current === currentPhaseId) return
+
+    const parsed = parseReminderMetaData(coursePhase)
+    setInitialMetaData(parsed)
+    setSubject(parsed.subject)
+    setContent(parsed.content)
+    initializedPhaseIdRef.current = currentPhaseId
+  }, [coursePhase, phaseId])
+
+  useEffect(() => {
+    if (!contentTextareaRef.current) return
+
+    contentTextareaRef.current.style.height = 'auto'
+    contentTextareaRef.current.style.height = `${contentTextareaRef.current.scrollHeight}px`
+  }, [content])
+
+  const currentReminderMetaData = useMemo(() => parseReminderMetaData(coursePhase), [coursePhase])
+  const reminderTypes = useMemo(
+    () => getReminderTypes(coursePhaseConfig, participations, teams, evaluationCompletions),
+    [coursePhaseConfig, participations, teams, evaluationCompletions],
+  )
+  const confirmationReminderType = useMemo(
+    () => reminderTypes.find((reminderType) => reminderType.type === confirmationType) ?? null,
+    [confirmationType, reminderTypes],
+  )
+
+  const isModified = subject !== initialMetaData.subject || content !== initialMetaData.content
+  const templateComplete = subject.trim() !== '' && content.trim() !== ''
+
+  const handleSaveTemplate = () => {
+    if (!phaseId || !coursePhase) return
+
+    const mailingSettings =
+      (coursePhase.restrictedData?.mailingSettings as Record<string, unknown>) ?? {}
+    const updatedReminder: AssessmentReminderMetaData = {
+      subject,
+      content,
+      lastSentAtByType: currentReminderMetaData.lastSentAtByType ?? {},
+    }
+
+    updateCoursePhase({
+      id: coursePhase.id,
+      name: coursePhase.name,
+      studentReadableData: coursePhase.studentReadableData ?? {},
+      restrictedData: {
+        ...coursePhase.restrictedData,
+        mailingSettings: {
+          ...mailingSettings,
+          assessmentReminder: updatedReminder,
+        },
+      },
+    })
+  }
+
+  const openConfirmationDialog = (type: EvaluationReminderType) => {
+    setConfirmationType(type)
+    setDialogOpen(true)
+  }
+
+  const sendConfirmedReminder = () => {
+    if (!confirmationType) return
+    sendReminderMutation.mutate(confirmationType)
+  }
+
+  const handleDialogOpenChange = (open: boolean) => {
+    setDialogOpen(open)
+    if (!open) {
+      setConfirmationType(null)
+    }
+  }
+
+  const getDisableReason = (reminderType: (typeof reminderTypes)[number]): string | undefined => {
+    if (isEvaluationCompletionsPending) {
+      return 'Wait until recipient counts have finished loading.'
+    }
+    if (isModified) return 'Save template changes before sending reminders.'
+    if (!courseMailingIsConfigured) return 'Configure course mailing reply-to settings first.'
+    if (!templateComplete) return 'Reminder subject and content are required.'
+    if (!deadlinePassed(reminderType.deadline))
+      return `${reminderType.label} deadline has not passed yet (${formatDeadline(reminderType.deadline)}).`
+    return undefined
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className='flex items-center justify-between gap-2'>
+          <CardTitle>Evaluation Reminder Mailing</CardTitle>
+          {isModified && (
+            <Badge variant='outline' className='border-yellow-300 bg-yellow-100 text-yellow-800'>
+              Unsaved Changes
+            </Badge>
+          )}
+        </div>
+        <CardDescription>
+          Configure one shared reminder template and manually send reminders after each evaluation
+          deadline.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        <AvailableMailPlaceholders
+          customAdditionalPlaceholders={ASSESSMENT_REMINDER_PLACEHOLDERS}
+        />
+
+        {!courseMailingIsConfigured && (
+          <Alert variant='destructive'>
+            <AlertTitle>Course mailing not configured</AlertTitle>
+            <AlertDescription>
+              Configure the course reply-to mailing settings before sending reminders.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {isCoursePhaseError && (
+          <Alert variant='destructive'>
+            <AlertTitle>Failed to load phase metadata</AlertTitle>
+            <AlertDescription>Cannot load existing reminder template settings.</AlertDescription>
+          </Alert>
+        )}
+
+        {lastReport && (
+          <Alert>
+            <AlertTitle>Reminder send report</AlertTitle>
+            <AlertDescription>
+              Requested: {lastReport.requestedRecipients}, Successful:{' '}
+              {lastReport.successfulEmails.length}, Failed: {lastReport.failedEmails.length}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <ReminderTemplateEditor
+          subject={subject}
+          content={content}
+          onSubjectChange={setSubject}
+          onContentChange={setContent}
+          onSave={handleSaveTemplate}
+          isPending={isCoursePhasePending}
+          isSaving={isSavingTemplate}
+          isModified={isModified}
+          contentTextareaRef={contentTextareaRef}
+        />
+
+        <ManualReminderSendingSection
+          reminderTypes={reminderTypes}
+          lastSentAtByType={currentReminderMetaData.lastSentAtByType}
+          getDisableReason={getDisableReason}
+          isEvaluationCompletionsPending={isEvaluationCompletionsPending}
+          isSending={sendReminderMutation.isPending}
+          onSend={openConfirmationDialog}
+        />
+      </CardContent>
+
+      <ReminderSendConfirmationDialog
+        open={dialogOpen}
+        onOpenChange={handleDialogOpenChange}
+        confirmationReminderType={confirmationReminderType}
+        previousSentAt={
+          confirmationType ? currentReminderMetaData.lastSentAtByType[confirmationType] : undefined
+        }
+        isSending={sendReminderMutation.isPending}
+        onConfirm={sendConfirmedReminder}
+      />
+    </Card>
+  )
+}