Assessment: Show progress diagrams in Assessment Overview (#583)

* update server to 5 scoreLevels

* Update client to 5 score levels

* fix: tests

* fix: update score level display and competency description handling

* fix: refactor score level handling and update SQL comments for consistency

* fix: update score level reference in student score test

* fix: enhance score level mapping and add integration tests

* feat: Add assessment diagrams and score distribution charts

- Implemented AssessmentDiagram and AssessmentScoreLevelDiagram components for visualizing assessment data.
- Created ScoreDistributionBarChart and related components for displaying score distributions.
- Added utility functions for generating score distribution data points and configuring chart settings.
- Introduced new interfaces for data handling and improved grid layout for responsive design.
- Updated AssessmentOverviewPage and AssessmentStatisticsPage to include new diagrams.

* fix: remove unnecessary grid columns for assessment overview layout

* fix: update score level type to use ScoreLevel enum in counts

* fix: update score level handling in assessment requests and add mapping functions

* fix: rename score field to scoreNumeric for consistency across student score types

* fix: update score level mapping to use constants and improve error handling

* fix: refactor import paths for useGetParticipantionsWithAssessment and update interface imports

* fix: update score level mapping in DTO integration test for accuracy

* feat: add action item management and enhance assessment schema with new fields

* feat: implement action item management with CRUD operations and database integration

* feat: add GradeSuggestionBadge component for displaying grade suggestions

* fix: update default value for grade_suggestion in assessment_completion table

* feat: add ActionItem interface and enhance Assessment types with new fields

* feat: implement CRUD operations for action items and enhance assessment feedback components

* feat: refactor assessment feedback to use AssessmentCompletion component and implement action item management

* feat: refactor ActionItemPanel to use ActionItemRow and DeleteActionItemDialog components; enhance SQL queries for action items

* feat: update AssessmentCompletion layout and improve ActionItemRow delete button visibility

* fix: update assessment completion functionality to new db model

* feat: update gradeSuggestion type to float64 and adjust related logic in assessment completion components

* feat: update handleSaveFormData to accept parameters for remarks and grade; adjust related logic in AssessmentCompletion component

* fix: assessment server tests

* feat: update assessment types to use string for examples; enhance assessment completion validation logic

* fix: improve error handling in MapFloat64ToNumeric function

* Top Align Form Fields

* Core: Update grid layout in AssessmentForm for better responsiveness and add flex variants in Tailwind config

* Core: Add assessment template and course phase associations to category model and queries

* Core: Add assessment template ID to category model and update related queries and tests

* feat: Implement assessment template management

- Added AssessmentTemplate struct and related DTOs for creating, updating, and retrieving assessment templates.
- Implemented CRUD operations for assessment templates in the service layer.
- Created routes for assessment template management in the router.
- Added database queries for assessment templates and their relationships with course phases.
- Updated category DTOs and service to include assessment template associations.
- Enhanced tests for assessment template service and category service to cover new functionality.
- Modified database schema to allow multiple assessment templates and updated foreign key constraints.

* feat: Refactor category creation and update to include course phase ID

* feat: Add assessment template management with CRUD operations and UI integration

* fix: linting

* fix: update CountRemainingAssessmentsForStudent query with category_course_phase joins

* fix: add tests for assessment template router and fix assessment completion tests

* fix: rabbit comment

* refactor: extract assessmentTemplateSelection into submodules

* feat: implement action item counting for assessment completion

* fix: Remove duplicate import of ScoreLevel in BarChartWithScoreLevel component

Author: rappm

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

@@ -11,6 +11,9 @@ import { useParticipationStore } from '../../zustand/useParticipationStore'
 import { StudentScoreBadge } from '../components/StudentScoreBadge'
 import { useMemo } from 'react'
 
+import { AssessmentDiagram } from '../components/diagrams/AssessmentDiagram'
+import { AssessmentScoreLevelDiagram } from '../components/diagrams/AssessmentScoreLevelDiagram'
+
 export const AssessmentOverviewPage = (): JSX.Element => {
   const navigate = useNavigate()
   const path = useLocation().pathname
@@ -51,6 +54,10 @@ export const AssessmentOverviewPage = (): JSX.Element => {
       <p className='text-sm text-muted-foreground mb-4'>
         Click on a participant to view/edit their assessment.
       </p>
+      <div className='grid gap-6 grid-cols-1 lg:grid-cols-2 mb-6'>
+        <AssessmentDiagram participations={participations} scoreLevels={scoreLevels} />
+        <AssessmentScoreLevelDiagram participations={participations} scoreLevels={scoreLevels} />
+      </div>
       <div style={{ width: `${tableWidth}px` }}>
         <CoursePhaseParticipationsTablePage
           participants={participations ?? []}

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

@@ -13,14 +13,14 @@ import { useScoreLevelStore } from '../../zustand/useScoreLevelStore'
 import { getAllAssessmentsInPhase } from '../../network/queries/getAllAssessmentsInPhase'
 import { getAllAssessmentCompletionsInPhase } from '../../network/queries/getAllAssessmentCompletionsInPhase'
 
-import { useGetParticipantionsWithAssessment } from './hooks/useGetParticipantWithAssessment'
-
-import { AssessmentDiagram } from './diagrams/AssessmentDiagram'
-import { AssessmentScoreLevelDiagram } from './diagrams/AssessmentScoreLevelDiagram'
-import { GenderDiagram } from './diagrams/GenderDiagram'
-import { AuthorDiagram } from './diagrams/AuthorDiagram'
-import { CategoryDiagram } from './diagrams/CategoryDiagram'
-import { NationalityDiagram } from './diagrams/NationalityDiagram'
+import { useGetParticipantionsWithAssessment } from '../components/diagrams/hooks/useGetParticipantWithAssessment'
+
+import { AssessmentDiagram } from '../components/diagrams/AssessmentDiagram'
+import { AssessmentScoreLevelDiagram } from '../components/diagrams/AssessmentScoreLevelDiagram'
+import { GenderDiagram } from '../components/diagrams/GenderDiagram'
+import { AuthorDiagram } from '../components/diagrams/AuthorDiagram'
+import { CategoryDiagram } from '../components/diagrams/CategoryDiagram'
+import { NationalityDiagram } from '../components/diagrams/NationalityDiagram'
 
 export const AssessmentStatisticsPage = (): JSX.Element => {
   const { phaseId } = useParams<{ phaseId: string }>()

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/AssessmentDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/AssessmentDiagram.tsx

@@ -12,7 +12,7 @@ import { ScoreDistributionBarChart } from './scoreDistributionBarChart/ScoreDist
 import { createScoreDistributionDataPoint } from './scoreDistributionBarChart/utils/createScoreDistributionDataPoint'
 
 import { getGridSpanClass } from './utils/getGridSpanClass'
-import { ParticipationWithAssessment } from '../interfaces/ParticipationWithAssessment'
+import { ParticipationWithAssessment } from './interfaces/ParticipationWithAssessment'
 
 interface AuthorDiagramProps {
   participationsWithAssessment: ParticipationWithAssessment[]

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/AssessmentScoreLevelDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/AssessmentScoreLevelDiagram.tsx

@@ -3,7 +3,7 @@ import { BarChart, Bar, LabelList, XAxis, YAxis, Rectangle } from 'recharts'
 import { useMemo } from 'react'
 import { chartConfig } from './utils/chartConfig'
 import { getCornerRadius } from './utils/getCornerRadius'
-import { DataPoint } from '../interfaces/DataPoint'
+import { DataPoint } from './interfaces/DataPoint'
 
 import { ScoreLevel } from '../../../interfaces/scoreLevel'
 

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/AuthorDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/AuthorDiagram.tsx

@@ -7,7 +7,7 @@ import {
   CardTitle,
 } from '@tumaet/prompt-ui-components'
 
-import { ParticipationWithAssessment } from '../interfaces/ParticipationWithAssessment'
+import { ParticipationWithAssessment } from './interfaces/ParticipationWithAssessment'
 
 import { ScoreDistributionBarChart } from './scoreDistributionBarChart/ScoreDistributionBarChart'
 import { createScoreDistributionDataPoint } from './scoreDistributionBarChart/utils/createScoreDistributionDataPoint'

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/BarChartWithScoreLevel.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/BarChartWithScoreLevel.tsx

@@ -9,7 +9,7 @@ import { getCountryName } from '@/lib/getCountries'
 
 import { ScoreDistributionBarChart } from './scoreDistributionBarChart/ScoreDistributionBarChart'
 
-import { ParticipationWithAssessment } from '../interfaces/ParticipationWithAssessment'
+import { ParticipationWithAssessment } from './interfaces/ParticipationWithAssessment'
 import { ScoreLevel } from '../../../interfaces/scoreLevel'
 
 import { createScoreDistributionDataPoint } from './scoreDistributionBarChart/utils/createScoreDistributionDataPoint'

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/CategoryDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/CategoryDiagram.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'react'
 
 import { CoursePhaseParticipationWithStudent } from '@tumaet/prompt-shared-state'
-import { ScoreLevelWithParticipation } from '../../../interfaces/scoreLevelWithParticipation'
+import { ScoreLevelWithParticipation } from '../../../../interfaces/scoreLevelWithParticipation'
 import { ParticipationWithAssessment } from '../interfaces/ParticipationWithAssessment'
-import { AssessmentCompletion } from '../../../interfaces/assessment'
-import { Assessment } from '../../../interfaces/assessment'
+import { AssessmentCompletion } from '../../../../interfaces/assessment'
+import { Assessment } from '../../../../interfaces/assessment'
 
 export const useGetParticipantionsWithAssessment = (
   participants: CoursePhaseParticipationWithStudent[],

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/GenderDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/GenderDiagram.tsx

@@ -1,7 +1,7 @@
 import { CoursePhaseParticipationWithStudent } from '@tumaet/prompt-shared-state'
-import { ScoreLevel } from '../../../interfaces/scoreLevel'
-import { AssessmentCompletion } from '../../../interfaces/assessment'
-import { Assessment } from '../../../interfaces/assessment'
+import { ScoreLevel } from '../../../../interfaces/scoreLevel'
+import { AssessmentCompletion } from '../../../../interfaces/assessment'
+import { Assessment } from '../../../../interfaces/assessment'
 
 export interface ParticipationWithAssessment {
   participation: CoursePhaseParticipationWithStudent

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/diagrams/NationalityDiagram.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/NationalityDiagram.tsx

@@ -7,7 +7,7 @@ export function ScoreDistributionTooltipContent(props: any) {
   }
 
   const data = props.payload[0].payload
-  const counts: Record<string, number> = data.counts
+  const counts: Record<ScoreLevel, number> = data.counts
   const total = Object.values(counts).reduce((sum, count) => sum + count, 0)
 
   if (total === 0) {

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/hooks/useGetParticipantWithAssessment.tsx renamed to clients/assessment_component/src/assessment/pages/components/diagrams/hooks/useGetParticipantWithAssessment.tsx

@@ -7,5 +7,5 @@ export interface ScoreDistributionDataPoint {
   lowerQuartile: number
   median: ScoreLevel
   upperQuartile: number
-  counts: Record<string, number>
+  counts: Record<ScoreLevel, number>
 }

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/interfaces/DataPoint.ts renamed to clients/assessment_component/src/assessment/pages/components/diagrams/interfaces/DataPoint.ts

@@ -23,10 +23,11 @@ export const createScoreDistributionDataPoint = (
       median: ScoreLevel.VeryBad,
       upperQuartile: 0,
       counts: {
-        novice: 0,
-        intermediate: 0,
-        advanced: 0,
-        expert: 0,
+        veryBad: 0,
+        bad: 0,
+        ok: 0,
+        good: 0,
+        veryGood: 0,
       },
     }
   }
@@ -76,7 +77,7 @@ export const createScoreDistributionDataPoint = (
         }
         return counts
       },
-      { veryBad: 0, bad: 0, ok: 0, good: 0, veryGood: 0 } as Record<string, number>,
+      { veryBad: 0, bad: 0, ok: 0, good: 0, veryGood: 0 } as Record<ScoreLevel, number>,
     ),
   }
 }

clients/assessment_component/src/assessment/pages/AssessmentStatisticsPage/interfaces/ParticipationWithAssessment.ts renamed to clients/assessment_component/src/assessment/pages/components/diagrams/interfaces/ParticipationWithAssessment.ts

@@ -1,4 +1,4 @@
-import { DataPoint } from '../../interfaces/DataPoint'
+import { DataPoint } from '../interfaces/DataPoint'
 
 type CornerRadius = [number, number, number, number]