REK-155 Admin effectiveness analysis list in consultations and webinars, mocked details page

config/routes.ts

@@ -118,19 +118,37 @@
       },
       {
         path: '/courses/webinars',
+        redirect: '/courses/webinars/list',
+      },
+      {
+        path: '/courses/webinars/list',
         name: 'Webinars',
         icon: 'CustomerServiceOutlined',
         access: 'webinarListPermission',
         component: './Webinars',
       },
       {
-        path: '/courses/webinars/:webinar',
+        path: '/courses/webinars/effectiveness-analysis/:modelId/:id',
+        access: 'webinarDetailsPermission',
+        component: './Consultations/components/EffectivenessAnalysisDetails',
+        hideInMenu: true,
+        modelType: 'webinar',
+      },
+      {
+        path: '/courses/webinars/:tab',
+        name: 'Webinars',
+        access: 'webinarListPermission',
+        component: './Webinars',
+        hideInMenu: true,
+      },
+      {
+        path: '/courses/webinars/webinar/:webinar',
         access: 'webinarDetailsPermission',
         component: './Webinars/form',
         hideInMenu: true,
       },
       {
-        path: '/courses/webinars/:webinar/:tab',
+        path: '/courses/webinars/webinar/:webinar/:tab',
         access: 'webinarDetailsPermission',
         component: './Webinars/form',
         hideInMenu: true,
@@ -535,6 +553,13 @@
         component: './Consultations/form',
         hideInMenu: true,
       },
+      {
+        path: '/other/consultations/effectiveness-analysis/:modelId/:id',
+        access: 'consultationDetailsPermission',
+        component: './Consultations/components/EffectivenessAnalysisDetails',
+        hideInMenu: true,
+        modelType: 'consultation',
+      },
       {
         name: 'StationaryEvents',
         icon: 'global',

package.json

@@ -101,6 +101,7 @@
     "react-player": "^2.14.1",
     "react-sortable-hoc": "^2.0.0",
     "react-tiny-oembed": "^1.1.0",
+    "recharts": "^3.8.0",
     "reportbro-designer": "^3.6.0"
   },
   "devDependencies": {

src/locales/en-US.ts

@@ -160,6 +160,8 @@ export default {
   access: 'Access',
   answers: 'Answers',
   answer: 'Answer',
+  'menu.Webinars': 'Webinars',
+  'menu.NewWebinar': 'New webinar',
   'menu.Courses': 'Courses',
   'menu.Courses.List': 'List',
   'menu.Courses.Form': 'Form',
@@ -239,6 +241,31 @@ export default {
   slug: 'Slug',
   name: 'Name',
   ID: 'ID',
+  effectiveness_analysis: 'Effectiveness analysis',
+  average_attention: 'Average attention',
+  emotions: 'Emotions',
+  rating: 'Rating',
+  recording_short: 'Rec.',
+  download_video_btn_tooltip: 'Download recording {duration}',
+  'time.seconds': '{value} s',
+  'time.minutes': '{value} m',
+  recording_available_until: 'Recording available for: {time}',
+  recording_will_be_deleted: 'It will be deleted after this time',
+  engagement_rating: 'Meeting quality rating',
+  ai_analysis_average: 'Average user rating score via questionnaire',
+  resolution: 'Data resolution',
+  listeners_engagement: "Listeners' engagement (%)",
+  detected_emotions: 'Detected emotions',
+  ai_segment_analysis: 'AI segment analysis...',
+  time: 'Time',
+  time_segment: 'Time slot',
+  emotion_surprised: 'Surprised',
+  emotion_disgusted: 'Disgusted',
+  emotion_sad: 'Sad',
+  emotion_fearful: 'Fearful',
+  emotion_happy: 'Happy',
+  emotion_angry: 'Angry',
+  emotion_neutral: 'Neutral',
   newCategory: 'Create new Category',
   editCategory: 'Edit Category',
   parent_category: 'Parent category',

src/locales/fr-FR.ts

@@ -63,6 +63,8 @@ export default {
   library: 'Bibliothèque',
   access: 'Accès',
   answers: 'Réponses',
+  'menu.Webinars': 'Webinaires',
+  'menu.NewWebinar': 'Nouveau webinaire',
   'menu.Courses': 'Cours',
   'menu.Courses.List': 'Liste',
   'menu.Courses.Form': 'Formulaire',
@@ -129,6 +131,14 @@ export default {
   slug: 'Slug',
   name: 'Nom',
   ID: 'ID',
+  effectiveness_analysis: 'Analyse d’efficacité',
+  average_attention: 'Attention moyenne',
+  emotions: 'Émotions',
+  rating: 'Évaluation',
+  recording_short: 'Enreg.',
+  download_video_btn_tooltip: 'Télécharger l’enregistrement {duration}',
+  'time.seconds': '{value} s',
+  'time.minutes': '{value} m',
   newCategory: 'Créer une nouvelle catégorie',
   editCategory: 'Modifier la catégorie',
   parent_category: 'Catégorie parente',

src/locales/pl-PL.ts

@@ -110,6 +110,8 @@ export default {
   H5Ps: 'H5P',
   new: 'Nowy',
   library: 'Biblioteka',
+  'menu.Webinars': 'Webinary',
+  'menu.NewWebinar': 'Nowy webinar',
   'menu.Courses': 'Kursy',
   'menu.Teacher': 'Dydaktyk',
   'menu.Teacher.Subjects': 'Przedmioty',
@@ -216,6 +218,36 @@ export default {
   slug: 'Slug',
   name: 'Nazwa',
   ID: 'ID',
+  effectiveness_analysis: 'Analiza skuteczności',
+  average_attention: 'Średnia atencja',
+  emotions: 'Emocje',
+  rating: 'Ocena',
+  recording_short: 'Nagr.',
+  download_video_btn_tooltip: 'Pobierz nagranie {duration}',
+  other_activities: 'Inne aktywności',
+  consultations: 'Konsultacje',
+  webinars: 'Webinary',
+  detailed_analysis: 'Analiza szczegółowa',
+  download_recording: 'Pobierz nagranie',
+  'time.seconds': '{value} s',
+  'time.minutes': '{value} m',
+  recording_available_until: 'Nagranie dostępne jeszcze przez: {time}',
+  recording_will_be_deleted: 'Po tym czasie zostanie ono skasowane',
+  engagement_rating: 'Ocena jakości spotkania',
+  ai_analysis_average: 'Średni wynik oceny użytkowników poprzez kwestionariusz',
+  resolution: 'Rozdzielczość danych',
+  listeners_engagement: 'Zaangażowanie słuchaczy (%)',
+  detected_emotions: 'Wykryte emocje',
+  ai_segment_analysis: 'Analiza segmentu AI...',
+  time: 'Czas',
+  time_segment: 'Przedział czasowy',
+  emotion_surprised: 'Zaskoczenie',
+  emotion_disgusted: 'Zniesmaczenie',
+  emotion_sad: 'Smutek',
+  emotion_fearful: 'Strach',
+  emotion_happy: 'Radość',
+  emotion_angry: 'Złość',
+  emotion_neutral: 'Neutralny',
   newCategory: 'Utwórz nową kategorię',
   editCategory: 'Edytuj kategorię',
   parent_category: 'Nadrzędna kategoria',

src/pages/Consultations/components/CustomAnalysisTooltip.tsx

@@ -0,0 +1,92 @@
+import type { ChartPoint } from '@/pages/Consultations/components/types';
+import { ANALYSIS_COLORS, EMOTION_POOL, formatTime, getLabelColorByValue } from '@/utils/utils';
+import { FormattedMessage } from '@@/exports';
+import styled from 'styled-components';
+
+const CustomTooltipWrapper = styled.div`
+  background: white;
+  border: 1px solid ${ANALYSIS_COLORS.border};
+  padding: 16px;
+  border-radius: 10px;
+  width: 260px;
+  z-index: 1000;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+`;
+
+const TooltipHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+`;
+
+const EmotionTitle = styled.span`
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+const PercentageBadge = styled.span<{ $color: string }>`
+  padding: 2px 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  color: ${(props) => props.$color};
+  background: ${(props) => props.$color}15;
+  border: 1px solid ${(props) => props.$color}40;
+`;
+
+const TimeRangeWrapper = styled.div`
+  font-size: 12px;
+  color: ${ANALYSIS_COLORS.textSecondary};
+  margin-bottom: 4px;
+
+  b {
+    color: ${ANALYSIS_COLORS.darkText};
+  }
+`;
+
+const PreviewImg = styled.img`
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  background: #262626;
+  border-radius: 6px;
+  margin-top: 8px;
+`;
+
+interface CustomAnalysisTooltipProps {
+  active?: boolean;
+  payload?: {
+    payload: ChartPoint;
+  }[];
+  label?: string | number;
+}
+
+export const CustomAnalysisTooltip = ({ active, payload }: CustomAnalysisTooltipProps) => {
+  if (!active || !payload || !payload.length) return null;
+
+  const data = payload[0].payload;
+  const emotion = EMOTION_POOL.find((e) => e.key === data.emotionKey) || EMOTION_POOL[6];
+  const valColor = getLabelColorByValue(data.attention);
+  const startTime = data.second;
+  const interval = data.interval ? Number(data.interval) : 15;
+  const endTime = startTime + interval;
+
+  const timeRange = `${formatTime(startTime)} - ${formatTime(endTime)}`;
+
+  return (
+    <CustomTooltipWrapper>
+      <TooltipHeader>
+        <EmotionTitle>
+          {emotion.icon} <FormattedMessage id={emotion.labelId} />
+        </EmotionTitle>
+        <PercentageBadge $color={valColor}>{data.attention}%</PercentageBadge>
+      </TooltipHeader>
+
+      <TimeRangeWrapper>
+        <FormattedMessage id="time_segment" />: <b>{timeRange}</b>
+      </TimeRangeWrapper>
+
+      {data.screen_path && <PreviewImg src={data.screen_path as string} alt="preview" />}
+    </CustomTooltipWrapper>
+  );
+};