analytica-frontend-lib/dist/chunk-GD5PJITY.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import {
  ErrorContent,
  SectionTitle,
  UserHeader
} from "./chunk-PEMHCXLY.mjs";
import {
  MetricBox
} from "./chunk-G5AMZYLQ.mjs";
import {
  SimpleBarChart
} from "./chunk-GFO2Z4ZT.mjs";
import {
  LegendPieCard
} from "./chunk-Y4MZ2KAU.mjs";
import {
  Modal_default
} from "./chunk-TNLGS7SB.mjs";

// src/components/AccessReportModal/AccessReportModal.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function buildPlatformSlices(platform) {
  return [
    {
      label: "Web",
      value: platform.web.percentage,
      displayValue: platform.web.time,
      colorClass: "bg-success-700",
      color: "var(--Success-success700, #206F3E)"
    },
    {
      label: "Celular",
      value: platform.mobile.percentage,
      displayValue: platform.mobile.time,
      colorClass: "bg-success-300",
      color: "var(--Success-success300, #66B584)"
    }
  ];
}
function buildStudentHoursSlices(hoursByItem) {
  return [
    {
      label: "Atividades",
      value: hoursByItem.activities.percentage,
      colorClass: "bg-success-700"
    },
    {
      label: "Simulados",
      value: hoursByItem.simulations.percentage,
      colorClass: "bg-warning-300"
    },
    {
      label: "Question\xE1rios",
      value: hoursByItem.questionnaires.percentage,
      colorClass: "bg-indicator-info"
    },
    {
      label: "Videoaulas",
      value: hoursByItem.content.percentage,
      colorClass: "bg-success-300"
    },
    {
      label: "Aulas recomendadas",
      value: hoursByItem.recommendedLessons.percentage,
      colorClass: "bg-indicator-positive"
    }
  ];
}
var ReportContentLayout = ({
  user,
  metricBoxes,
  platformSlices,
  hoursSlices,
  accessCountByPeriod
}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
  /* @__PURE__ */ jsx(
    UserHeader,
    {
      name: user.name,
      school: user.school,
      className: user.class ?? "",
      year: user.year
    }
  ),
  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: metricBoxes }),
  accessCountByPeriod && accessCountByPeriod.length > 0 && /* @__PURE__ */ jsx(
    SimpleBarChart,
    {
      data: accessCountByPeriod.map((item) => ({
        label: item.label,
        value: item.count
      })),
      title: "Quantidade de acessos por per\xEDodo",
      barColor: "bg-info-500",
      chartHeight: 150
    }
  ),
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
    /* @__PURE__ */ jsx(SectionTitle, { children: "Dados de acesso por plataforma" }),
    /* @__PURE__ */ jsx(LegendPieCard, { slices: platformSlices })
  ] }),
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
    /* @__PURE__ */ jsx(SectionTitle, { children: "Dados de horas por item" }),
    /* @__PURE__ */ jsx(LegendPieCard, { slices: hoursSlices })
  ] })
] });
var StudentModalContent = ({
  data,
  accessCountByPeriod
}) => /* @__PURE__ */ jsx(
  ReportContentLayout,
  {
    user: data.user,
    platformSlices: buildPlatformSlices(data.accessByPlatform),
    hoursSlices: buildStudentHoursSlices(data.hoursByItem),
    accessCountByPeriod,
    metricBoxes: /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(MetricBox, { label: "Tempo total", value: data.accessData.totalTime }),
      /* @__PURE__ */ jsx(MetricBox, { label: "Videoaulas", value: data.accessData.contentTime }),
      /* @__PURE__ */ jsx(
        MetricBox,
        {
          label: "Aulas recomendadas",
          value: data.accessData.recommendedLessonsTime
        }
      ),
      /* @__PURE__ */ jsx(MetricBox, { label: "Simulados", value: data.accessData.simulationsTime }),
      /* @__PURE__ */ jsx(
        MetricBox,
        {
          label: "Quantidade de acessos",
          value: data.accessData.accessCount
        }
      ),
      /* @__PURE__ */ jsx(
        MetricBox,
        {
          label: "\xDAltimo acesso",
          value: data.accessData.lastAccess ?? "\u2014"
        }
      )
    ] })
  }
);
var ProfessionalModalContent = ({
  data,
  accessCountByPeriod
}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
  /* @__PURE__ */ jsx(
    UserHeader,
    {
      name: data.user.name,
      school: data.user.school,
      className: data.user.class ?? "",
      year: data.user.year
    }
  ),
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
    /* @__PURE__ */ jsx(SectionTitle, { children: "Dados de acesso" }),
    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: [
      /* @__PURE__ */ jsx(MetricBox, { label: "Tempo total", value: data.accessData.totalTime }),
      /* @__PURE__ */ jsx(MetricBox, { label: "Acessos", value: data.accessData.accessCount }),
      /* @__PURE__ */ jsx(
        MetricBox,
        {
          label: "\xDAltimo acesso",
          value: data.accessData.lastAccess ?? "\u2014"
        }
      )
    ] })
  ] }),
  accessCountByPeriod && accessCountByPeriod.length > 0 && /* @__PURE__ */ jsx(
    SimpleBarChart,
    {
      data: accessCountByPeriod.map((item) => ({
        label: item.label,
        value: item.count
      })),
      title: "Quantidade de acessos por per\xEDodo",
      barColor: "bg-info-500",
      chartHeight: 150
    }
  ),
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
    /* @__PURE__ */ jsx(SectionTitle, { children: "Dados de acesso por plataforma" }),
    /* @__PURE__ */ jsx(LegendPieCard, { slices: buildPlatformSlices(data.accessByPlatform) })
  ] })
] });
var LoadingSkeleton = ({
  metricCount,
  showSecondaryChart = true
}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 animate-pulse", children: [
  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3", children: Array.from({ length: metricCount }, (_, i) => /* @__PURE__ */ jsx(
    "div",
    {
      className: "h-16 bg-background-200 rounded-xl"
    },
    `skeleton-${String(i)}`
  )) }),
  /* @__PURE__ */ jsx("div", { className: "h-5 bg-background-200 rounded w-40 mt-2" }),
  /* @__PURE__ */ jsx("div", { className: "h-32 bg-background-200 rounded-xl" }),
  showSecondaryChart && /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { className: "h-5 bg-background-200 rounded w-32" }),
    /* @__PURE__ */ jsx("div", { className: "h-32 bg-background-200 rounded-xl" })
  ] })
] });
var AccessReportModal = ({
  isOpen,
  onClose,
  title = "Relat\xF3rio de acesso",
  loading = false,
  error = null,
  accessCountByPeriod,
  ...variantProps
}) => {
  let content;
  const isStudent = variantProps.variant === "student" /* STUDENT */;
  const metricCount = isStudent ? 6 : 3;
  const showSecondaryChart = isStudent;
  if (loading) {
    content = /* @__PURE__ */ jsx(
      LoadingSkeleton,
      {
        metricCount,
        showSecondaryChart
      }
    );
  } else if (error) {
    content = /* @__PURE__ */ jsx(ErrorContent, { message: error });
  } else if (variantProps.data === null) {
    content = /* @__PURE__ */ jsx(ErrorContent, { message: "Nenhum dado dispon\xEDvel." });
  } else if (variantProps.variant === "student" /* STUDENT */) {
    content = /* @__PURE__ */ jsx(
      StudentModalContent,
      {
        data: variantProps.data,
        accessCountByPeriod
      }
    );
  } else if (variantProps.variant === "professional" /* PROFESSIONAL */) {
    content = /* @__PURE__ */ jsx(
      ProfessionalModalContent,
      {
        data: variantProps.data,
        accessCountByPeriod
      }
    );
  } else {
    content = /* @__PURE__ */ jsx(ErrorContent, { message: "Variante de relat\xF3rio inv\xE1lida." });
  }
  return /* @__PURE__ */ jsx(
    Modal_default,
    {
      isOpen,
      onClose,
      title,
      size: "lg",
      contentClassName: "max-h-[80vh] overflow-y-auto",
      children: content
    }
  );
};
var AccessReportModal_default = AccessReportModal;

export {
  AccessReportModal,
  AccessReportModal_default
};
//# sourceMappingURL=chunk-GD5PJITY.mjs.map