analytica-frontend-lib 1.2.50 → 1.2.51

package/dist/index.mjs

@@ -23125,7 +23125,7 @@ var RecommendedLessonsHistory = ({
 };
 
 // src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo27 } from "react";
 
 // src/components/RecommendedLessonDetails/components/Breadcrumb.tsx
 import { CaretRightIcon as CaretRightIcon2 } from "@phosphor-icons/react";
@@ -23442,6 +23442,16 @@ var StudentsTable = ({
   ] }) });
 };
 
+// src/components/RecommendedLessonDetails/components/StudentPerformanceModal.tsx
+import { useMemo as useMemo26 } from "react";
+import {
+  LightbulbFilamentIcon,
+  WarningCircleIcon as WarningCircleIcon2,
+  UserIcon as UserIcon2,
+  CheckCircleIcon,
+  XCircleIcon
+} from "@phosphor-icons/react";
+
 // src/components/RecommendedLessonDetails/types.ts
 var DEFAULT_LABELS = {
   viewLesson: "Ver aula",
@@ -23455,9 +23465,285 @@ var DEFAULT_LABELS = {
   completionColumn: "Conclus\xE3o",
   durationColumn: "Dura\xE7\xE3o"
 };
+var DEFAULT_PERFORMANCE_LABELS = {
+  title: "Desempenho",
+  correctAnswersLabel: "N\xB0 DE QUEST\xD5ES CORRETAS",
+  incorrectAnswersLabel: "N\xB0 DE QUEST\xD5ES INCORRETAS",
+  bestResultLabel: "MELHOR RESULTADO",
+  hardestTopicLabel: "MAIOR DIFICULDADE",
+  lessonsTitle: "Aulas"
+};
 
-// src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
+// src/components/RecommendedLessonDetails/components/StudentPerformanceModal.tsx
 import { jsx as jsx93, jsxs as jsxs76 } from "react/jsx-runtime";
+var PerformanceCard = ({
+  icon,
+  label,
+  value,
+  secondaryLabel,
+  secondaryValue,
+  variant
+}) => {
+  const headerBgColor = {
+    success: "bg-success-200",
+    error: "bg-error-100"
+  }[variant];
+  const valueColor = {
+    success: "text-success-700",
+    error: "text-error-700"
+  }[variant];
+  const iconBgColor = {
+    success: "bg-warning-300",
+    error: "bg-error-300"
+  }[variant];
+  const secondaryLabelColor = {
+    success: "text-success-600",
+    error: "text-error-600"
+  }[variant];
+  return /* @__PURE__ */ jsxs76("div", { className: "flex flex-col rounded-xl border border-border-50 bg-background overflow-hidden", children: [
+    /* @__PURE__ */ jsxs76(
+      "div",
+      {
+        className: `flex flex-col items-center justify-center p-4 gap-1 ${headerBgColor}`,
+        children: [
+          /* @__PURE__ */ jsx93(
+            Text_default,
+            {
+              as: "span",
+              className: `size-8 rounded-full flex items-center justify-center ${iconBgColor}`,
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx93(
+            Text_default,
+            {
+              size: "2xs",
+              weight: "medium",
+              className: "text-text-800 uppercase text-center leading-none",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx93(Text_default, { size: "xl", weight: "bold", className: `${valueColor} text-center`, children: value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs76("div", { className: "flex flex-col items-center gap-2 px-4 py-3", children: [
+      /* @__PURE__ */ jsx93(
+        Text_default,
+        {
+          size: "2xs",
+          weight: "medium",
+          className: `${secondaryLabelColor} uppercase text-center`,
+          children: secondaryLabel
+        }
+      ),
+      /* @__PURE__ */ jsx93(Badge_default, { size: "large", action: "info", children: secondaryValue || "-" })
+    ] })
+  ] });
+};
+var getAlternativeStatus = (isCorrect, isSelected) => {
+  if (isCorrect) {
+    return "correct";
+  }
+  if (isSelected) {
+    return "incorrect";
+  }
+  return void 0;
+};
+var mapAlternatives = (question) => {
+  return question.alternatives.map((alt) => ({
+    value: alt.id,
+    label: alt.text,
+    status: getAlternativeStatus(alt.isCorrect, alt.isSelected)
+  }));
+};
+var getSelectedValue = (question) => {
+  const selected = question.alternatives.find((alt) => alt.isSelected);
+  return selected?.id;
+};
+var QuestionAccordionItem = ({
+  question,
+  index
+}) => /* @__PURE__ */ jsx93(
+  CardAccordation,
+  {
+    value: question.id,
+    className: "bg-background rounded-xl border border-border-50",
+    triggerClassName: "py-5 px-5",
+    contentClassName: "px-5 pb-5",
+    trigger: /* @__PURE__ */ jsxs76("div", { className: "flex items-center justify-between flex-1", children: [
+      /* @__PURE__ */ jsxs76(Text_default, { size: "sm", weight: "semibold", className: "text-text-950", children: [
+        "Quest\xE3o ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ jsx93(
+        Badge_default,
+        {
+          size: "small",
+          action: question.isCorrect ? "success" : "error",
+          variant: "solid",
+          iconLeft: question.isCorrect ? /* @__PURE__ */ jsx93(CheckCircleIcon, {}) : /* @__PURE__ */ jsx93(XCircleIcon, {}),
+          children: question.isCorrect ? "Correta" : "Incorreta"
+        }
+      )
+    ] }),
+    children: /* @__PURE__ */ jsxs76("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx93(Text_default, { size: "sm", className: "text-text-700", children: question.statement }),
+      /* @__PURE__ */ jsx93(
+        CardAccordation,
+        {
+          value: `${question.id}-alternatives`,
+          className: "bg-background rounded-lg border border-border-50",
+          triggerClassName: "py-5 px-5",
+          contentClassName: "px-5 py-5",
+          trigger: /* @__PURE__ */ jsx93(Text_default, { size: "sm", weight: "medium", className: "text-text-800", children: "Alternativas" }),
+          children: /* @__PURE__ */ jsx93(
+            AlternativesList,
+            {
+              mode: "readonly",
+              alternatives: mapAlternatives(question),
+              selectedValue: getSelectedValue(question),
+              layout: "default"
+            }
+          )
+        }
+      )
+    ] })
+  }
+);
+var LessonAccordionItem = ({ lesson }) => /* @__PURE__ */ jsx93(
+  CardAccordation,
+  {
+    value: lesson.id,
+    className: "bg-background rounded-xl border border-border-50",
+    triggerClassName: "py-5 px-5",
+    contentClassName: "px-5 pb-5",
+    trigger: /* @__PURE__ */ jsxs76("div", { className: "flex flex-col gap-1 flex-1", children: [
+      /* @__PURE__ */ jsx93(Text_default, { size: "sm", weight: "semibold", className: "text-text-950", children: lesson.title }),
+      /* @__PURE__ */ jsx93(
+        ProgressBar_default,
+        {
+          value: lesson.progress,
+          variant: "blue",
+          size: "medium",
+          showPercentage: true,
+          layout: "default"
+        }
+      )
+    ] }),
+    children: /* @__PURE__ */ jsx93("div", { className: "flex flex-col gap-2", children: lesson.questions.map((question, index) => /* @__PURE__ */ jsx93(
+      QuestionAccordionItem,
+      {
+        question,
+        index
+      },
+      question.id
+    )) })
+  }
+);
+var LoadingSkeleton2 = () => /* @__PURE__ */ jsxs76("div", { className: "flex flex-col gap-4 animate-pulse", children: [
+  /* @__PURE__ */ jsx93("div", { className: "h-6 bg-background-200 rounded w-48" }),
+  /* @__PURE__ */ jsxs76("div", { className: "grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ jsx93("div", { className: "h-44 bg-background-200 rounded-xl" }),
+    /* @__PURE__ */ jsx93("div", { className: "h-44 bg-background-200 rounded-xl" })
+  ] })
+] });
+var PerformanceContent = ({
+  data,
+  labels
+}) => /* @__PURE__ */ jsxs76("div", { className: "flex flex-col gap-5", children: [
+  /* @__PURE__ */ jsxs76("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx93(
+      Text_default,
+      {
+        as: "span",
+        className: "size-8 rounded-full bg-background-100 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx93(UserIcon2, { size: 16, className: "text-text-500" })
+      }
+    ),
+    /* @__PURE__ */ jsx93(Text_default, { size: "md", weight: "medium", className: "text-text-950", children: data.studentName })
+  ] }),
+  /* @__PURE__ */ jsxs76("div", { className: "grid grid-cols-2 gap-3", children: [
+    /* @__PURE__ */ jsx93(
+      PerformanceCard,
+      {
+        icon: /* @__PURE__ */ jsx93(
+          LightbulbFilamentIcon,
+          {
+            size: 18,
+            weight: "fill",
+            className: "text-white"
+          }
+        ),
+        label: labels.correctAnswersLabel,
+        value: data.correctAnswers,
+        secondaryLabel: labels.bestResultLabel,
+        secondaryValue: data.bestResult,
+        variant: "success"
+      }
+    ),
+    /* @__PURE__ */ jsx93(
+      PerformanceCard,
+      {
+        icon: /* @__PURE__ */ jsx93(
+          WarningCircleIcon2,
+          {
+            size: 18,
+            weight: "fill",
+            className: "text-error-700"
+          }
+        ),
+        label: labels.incorrectAnswersLabel,
+        value: data.incorrectAnswers,
+        secondaryLabel: labels.hardestTopicLabel,
+        secondaryValue: data.hardestTopic,
+        variant: "error"
+      }
+    )
+  ] }),
+  data.lessons.length > 0 && /* @__PURE__ */ jsxs76("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx93(Text_default, { size: "md", weight: "semibold", className: "text-text-950", children: labels.lessonsTitle }),
+    /* @__PURE__ */ jsx93("div", { className: "flex flex-col gap-2", children: data.lessons.map((lesson) => /* @__PURE__ */ jsx93(LessonAccordionItem, { lesson }, lesson.id)) })
+  ] })
+] });
+var renderModalContent = (loading, data, labels) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx93(LoadingSkeleton2, {});
+  }
+  if (data) {
+    return /* @__PURE__ */ jsx93(PerformanceContent, { data, labels });
+  }
+  return null;
+};
+var StudentPerformanceModal = ({
+  isOpen,
+  onClose,
+  data,
+  loading = false,
+  labels: customLabels
+}) => {
+  const labels = useMemo26(
+    () => ({ ...DEFAULT_PERFORMANCE_LABELS, ...customLabels }),
+    [customLabels]
+  );
+  if (!data && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx93(
+    Modal_default,
+    {
+      isOpen,
+      onClose,
+      title: labels.title,
+      size: "lg",
+      contentClassName: "max-h-[70vh] overflow-y-auto",
+      children: renderModalContent(loading, data, labels)
+    }
+  );
+};
+
+// src/components/RecommendedLessonDetails/RecommendedLessonDetails.tsx
+import { jsx as jsx94, jsxs as jsxs77 } from "react/jsx-runtime";
 var RecommendedLessonDetails = ({
   data,
   loading = false,
@@ -23470,11 +23756,11 @@ var RecommendedLessonDetails = ({
   labels: customLabels,
   className
 }) => {
-  const labels = useMemo26(
+  const labels = useMemo27(
     () => ({ ...DEFAULT_LABELS, ...customLabels }),
     [customLabels]
   );
-  const defaultBreadcrumbs = useMemo26(
+  const defaultBreadcrumbs = useMemo27(
     () => [
       { label: "Aulas recomendadas", path: "/aulas-recomendadas" },
       { label: data?.goal.title || "Detalhes" }
@@ -23482,7 +23768,7 @@ var RecommendedLessonDetails = ({
     [data?.goal.title]
   );
   const breadcrumbItems = breadcrumbs || defaultBreadcrumbs;
-  const displayStudents = useMemo26(() => {
+  const displayStudents = useMemo27(() => {
     if (!data?.details.students) return [];
     const deadline = data?.goal.finalDate;
     return data.details.students.map(
@@ -23490,17 +23776,17 @@ var RecommendedLessonDetails = ({
     );
   }, [data?.details.students, data?.goal.finalDate]);
   if (loading) {
-    return /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx94(
       "div",
       {
         className: cn("flex flex-col gap-6", className),
         "data-testid": "lesson-details-loading",
-        children: /* @__PURE__ */ jsx93(LoadingSkeleton, {})
+        children: /* @__PURE__ */ jsx94(LoadingSkeleton, {})
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx94(
       "div",
       {
         className: cn(
@@ -23508,21 +23794,21 @@ var RecommendedLessonDetails = ({
           className
         ),
         "data-testid": "lesson-details-error",
-        children: /* @__PURE__ */ jsx93(Text_default, { size: "md", className: "text-error-700", children: error })
+        children: /* @__PURE__ */ jsx94(Text_default, { size: "md", className: "text-error-700", children: error })
       }
     );
   }
   if (!data) {
     return null;
   }
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs77(
     "div",
     {
       className: cn("flex flex-col gap-6", className),
       "data-testid": "recommended-lesson-details",
       children: [
-        /* @__PURE__ */ jsx93(Breadcrumb, { items: breadcrumbItems, onItemClick: onBreadcrumbClick }),
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94(Breadcrumb, { items: breadcrumbItems, onItemClick: onBreadcrumbClick }),
+        /* @__PURE__ */ jsx94(
           LessonHeader,
           {
             data,
@@ -23531,8 +23817,8 @@ var RecommendedLessonDetails = ({
             viewLessonLabel: labels.viewLesson
           }
         ),
-        /* @__PURE__ */ jsx93(ResultsSection, { data, labels }),
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94(ResultsSection, { data, labels }),
+        /* @__PURE__ */ jsx94(
           StudentsTable,
           {
             students: displayStudents,
@@ -23849,6 +24135,7 @@ export {
   StatisticsCard,
   Stepper_default as Stepper,
   StudentLessonStatus,
+  StudentPerformanceModal,
   SubjectEnum,
   SubjectInfo,
   Support_default as Support,