adding input validation to application dates

clients/core/src/managementConsole/applicationAdministration/pages/ApplicationConfiguration/components/ApplicationConfigDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -10,17 +10,18 @@ import {
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
-import { ApplicationMetaData } from '../../../interfaces/applicationMetaData'
+import type { ApplicationMetaData } from '../../../interfaces/applicationMetaData'
 import { DatePicker } from '@/components/DatePicker'
 import { format, set, parse, formatISO } from 'date-fns'
 import { toZonedTime } from 'date-fns-tz'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { UpdateCoursePhase } from '@tumaet/prompt-shared-state'
+import type { UpdateCoursePhase } from '@tumaet/prompt-shared-state'
 import { updateCoursePhase } from '@core/network/mutations/updateCoursePhase'
 import { useParams } from 'react-router-dom'
 import { DialogLoadingDisplay } from '@/components/dialog/DialogLoadingDisplay'
-import { DialogErrorDisplay } from '@/components/dialog/DialogErrorDisplay'
+import { AlertCircle } from 'lucide-react'
 import { Input } from '@/components/ui/input'
+import { ApplicationConfigDialogError } from './ApplicationConfigDialogError'
 
 interface ApplicationConfigDialogProps {
   isOpen: boolean
@@ -40,38 +41,41 @@ export function ApplicationConfigDialog({
   const queryClient = useQueryClient()
   const { phaseId } = useParams<{ phaseId: string }>()
 
-  const [startDate, setStartDate] = useState<Date | undefined>(
-    initialData.applicationStartDate ? new Date(initialData.applicationStartDate) : undefined,
-  )
-  const [endDate, setEndDate] = useState<Date | undefined>(
-    initialData.applicationEndDate ? new Date(initialData.applicationEndDate) : undefined,
-  )
-
-  const [startTime, setStartTime] = useState(() => {
-    if (initialData.applicationStartDate) {
-      const date = new Date(initialData.applicationStartDate)
-      return getTimeString(date)
-    }
-    return '00:00'
-  })
-
-  const [endTime, setEndTime] = useState(() => {
-    if (initialData.applicationEndDate) {
-      const date = new Date(initialData.applicationEndDate)
-      return getTimeString(date)
-    }
-    return '23:59'
-  })
+  // States for form fields
+  const [startDate, setStartDate] = useState<Date | undefined>()
+  const [endDate, setEndDate] = useState<Date | undefined>()
+  const [startTime, setStartTime] = useState('00:00')
+  const [endTime, setEndTime] = useState('23:59')
+  const [externalStudentsAllowed, setExternalStudentsAllowed] = useState(false)
+  const [universityLoginAvailable, setUniversityLoginAvailable] = useState(false)
+  const [dateError, setDateError] = useState<string | null>(null)
 
   const timeZone = 'Europe/Berlin'
 
-  const [externalStudentsAllowed, setExternalStudentsAllowed] = useState(
-    initialData.externalStudentsAllowed,
-  )
-
-  const [universityLoginAvailable, setUniversityLoginAvailable] = useState(
-    initialData.universityLoginAvailable,
-  )
+  // Effect to reinitialize form values on dialog open (or when initialData changes)
+  useEffect(() => {
+    if (isOpen) {
+      setStartDate(
+        initialData.applicationStartDate ? new Date(initialData.applicationStartDate) : undefined,
+      )
+      setEndDate(
+        initialData.applicationEndDate ? new Date(initialData.applicationEndDate) : undefined,
+      )
+      setStartTime(
+        initialData.applicationStartDate
+          ? getTimeString(new Date(initialData.applicationStartDate))
+          : '00:00',
+      )
+      setEndTime(
+        initialData.applicationEndDate
+          ? getTimeString(new Date(initialData.applicationEndDate))
+          : '23:59',
+      )
+      setExternalStudentsAllowed(initialData?.externalStudentsAllowed ?? false)
+      setUniversityLoginAvailable(initialData?.universityLoginAvailable ?? false)
+      setDateError(null)
+    }
+  }, [isOpen, initialData])
 
   const {
     mutate: mutatePhase,
@@ -90,35 +94,45 @@ export function ApplicationConfigDialog({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
+    // Build full Date objects by combining the date and time values
+    let startDateTime: Date | null = null
+    let endDateTime: Date | null = null
+
+    if (startDate) {
+      const parsedStartTime = parse(startTime, 'HH:mm', new Date())
+      startDateTime = set(startDate, {
+        hours: parsedStartTime.getHours(),
+        minutes: parsedStartTime.getMinutes(),
+      })
+    }
+    if (endDate) {
+      const parsedEndTime = parse(endTime, 'HH:mm', new Date())
+      endDateTime = set(endDate, {
+        hours: parsedEndTime.getHours(),
+        minutes: parsedEndTime.getMinutes(),
+      })
+    }
+
+    // Validate that the start date/time comes before the end date/time
+    if (startDateTime && endDateTime && startDateTime.getTime() >= endDateTime.getTime()) {
+      setDateError('Start date and time must be before end date and time.')
+      return
+    }
+    // Clear any previous error
+    setDateError(null)
+
     const updatedPhase: UpdateCoursePhase = {
       id: phaseId ?? '',
       restrictedData: {
-        applicationStartDate: startDate
-          ? formatISO(
-              toZonedTime(
-                set(startDate, {
-                  hours: parse(startTime, 'HH:mm', new Date()).getHours(),
-                  minutes: parse(startTime, 'HH:mm', new Date()).getMinutes(),
-                }),
-                timeZone,
-              ),
-            )
-          : undefined,
-        applicationEndDate: endDate
-          ? formatISO(
-              toZonedTime(
-                set(endDate, {
-                  hours: parse(endTime, 'HH:mm', new Date()).getHours(),
-                  minutes: parse(endTime, 'HH:mm', new Date()).getMinutes(),
-                }),
-                timeZone,
-              ),
-            )
+        applicationStartDate: startDateTime
+          ? formatISO(toZonedTime(startDateTime, timeZone))
           : undefined,
+        applicationEndDate: endDateTime ? formatISO(toZonedTime(endDateTime, timeZone)) : undefined,
         externalStudentsAllowed,
         universityLoginAvailable,
       },
     }
+
     mutatePhase(updatedPhase)
   }
 
@@ -128,7 +142,10 @@ export function ApplicationConfigDialog({
         {isPending ? (
           <DialogLoadingDisplay customMessage='Saving application config...' />
         ) : isMutateError ? (
-          <DialogErrorDisplay error={error} />
+          <div className='space-y-4'>
+            <ApplicationConfigDialogError error={error} />
+            <Button onClick={onClose}>Close</Button>
+          </div>
         ) : (
           <>
             <DialogHeader>
@@ -138,6 +155,21 @@ export function ApplicationConfigDialog({
               Note: All times are in German time (Europe/Berlin).
             </DialogDescription>
 
+            {/* Display validation error if present */}
+            {dateError && (
+              <div
+                className={`flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg
+                    bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800`}
+                role='alert'
+              >
+                <AlertCircle className='flex-shrink-0 inline w-4 h-4 mr-3' />
+                <span className='sr-only'>Error</span>
+                <div>
+                  <span className='font-medium'>Validation error:</span> {dateError}
+                </div>
+              </div>
+            )}
+
             <form onSubmit={handleSubmit}>
               <div className='grid gap-4 py-4'>
                 {/* Start Date/Time */}

clients/core/src/managementConsole/applicationAdministration/pages/ApplicationConfiguration/components/ApplicationConfigDialogError.tsx

@@ -0,0 +1,12 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { AlertCircle } from 'lucide-react'
+
+export const ApplicationConfigDialogError = ({ error }: { error: Error }) => (
+  <Alert variant='destructive'>
+    <AlertCircle className='h-4 w-4' />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      {error.message || 'An unexpected error occurred. Please try again.'}
+    </AlertDescription>
+  </Alert>
+)