diff --git a/src/components/PermissionList.tsx b/src/components/PermissionList.tsx
index 2911b22f..e3424c08 100644
--- a/src/components/PermissionList.tsx
+++ b/src/components/PermissionList.tsx
@@ -1,105 +1,82 @@
import React from "react";
-import { Permission } from "@/interfaces/permissions";
-import {
- createColumnHelper,
- flexRender,
- getCoreRowModel,
- useReactTable,
- Row,
-} from "@tanstack/react-table";
+import {Permission} from "@/interfaces/permissions";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable, Row} from "@tanstack/react-table";
import Link from "next/link";
-import { convertCamelCaseToReadable } from "@/utils/string";
+import {convertCamelCaseToReadable} from "@/utils/string";
interface Props {
- permissions: Permission[];
+ permissions: Permission[];
}
const columnHelper = createColumnHelper
();
const defaultColumns = [
- columnHelper.accessor("type", {
- header: () => Type,
- cell: ({ row, getValue }) => (
-
- {convertCamelCaseToReadable(getValue() as string)}
-
- ),
- }),
+ columnHelper.accessor("type", {
+ header: () => Type,
+ cell: ({row, getValue}) => (
+
+ {convertCamelCaseToReadable(getValue() as string)}
+
+ ),
+ }),
];
-export default function PermissionList({ permissions }: Props) {
- const table = useReactTable({
- data: permissions,
- columns: defaultColumns,
- getCoreRowModel: getCoreRowModel(),
- });
+export default function PermissionList({permissions}: Props) {
+ const table = useReactTable({
+ data: permissions,
+ columns: defaultColumns,
+ getCoreRowModel: getCoreRowModel(),
+ });
- const groupedData: { [key: string]: Row[] } = table
- .getRowModel()
- .rows.reduce((groups: { [key: string]: Row[] }, row) => {
- const parent = row.original.topic;
- if (!groups[parent]) {
- groups[parent] = [];
- }
- groups[parent].push(row);
- return groups;
- }, {});
+ const groupedData: {[key: string]: Row[]} = table.getRowModel().rows.reduce((groups: {[key: string]: Row[]}, row) => {
+ const parent = row.original.topic;
+ if (!groups[parent]) {
+ groups[parent] = [];
+ }
+ groups[parent].push(row);
+ return groups;
+ }, {});
- return (
-
-
-
-
- {table.getHeaderGroups().map((headerGroup) => (
-
- {headerGroup.headers.map((header) => (
- |
- {header.isPlaceholder
- ? null
- : flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
- |
- ))}
-
- ))}
-
-
- {Object.keys(groupedData).map((parent) => (
-
-
- |
- {parent}
- |
-
- {groupedData[parent].map((row, i) => (
-
- {row.getVisibleCells().map((cell) => (
- |
- {flexRender(
- cell.column.columnDef.cell,
- cell.getContext()
- )}
- |
- ))}
-
- ))}
-
- ))}
-
-
-
-
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+ |
+ ))}
+
+ ))}
+
+
+ {Object.keys(groupedData).map((parent) => (
+
+
+ |
+ {parent}
+ |
+
+ {groupedData[parent].map((row, i) => (
+
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ |
+ ))}
+
+ ))}
+
+ ))}
+
+
+
+
{userSolution}
)}
-
+
{!solutions ? userInput : solutions.join(" / ")}
diff --git a/src/components/TrainingContent/ExerciseWalkthrough.tsx b/src/components/TrainingContent/ExerciseWalkthrough.tsx
index 74c7219f..75a2dbbd 100644
--- a/src/components/TrainingContent/ExerciseWalkthrough.tsx
+++ b/src/components/TrainingContent/ExerciseWalkthrough.tsx
@@ -1,287 +1,280 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { animated } from '@react-spring/web';
-import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
-import HighlightContent from '../HighlightContent';
-import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
-
+import React, {useState, useEffect, useRef, useCallback} from "react";
+import {animated} from "@react-spring/web";
+import {FaRegCirclePlay, FaRegCircleStop} from "react-icons/fa6";
+import HighlightContent from "../HighlightContent";
+import {ITrainingTip, SegmentRef, TimelineEvent} from "./TrainingInterfaces";
const ExerciseWalkthrough: React.FC
= (tip: ITrainingTip) => {
- const [isAutoPlaying, setIsAutoPlaying] = useState(false);
- const [currentTime, setCurrentTime] = useState(0);
- const [walkthroughHtml, setWalkthroughHtml] = useState('');
- const [highlightedPhrases, setHighlightedPhrases] = useState([]);
- const [isPlaying, setIsPlaying] = useState(false);
- const timelineRef = useRef([]);
- const animationRef = useRef(null);
- const segmentsRef = useRef([]);
+ const [isAutoPlaying, setIsAutoPlaying] = useState(false);
+ const [currentTime, setCurrentTime] = useState(0);
+ const [walkthroughHtml, setWalkthroughHtml] = useState("");
+ const [highlightedPhrases, setHighlightedPhrases] = useState([]);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const timelineRef = useRef([]);
+ const animationRef = useRef(null);
+ const segmentsRef = useRef([]);
- const toggleAutoPlay = useCallback(() => {
- setIsAutoPlaying((prev) => {
- if (!prev && currentTime === getMaxTime()) {
- setCurrentTime(0);
- }
- return !prev;
- });
- }, [currentTime]);
+ const toggleAutoPlay = useCallback(() => {
+ setIsAutoPlaying((prev) => {
+ if (!prev && currentTime === getMaxTime()) {
+ setCurrentTime(0);
+ }
+ return !prev;
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentTime]);
- const handleAnimationComplete = useCallback(() => {
- setIsAutoPlaying(false);
- }, []);
+ const handleAnimationComplete = useCallback(() => {
+ setIsAutoPlaying(false);
+ }, []);
- const handleResetAnimation = useCallback((newTime: number) => {
- setCurrentTime(newTime);
- }, []);
+ const handleResetAnimation = useCallback((newTime: number) => {
+ setCurrentTime(newTime);
+ }, []);
- const getMaxTime = (): number => {
- return tip.exercise?.segments.reduce((sum, segment) =>
- sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0
- ) ?? 0;
- };
+ const getMaxTime = (): number => {
+ return (
+ tip.exercise?.segments.reduce((sum, segment) => sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0) ?? 0
+ );
+ };
- useEffect(() => {
- const timeline: TimelineEvent[] = [];
- let currentTimePosition = 0;
- segmentsRef.current = [];
+ useEffect(() => {
+ const timeline: TimelineEvent[] = [];
+ let currentTimePosition = 0;
+ segmentsRef.current = [];
- tip.exercise?.segments.forEach((segment, index) => {
- const parser = new DOMParser();
- const doc = parser.parseFromString(segment.html, 'text/html');
- const words: string[] = [];
- const walkTree = (node: Node) => {
- if (node.nodeType === Node.TEXT_NODE) {
- words.push(...(node.textContent?.split(/\s+/).filter(word => word.length > 0) || []));
- } else if (node.nodeType === Node.ELEMENT_NODE) {
- Array.from(node.childNodes).forEach(walkTree);
- }
- };
- walkTree(doc.body);
+ tip.exercise?.segments.forEach((segment, index) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(segment.html, "text/html");
+ const words: string[] = [];
+ const walkTree = (node: Node) => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ words.push(...(node.textContent?.split(/\s+/).filter((word) => word.length > 0) || []));
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ Array.from(node.childNodes).forEach(walkTree);
+ }
+ };
+ walkTree(doc.body);
- const textDuration = words.length * segment.wordDelay;
+ const textDuration = words.length * segment.wordDelay;
- segmentsRef.current.push({
- ...segment,
- words: words,
- startTime: currentTimePosition,
- endTime: currentTimePosition + textDuration
- });
+ segmentsRef.current.push({
+ ...segment,
+ words: words,
+ startTime: currentTimePosition,
+ endTime: currentTimePosition + textDuration,
+ });
- timeline.push({
- type: 'text',
- start: currentTimePosition,
- end: currentTimePosition + textDuration,
- segmentIndex: index
- });
+ timeline.push({
+ type: "text",
+ start: currentTimePosition,
+ end: currentTimePosition + textDuration,
+ segmentIndex: index,
+ });
- currentTimePosition += textDuration;
+ currentTimePosition += textDuration;
- timeline.push({
- type: 'highlight',
- start: currentTimePosition,
- end: currentTimePosition + segment.holdDelay,
- content: segment.highlight,
- segmentIndex: index
- });
+ timeline.push({
+ type: "highlight",
+ start: currentTimePosition,
+ end: currentTimePosition + segment.holdDelay,
+ content: segment.highlight,
+ segmentIndex: index,
+ });
- currentTimePosition += segment.holdDelay;
- });
+ currentTimePosition += segment.holdDelay;
+ });
- timelineRef.current = timeline;
- }, [tip.exercise?.segments]);
+ timelineRef.current = timeline;
+ }, [tip.exercise?.segments]);
- const updateText = useCallback(() => {
- const currentEvent = timelineRef.current.find(
- event => currentTime >= event.start && currentTime < event.end
- );
+ const updateText = useCallback(() => {
+ const currentEvent = timelineRef.current.find((event) => currentTime >= event.start && currentTime < event.end);
- if (currentEvent) {
- if (currentEvent.type === 'text') {
- const segment = segmentsRef.current[currentEvent.segmentIndex];
- const elapsedTime = currentTime - currentEvent.start;
- const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
+ if (currentEvent) {
+ if (currentEvent.type === "text") {
+ const segment = segmentsRef.current[currentEvent.segmentIndex];
+ const elapsedTime = currentTime - currentEvent.start;
+ const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
- const previousSegmentsHtml = segmentsRef.current
- .slice(0, currentEvent.segmentIndex)
- .map(seg => seg.html)
- .join('');
+ const previousSegmentsHtml = segmentsRef.current
+ .slice(0, currentEvent.segmentIndex)
+ .map((seg) => seg.html)
+ .join("");
- const parser = new DOMParser();
- const doc = parser.parseFromString(segment.html, 'text/html');
- let wordCount = 0;
- const walkTree = (node: Node, action: (node: Node) => void): boolean => {
- if (node.nodeType === Node.TEXT_NODE && node.textContent) {
- const words = node.textContent.split(/(\s+)/).filter(word => word.length > 0);
- if (wordCount + words.filter(w => !/\s+/.test(w)).length <= wordsToShow) {
- action(node.cloneNode(true));
- wordCount += words.filter(w => !/\s+/.test(w)).length;
- } else {
- const remainingWords = wordsToShow - wordCount;
- const newTextContent = words.reduce((acc, word) => {
- if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
- acc.text += word;
- acc.nonSpaceWords++;
- } else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
- acc.text += word;
- }
- return acc;
- }, { text: '', nonSpaceWords: 0 }).text;
- const newNode = node.cloneNode(false);
- newNode.textContent = newTextContent;
- action(newNode);
- wordCount = wordsToShow;
- }
- } else if (node.nodeType === Node.ELEMENT_NODE) {
- const clone = node.cloneNode(false);
- action(clone);
- Array.from(node.childNodes).some(child => {
- return walkTree(child, childNode => (clone as Node).appendChild(childNode));
- });
- }
- return wordCount >= wordsToShow;
- };
- const fragment = document.createDocumentFragment();
- walkTree(doc.body, node => fragment.appendChild(node));
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(segment.html, "text/html");
+ let wordCount = 0;
+ const walkTree = (node: Node, action: (node: Node) => void): boolean => {
+ if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+ const words = node.textContent.split(/(\s+)/).filter((word) => word.length > 0);
+ if (wordCount + words.filter((w) => !/\s+/.test(w)).length <= wordsToShow) {
+ action(node.cloneNode(true));
+ wordCount += words.filter((w) => !/\s+/.test(w)).length;
+ } else {
+ const remainingWords = wordsToShow - wordCount;
+ const newTextContent = words.reduce(
+ (acc, word) => {
+ if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
+ acc.text += word;
+ acc.nonSpaceWords++;
+ } else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
+ acc.text += word;
+ }
+ return acc;
+ },
+ {text: "", nonSpaceWords: 0},
+ ).text;
+ const newNode = node.cloneNode(false);
+ newNode.textContent = newTextContent;
+ action(newNode);
+ wordCount = wordsToShow;
+ }
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ const clone = node.cloneNode(false);
+ action(clone);
+ Array.from(node.childNodes).some((child) => {
+ return walkTree(child, (childNode) => (clone as Node).appendChild(childNode));
+ });
+ }
+ return wordCount >= wordsToShow;
+ };
+ const fragment = document.createDocumentFragment();
+ walkTree(doc.body, (node) => fragment.appendChild(node));
- const serializer = new XMLSerializer();
- const currentSegmentHtml = Array.from(fragment.childNodes)
- .map(node => serializer.serializeToString(node))
- .join('');
- const newHtml = previousSegmentsHtml + currentSegmentHtml;
+ const serializer = new XMLSerializer();
+ const currentSegmentHtml = Array.from(fragment.childNodes)
+ .map((node) => serializer.serializeToString(node))
+ .join("");
+ const newHtml = previousSegmentsHtml + currentSegmentHtml;
- setWalkthroughHtml(newHtml);
- setHighlightedPhrases([]);
- } else if (currentEvent.type === 'highlight') {
- const newHtml = segmentsRef.current
- .slice(0, currentEvent.segmentIndex + 1)
- .map(seg => seg.html)
- .join('');
- setWalkthroughHtml(newHtml);
- setHighlightedPhrases(currentEvent.content || []);
- }
- }
- }, [currentTime]);
+ setWalkthroughHtml(newHtml);
+ setHighlightedPhrases([]);
+ } else if (currentEvent.type === "highlight") {
+ const newHtml = segmentsRef.current
+ .slice(0, currentEvent.segmentIndex + 1)
+ .map((seg) => seg.html)
+ .join("");
+ setWalkthroughHtml(newHtml);
+ setHighlightedPhrases(currentEvent.content || []);
+ }
+ }
+ }, [currentTime]);
- useEffect(() => {
- updateText();
- }, [currentTime, updateText]);
+ useEffect(() => {
+ updateText();
+ }, [currentTime, updateText]);
- useEffect(() => {
- if (isAutoPlaying) {
- const lastEvent = timelineRef.current[timelineRef.current.length - 1];
- if (lastEvent && currentTime >= lastEvent.end) {
- setCurrentTime(0);
- }
- setIsPlaying(true);
- } else {
- setIsPlaying(false);
- }
- }, [isAutoPlaying, currentTime]);
+ useEffect(() => {
+ if (isAutoPlaying) {
+ const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+ if (lastEvent && currentTime >= lastEvent.end) {
+ setCurrentTime(0);
+ }
+ setIsPlaying(true);
+ } else {
+ setIsPlaying(false);
+ }
+ }, [isAutoPlaying, currentTime]);
- useEffect(() => {
- const animate = () => {
- if (isPlaying) {
- setCurrentTime((prevTime) => {
- const newTime = prevTime + 50;
- const lastEvent = timelineRef.current[timelineRef.current.length - 1];
- if (lastEvent && newTime >= lastEvent.end) {
- setIsPlaying(false);
- handleAnimationComplete();
- return lastEvent.end;
- }
- return newTime;
- });
- }
- animationRef.current = requestAnimationFrame(animate);
- };
+ useEffect(() => {
+ const animate = () => {
+ if (isPlaying) {
+ setCurrentTime((prevTime) => {
+ const newTime = prevTime + 50;
+ const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+ if (lastEvent && newTime >= lastEvent.end) {
+ setIsPlaying(false);
+ handleAnimationComplete();
+ return lastEvent.end;
+ }
+ return newTime;
+ });
+ }
+ animationRef.current = requestAnimationFrame(animate);
+ };
- animationRef.current = requestAnimationFrame(animate);
+ animationRef.current = requestAnimationFrame(animate);
- return () => {
- if (animationRef.current) {
- cancelAnimationFrame(animationRef.current);
- }
- };
- }, [isPlaying, handleAnimationComplete]);
+ return () => {
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ }
+ };
+ }, [isPlaying, handleAnimationComplete]);
- const handleSliderChange = (e: React.ChangeEvent) => {
- const newTime = parseInt(e.target.value, 10);
- setCurrentTime(newTime);
- handleResetAnimation(newTime);
- };
+ const handleSliderChange = (e: React.ChangeEvent) => {
+ const newTime = parseInt(e.target.value, 10);
+ setCurrentTime(newTime);
+ handleResetAnimation(newTime);
+ };
- const handleSliderMouseDown = () => {
- setIsPlaying(false);
- };
+ const handleSliderMouseDown = () => {
+ setIsPlaying(false);
+ };
- const handleSliderMouseUp = () => {
- if (isAutoPlaying) {
- setIsPlaying(true);
- }
- };
+ const handleSliderMouseUp = () => {
+ if (isAutoPlaying) {
+ setIsPlaying(true);
+ }
+ };
- if (tip.standalone || !tip.exercise) {
- return (
-
-
The exercise for this tip is not available yet!
-
-
+
The exercise for this tip is not available yet!
+
+
-
-
-
-
- 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
- value={currentTime}
- onChange={handleSliderChange}
- onMouseDown={handleSliderMouseDown}
- onMouseUp={handleSliderMouseUp}
- onTouchStart={handleSliderMouseDown}
- onTouchEnd={handleSliderMouseUp}
- className='flex-grow'
- />
-
-
-
-
+
+
+
+
+ 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
+ value={currentTime}
+ onChange={handleSliderChange}
+ onMouseDown={handleSliderMouseDown}
+ onMouseUp={handleSliderMouseUp}
+ onTouchStart={handleSliderMouseDown}
+ onTouchEnd={handleSliderMouseUp}
+ className="flex-grow"
+ />
+
+
+
+
{name}
{allowDownload && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+ {allowExcelDownload && renderExcelIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
diff --git a/src/dashboards/Corporate.tsx b/src/dashboards/Corporate.tsx
index eb6a70d5..1f50539a 100644
--- a/src/dashboards/Corporate.tsx
+++ b/src/dashboards/Corporate.tsx
@@ -377,6 +377,7 @@ export default function CorporateDashboard({user}: Props) {
allowDownload
reload={reloadAssignments}
allowArchive
+ allowExcelDownload
/>
))}
diff --git a/src/dashboards/MasterCorporate.tsx b/src/dashboards/MasterCorporate.tsx
index 160f8dea..d7c7c80f 100644
--- a/src/dashboards/MasterCorporate.tsx
+++ b/src/dashboards/MasterCorporate.tsx
@@ -22,6 +22,7 @@ import {
BsPlus,
BsPersonFillGear,
BsFilter,
+ BsDatabase,
} from "react-icons/bs";
import UserCard from "@/components/UserCard";
import useGroups from "@/hooks/useGroups";
@@ -50,6 +51,7 @@ import {groupBy, uniq, uniqBy} from "lodash";
import Select from "@/components/Low/Select";
import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/react";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import MasterStatistical from "./MasterStatistical";
interface Props {
user: MasterCorporateUser;
@@ -308,6 +310,7 @@ export default function MasterCorporateDashboard({user}: Props) {
const {groups} = useGroups({admin: user.id, userType: user.type});
const masterCorporateUserGroups = [...new Set(groups.filter((u) => u.admin === user.id).flatMap((g) => g.participants))];
+
const corporateUserGroups = [...new Set(groups.flatMap((g) => g.participants))];
const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({corporate: user.id});
@@ -332,7 +335,6 @@ export default function MasterCorporateDashboard({user}: Props) {
const studentFilter = (user: User) => user.type === "student" && corporateUserGroups.includes(user.id);
const teacherFilter = (user: User) => user.type === "teacher" && corporateUserGroups.includes(user.id);
-
const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
const UserDisplay = (displayUser: User) => (
@@ -434,6 +436,19 @@ export default function MasterCorporateDashboard({user}: Props) {
);
};
+ // const AssignmentsPage = () => {
+ // const activeFilter = (a: Assignment) =>
+ // moment(a.endDate).isAfter(moment()) &&
+ // moment(a.startDate).isBefore(moment()) &&
+ // a.assignees.length > a.results.length;
+ // const pastFilter = (a: Assignment) =>
+ // (moment(a.endDate).isBefore(moment()) ||
+ // a.assignees.length === a.results.length) &&
+ // !a.archived;
+ // const archivedFilter = (a: Assignment) => a.archived;
+ // const futureFilter = (a: Assignment) =>
+ // moment(a.startDate).isAfter(moment());
+
const StudentPerformancePage = () => {
const students = users
.filter((x) => x.type === "student" && groups.flatMap((g) => g.participants).includes(x.id))
@@ -571,6 +586,7 @@ export default function MasterCorporateDashboard({user}: Props) {
allowDownload
reload={reloadAssignments}
allowArchive
+ allowExcelDownload
/>
))}
@@ -587,6 +603,7 @@ export default function MasterCorporateDashboard({user}: Props) {
allowDownload
reload={reloadAssignments}
allowUnarchive
+ allowExcelDownload
/>
))}