@hed-hog/lms 0.0.266 → 0.0.267

package/hedhog/data/menu.yaml

@@ -74,3 +74,19 @@
       - where:
           slug: admin-lms
 
+- url: /lms/reports 
+  menu_id:
+    where:
+      slug: /lms 
+  icon: file-chart-column-increasing
+  name:
+    en: Reports
+    pt: Relatórios
+  slug: /lms/reports
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-lms
+

package/hedhog/frontend/app/reports/page.tsx.ejs

@@ -0,0 +1,910 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { motion } from 'framer-motion';
+import { ArrowUpRight, Download, TrendingDown, TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { toast } from 'sonner';
+
+// Data for charts
+const monthlyEnrollments = [
+  { mes: 'jan', matriculas: 120, cancelamentos: 15, receita: 48000 },
+  { mes: 'feb', matriculas: 150, cancelamentos: 12, receita: 60000 },
+  { mes: 'mar', matriculas: 180, cancelamentos: 18, receita: 72000 },
+  { mes: 'apr', matriculas: 200, cancelamentos: 10, receita: 80000 },
+  { mes: 'may', matriculas: 170, cancelamentos: 22, receita: 68000 },
+  { mes: 'jun', matriculas: 220, cancelamentos: 8, receita: 88000 },
+  { mes: 'jul', matriculas: 190, cancelamentos: 14, receita: 76000 },
+  { mes: 'aug', matriculas: 240, cancelamentos: 11, receita: 96000 },
+  { mes: 'sep', matriculas: 210, cancelamentos: 16, receita: 84000 },
+  { mes: 'oct', matriculas: 260, cancelamentos: 9, receita: 104000 },
+  { mes: 'nov', matriculas: 230, cancelamentos: 13, receita: 92000 },
+  { mes: 'dec', matriculas: 280, cancelamentos: 7, receita: 112000 },
+];
+
+const categoryPerformance = [
+  { area: 'technology', media: 7.8, alunos: 1200, conclusao: 82 },
+  { area: 'design', media: 8.2, alunos: 650, conclusao: 88 },
+  { area: 'management', media: 7.5, alunos: 480, conclusao: 76 },
+  { area: 'marketing', media: 7.9, alunos: 320, conclusao: 79 },
+];
+
+const courseRanking = [
+  { nome: 'reactAdvanced', alunos: 245, conclusao: 85, nota: 8.1 },
+  { nome: 'excelBusiness', alunos: 534, conclusao: 92, nota: 7.9 },
+  { nome: 'agileProjectManagement', alunos: 312, conclusao: 78, nota: 7.5 },
+  { nome: 'pythonDataScience', alunos: 178, conclusao: 72, nota: 7.8 },
+  { nome: 'uxDesignFundamentals', alunos: 189, conclusao: 88, nota: 8.3 },
+  { nome: 'typescriptPractice', alunos: 201, conclusao: 80, nota: 7.6 },
+  { nome: 'nodeComplete', alunos: 156, conclusao: 75, nota: 7.4 },
+  { nome: 'designSystem', alunos: 87, conclusao: 90, nota: 8.5 },
+];
+
+const radarData = [
+  { subject: 'engagement', A: 85, fullMark: 100 },
+  { subject: 'completion', A: 78, fullMark: 100 },
+  { subject: 'satisfaction', A: 92, fullMark: 100 },
+  { subject: 'recommendation', A: 88, fullMark: 100 },
+  { subject: 'retention', A: 72, fullMark: 100 },
+  { subject: 'performance', A: 81, fullMark: 100 },
+];
+
+const statusDistribution = [
+  { nome: 'active', valor: 1865, cor: '#22c55e' }, // green-500
+  { nome: 'completed', valor: 742, cor: '#3b82f6' }, // blue-500
+  { nome: 'inactive', valor: 240, cor: '#f97316' }, // orange-500
+];
+
+const weeklyActivity = [
+  { dia: 'mon', acessos: 420, aulas: 180, exercicios: 95 },
+  { dia: 'tue', acessos: 380, aulas: 160, exercicios: 88 },
+  { dia: 'wed', acessos: 450, aulas: 200, exercicios: 110 },
+  { dia: 'thu', acessos: 410, aulas: 175, exercicios: 92 },
+  { dia: 'fri', acessos: 350, aulas: 140, exercicios: 75 },
+  { dia: 'sat', acessos: 280, aulas: 110, exercicios: 60 },
+  { dia: 'sun', acessos: 220, aulas: 85, exercicios: 45 },
+];
+
+export default function RelatoriosPage() {
+  const t = useTranslations('lms.ReportsPage');
+  const [loading, setLoading] = useState(true);
+  const [periodo, setPeriodo] = useState('12m');
+  const [activeTab, setActiveTab] = useState('geral');
+
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const tooltipStyle = {
+    backgroundColor: 'hsl(var(--card))',
+    border: '1px solid hsl(var(--border))',
+    borderRadius: '8px',
+    fontSize: '12px',
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        breadcrumbs={[
+          {
+            label: t('breadcrumbs.home'),
+            href: '/',
+          },
+          {
+            label: t('breadcrumbs.reports'),
+          },
+        ]}
+        actions={
+          <div className="flex items-center gap-3">
+            <Select value={periodo} onValueChange={setPeriodo}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="7d">{t('period.7d')}</SelectItem>
+                <SelectItem value="30d">{t('period.30d')}</SelectItem>
+                <SelectItem value="6m">{t('period.6m')}</SelectItem>
+                <SelectItem value="12m">{t('period.12m')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => toast.success(t('toasts.exported'))}
+            >
+              <Download className="size-4" />
+              <span className="hidden sm:inline">{t('actions.export')}</span>
+            </Button>
+          </div>
+        }
+      />
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+      >
+        {/* KPIs */}
+        {loading ? (
+          <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Card key={i}>
+                <CardContent className="p-6">
+                  <Skeleton className="mb-2 h-4 w-24" />
+                  <Skeleton className="mb-1 h-8 w-20" />
+                  <Skeleton className="h-4 w-16" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {[
+              {
+                titulo: t('kpis.totalRevenue.title'),
+                valor: 'R$ 880.000',
+                variacao: '+18.2%',
+                positivo: true,
+              },
+              {
+                titulo: t('kpis.enrollments.title'),
+                valor: '2.850',
+                variacao: '+22.5%',
+                positivo: true,
+              },
+              {
+                titulo: t('kpis.completionRate.title'),
+                valor: '78.3%',
+                variacao: '+2.1%',
+                positivo: true,
+              },
+              {
+                titulo: t('kpis.churnRate.title'),
+                valor: '5.4%',
+                variacao: '-1.2%',
+                positivo: true,
+              },
+            ].map((kpi, i) => (
+              <motion.div
+                key={kpi.titulo}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.1 }}
+              >
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="p-6">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {kpi.titulo}
+                    </p>
+                    <p className="mt-2 text-2xl font-bold">{kpi.valor}</p>
+                    <div className="mt-1 flex items-center gap-1">
+                      {kpi.positivo ? (
+                        <TrendingUp className="size-3 text-emerald-600" />
+                      ) : (
+                        <TrendingDown className="size-3 text-red-500" />
+                      )}
+                      <span
+                        className={`text-xs font-medium ${kpi.positivo ? 'text-emerald-600' : 'text-red-500'}`}
+                      >
+                        {kpi.variacao}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {t('kpis.vsPreviousPeriod')}
+                      </span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        )}
+
+        {/* Tabs */}
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
+          <TabsList className="mb-6">
+            <TabsTrigger value="geral">{t('tabs.overview')}</TabsTrigger>
+            <TabsTrigger value="cursos">{t('tabs.courses')}</TabsTrigger>
+            <TabsTrigger value="alunos">{t('tabs.students')}</TabsTrigger>
+          </TabsList>
+
+          {/* Tab: Geral */}
+          <TabsContent value="geral" className="mt-0">
+            {loading ? (
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <Card key={i}>
+                    <CardContent className="p-6">
+                      <Skeleton className="mb-4 h-5 w-40" />
+                      <Skeleton className="h-[260px] w-full" />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                {/* Matriculas ao longo do tempo */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.monthlyEnrollments.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.monthlyEnrollments.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={260}>
+                        <AreaChart data={monthlyEnrollments}>
+                          <CartesianGrid
+                            strokeDasharray="3 3"
+                            stroke="hsl(var(--border))"
+                          />
+                          <XAxis
+                            dataKey="mes"
+                            tickFormatter={(value) => t(`months.${value}`)}
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <YAxis
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <Tooltip contentStyle={tooltipStyle} />
+                          <defs>
+                            <linearGradient
+                              id="colorMatriculas"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                            >
+                              <stop
+                                offset="5%"
+                                stopColor="#22c55e"
+                                stopOpacity={0.3}
+                              />
+                              <stop
+                                offset="95%"
+                                stopColor="#22c55e"
+                                stopOpacity={0}
+                              />
+                            </linearGradient>
+                            <linearGradient
+                              id="colorCancelamentos"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                            >
+                              <stop
+                                offset="5%"
+                                stopColor="#ef4444"
+                                stopOpacity={0.3}
+                              />
+                              <stop
+                                offset="95%"
+                                stopColor="#ef4444"
+                                stopOpacity={0}
+                              />
+                            </linearGradient>
+                          </defs>
+                          <Area
+                            type="monotone"
+                            dataKey="matriculas"
+                            stroke="#22c55e"
+                            fill="url(#colorMatriculas)"
+                            strokeWidth={2.5}
+                            name={t('charts.monthlyEnrollments.enrollments')}
+                          />
+                          <Area
+                            type="monotone"
+                            dataKey="cancelamentos"
+                            stroke="#ef4444"
+                            fill="url(#colorCancelamentos)"
+                            strokeWidth={2}
+                            name={t('charts.monthlyEnrollments.cancellations')}
+                          />
+                        </AreaChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                {/* Receita */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.monthlyRevenue.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.monthlyRevenue.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={260}>
+                        <BarChart data={monthlyEnrollments}>
+                          <CartesianGrid
+                            strokeDasharray="3 3"
+                            stroke="hsl(var(--border))"
+                          />
+                          <XAxis
+                            dataKey="mes"
+                            tickFormatter={(value) => t(`months.${value}`)}
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <YAxis
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                            tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`}
+                          />
+                          <Tooltip
+                            contentStyle={tooltipStyle}
+                            formatter={(value: number) => [
+                              `R$ ${value.toLocaleString('pt-BR')}`,
+                              t('charts.monthlyRevenue.revenue'),
+                            ]}
+                          />
+                          <defs>
+                            <linearGradient
+                              id="colorReceita"
+                              x1="0"
+                              y1="0"
+                              x2="0"
+                              y2="1"
+                            >
+                              <stop offset="0%" stopColor="#3b82f6" />
+                              <stop offset="100%" stopColor="#60a5fa" />
+                            </linearGradient>
+                          </defs>
+                          <Bar
+                            dataKey="receita"
+                            fill="url(#colorReceita)"
+                            radius={[6, 6, 0, 0]}
+                            name={t('charts.monthlyRevenue.revenue')}
+                          />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                {/* Status dos alunos (pie) */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.studentStatus.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.studentStatus.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex flex-col items-center">
+                      <ResponsiveContainer width="100%" height={220}>
+                        <PieChart>
+                          <Pie
+                            data={statusDistribution}
+                            cx="50%"
+                            cy="50%"
+                            innerRadius={55}
+                            outerRadius={85}
+                            dataKey="valor"
+                            nameKey="nome"
+                            strokeWidth={2}
+                            stroke="hsl(var(--background))"
+                          >
+                            {statusDistribution.map((entry, index) => (
+                              <Cell key={`cell-${index}`} fill={entry.cor} />
+                            ))}
+                          </Pie>
+                          <Tooltip contentStyle={tooltipStyle} />
+                        </PieChart>
+                      </ResponsiveContainer>
+                      <div className="mt-2 flex flex-wrap justify-center gap-4">
+                        {statusDistribution.map((item) => (
+                          <div
+                            key={item.nome}
+                            className="flex items-center gap-1.5 text-xs"
+                          >
+                            <span
+                              className="inline-block size-2.5 rounded-full"
+                              style={{ backgroundColor: item.cor }}
+                            />
+                            <span className="text-muted-foreground">
+                              {t(`statusDistribution.${item.nome}`)} (
+                              {item.valor})
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                {/* Radar */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.5 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.qualityIndicators.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.qualityIndicators.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={260}>
+                        <RadarChart data={radarData}>
+                          <PolarGrid stroke="hsl(var(--border))" />
+                          <PolarAngleAxis
+                            dataKey="subject"
+                            fontSize={11}
+                            tickFormatter={(value) => t(`radar.${value}`)}
+                          />
+                          <PolarRadiusAxis
+                            angle={30}
+                            domain={[0, 100]}
+                            fontSize={10}
+                          />
+                          <Radar
+                            name={t('charts.qualityIndicators.score')}
+                            dataKey="A"
+                            stroke="#a855f7"
+                            fill="#a855f7"
+                            fillOpacity={0.25}
+                            strokeWidth={2.5}
+                          />
+                          <Tooltip contentStyle={tooltipStyle} />
+                        </RadarChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* Tab: Cursos */}
+          <TabsContent value="cursos" className="mt-0">
+            {loading ? (
+              <Card>
+                <CardContent className="p-4">
+                  {Array.from({ length: 8 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center gap-4 border-b py-3 last:border-0"
+                    >
+                      <Skeleton className="h-4 w-48" />
+                      <Skeleton className="h-4 w-16" />
+                      <Skeleton className="h-4 w-16" />
+                      <Skeleton className="h-4 w-12" />
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            ) : (
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
+                <motion.div
+                  className="lg:col-span-3"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.courseRanking.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.courseRanking.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="p-0">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="w-[30px]">#</TableHead>
+                            <TableHead>{t('table.course')}</TableHead>
+                            <TableHead>{t('table.students')}</TableHead>
+                            <TableHead className="hidden sm:table-cell">
+                              {t('table.completion')}
+                            </TableHead>
+                            <TableHead>{t('table.score')}</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {courseRanking
+                            .sort((a, b) => b.alunos - a.alunos)
+                            .map((curso, i) => (
+                              <TableRow key={curso.nome}>
+                                <TableCell className="font-mono text-xs text-muted-foreground">
+                                  {i + 1}
+                                </TableCell>
+                                <TableCell className="font-medium">
+                                  {t(`courseRanking.${curso.nome}`)}
+                                </TableCell>
+                                <TableCell>{curso.alunos}</TableCell>
+                                <TableCell className="hidden sm:table-cell">
+                                  <Badge
+                                    variant={
+                                      curso.conclusao >= 80
+                                        ? 'default'
+                                        : 'secondary'
+                                    }
+                                  >
+                                    {curso.conclusao}%
+                                  </Badge>
+                                </TableCell>
+                                <TableCell>
+                                  <span
+                                    className={
+                                      curso.nota >= 8
+                                        ? 'font-medium text-emerald-600'
+                                        : 'text-foreground'
+                                    }
+                                  >
+                                    {curso.nota.toFixed(1)}
+                                  </span>
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                <motion.div
+                  className="lg:col-span-2"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.performanceByArea.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.performanceByArea.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={300}>
+                        <BarChart data={categoryPerformance} layout="vertical">
+                          <CartesianGrid
+                            strokeDasharray="3 3"
+                            stroke="hsl(var(--border))"
+                          />
+                          <XAxis
+                            type="number"
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                            domain={[0, 100]}
+                          />
+                          <YAxis
+                            type="category"
+                            dataKey="area"
+                            tickFormatter={(value) => t(`areas.${value}`)}
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                            width={80}
+                          />
+                          <Tooltip contentStyle={tooltipStyle} />
+                          <defs>
+                            <linearGradient
+                              id="colorConclusao"
+                              x1="0"
+                              y1="0"
+                              x2="1"
+                              y2="0"
+                            >
+                              <stop offset="0%" stopColor="#22c55e" />
+                              <stop offset="100%" stopColor="#4ade80" />
+                            </linearGradient>
+                          </defs>
+                          <Bar
+                            dataKey="conclusao"
+                            fill="url(#colorConclusao)"
+                            radius={[0, 6, 6, 0]}
+                            name={t('charts.performanceByArea.completion')}
+                          />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* Tab: Alunos */}
+          <TabsContent value="alunos" className="mt-0">
+            {loading ? (
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                {Array.from({ length: 2 }).map((_, i) => (
+                  <Card key={i}>
+                    <CardContent className="p-6">
+                      <Skeleton className="mb-4 h-5 w-40" />
+                      <Skeleton className="h-[260px] w-full" />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.weeklyActivity.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.weeklyActivity.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={280}>
+                        <BarChart data={weeklyActivity}>
+                          <CartesianGrid
+                            strokeDasharray="3 3"
+                            stroke="hsl(var(--border))"
+                          />
+                          <XAxis
+                            dataKey="dia"
+                            tickFormatter={(value) => t(`weekdays.${value}`)}
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <YAxis
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <Tooltip contentStyle={tooltipStyle} />
+                          <Bar
+                            dataKey="acessos"
+                            fill="#3b82f6"
+                            radius={[4, 4, 0, 0]}
+                            name={t('charts.weeklyActivity.accesses')}
+                          />
+                          <Bar
+                            dataKey="aulas"
+                            fill="#22c55e"
+                            radius={[4, 4, 0, 0]}
+                            name={t('charts.weeklyActivity.classes')}
+                          />
+                          <Bar
+                            dataKey="exercicios"
+                            fill="#f97316"
+                            radius={[4, 4, 0, 0]}
+                            name={t('charts.weeklyActivity.exercises')}
+                          />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.performanceEvolution.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.performanceEvolution.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <ResponsiveContainer width="100%" height={280}>
+                        <LineChart
+                          data={monthlyEnrollments.map((m, i) => ({
+                            mes: m.mes,
+                            nota: 6.8 + Math.sin(i * 0.5) * 0.5 + i * 0.1,
+                          }))}
+                        >
+                          <CartesianGrid
+                            strokeDasharray="3 3"
+                            stroke="hsl(var(--border))"
+                          />
+                          <XAxis
+                            dataKey="mes"
+                            tickFormatter={(value) => t(`months.${value}`)}
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                          />
+                          <YAxis
+                            fontSize={12}
+                            tickLine={false}
+                            axisLine={false}
+                            domain={[6, 10]}
+                          />
+                          <Tooltip contentStyle={tooltipStyle} />
+                          <Line
+                            type="monotone"
+                            dataKey="nota"
+                            stroke="#a855f7"
+                            strokeWidth={2.5}
+                            dot={{
+                              r: 4,
+                              fill: '#a855f7',
+                              strokeWidth: 2,
+                              stroke: '#fff',
+                            }}
+                            activeDot={{ r: 6, fill: '#a855f7' }}
+                            name={t('charts.performanceEvolution.averageScore')}
+                          />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+
+                {/* Performance por Area */}
+                <motion.div
+                  className="lg:col-span-2"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4 }}
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base">
+                        {t('charts.metricsByArea.title')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('charts.metricsByArea.description')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="p-0">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>{t('table.area')}</TableHead>
+                            <TableHead>{t('table.students')}</TableHead>
+                            <TableHead>{t('table.averageScore')}</TableHead>
+                            <TableHead>{t('table.completionRate')}</TableHead>
+                            <TableHead className="hidden sm:table-cell">
+                              {t('table.trend')}
+                            </TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {categoryPerformance.map((area) => (
+                            <TableRow key={area.area}>
+                              <TableCell className="font-medium">
+                                {t(`areas.${area.area}`)}
+                              </TableCell>
+                              <TableCell>{area.alunos}</TableCell>
+                              <TableCell>
+                                <span
+                                  className={
+                                    area.media >= 8
+                                      ? 'font-medium text-emerald-600'
+                                      : 'text-foreground'
+                                  }
+                                >
+                                  {area.media.toFixed(1)}
+                                </span>
+                              </TableCell>
+                              <TableCell>
+                                <Badge
+                                  variant={
+                                    area.conclusao >= 80
+                                      ? 'default'
+                                      : 'secondary'
+                                  }
+                                >
+                                  {area.conclusao}%
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="hidden sm:table-cell">
+                                <div className="flex items-center gap-1 text-emerald-600">
+                                  <ArrowUpRight className="size-3" />
+                                  <span className="text-xs font-medium">
+                                    {t('table.growing')}
+                                  </span>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </motion.div>
+    </Page>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -474,5 +474,155 @@
       "openingFormacao": "Opening \"{{nome}}\"...",
       "openingDetails": "Opening training..."
     }
+  },
+  "ReportsPage": {
+    "title": "Reports",
+    "description": "Detailed platform performance analysis",
+    "breadcrumbs": {
+      "home": "Home",
+      "reports": "Reports"
+    },
+    "actions": {
+      "export": "Export"
+    },
+    "toasts": {
+      "exported": "Report exported!"
+    },
+    "period": {
+      "7d": "7 days",
+      "30d": "30 days",
+      "6m": "6 months",
+      "12m": "12 months"
+    },
+    "kpis": {
+      "totalRevenue": {
+        "title": "Total Revenue"
+      },
+      "enrollments": {
+        "title": "Enrollments"
+      },
+      "completionRate": {
+        "title": "Completion Rate"
+      },
+      "churnRate": {
+        "title": "Churn Rate"
+      },
+      "vsPreviousPeriod": "vs. previous period"
+    },
+    "tabs": {
+      "overview": "Overview",
+      "courses": "Courses",
+      "students": "Students"
+    },
+    "months": {
+      "jan": "Jan",
+      "feb": "Feb",
+      "mar": "Mar",
+      "apr": "Apr",
+      "may": "May",
+      "jun": "Jun",
+      "jul": "Jul",
+      "aug": "Aug",
+      "sep": "Sep",
+      "oct": "Oct",
+      "nov": "Nov",
+      "dec": "Dec"
+    },
+    "weekdays": {
+      "mon": "Mon",
+      "tue": "Tue",
+      "wed": "Wed",
+      "thu": "Thu",
+      "fri": "Fri",
+      "sat": "Sat",
+      "sun": "Sun"
+    },
+    "areas": {
+      "technology": "Technology",
+      "design": "Design",
+      "management": "Management",
+      "marketing": "Marketing"
+    },
+    "statusDistribution": {
+      "active": "Active",
+      "completed": "Completed",
+      "inactive": "Inactive"
+    },
+    "radar": {
+      "engagement": "Engagement",
+      "completion": "Completion",
+      "satisfaction": "Satisfaction",
+      "recommendation": "Recommendation",
+      "retention": "Retention",
+      "performance": "Performance"
+    },
+    "charts": {
+      "monthlyEnrollments": {
+        "title": "Monthly Enrollments",
+        "description": "Enrollment and cancellation trends",
+        "enrollments": "Enrollments",
+        "cancellations": "Cancellations"
+      },
+      "monthlyRevenue": {
+        "title": "Monthly Revenue",
+        "description": "Revenue in BRL per month",
+        "revenue": "Revenue"
+      },
+      "studentStatus": {
+        "title": "Student Status",
+        "description": "Distribution by status"
+      },
+      "qualityIndicators": {
+        "title": "Quality Indicators",
+        "description": "Key platform metrics",
+        "score": "Score"
+      },
+      "courseRanking": {
+        "title": "Course Ranking",
+        "description": "By number of enrolled students"
+      },
+      "performanceByArea": {
+        "title": "Performance by Area",
+        "description": "Average score and completion rate",
+        "completion": "Completion %"
+      },
+      "weeklyActivity": {
+        "title": "Weekly Activity",
+        "description": "Accesses, classes watched, and exercises",
+        "accesses": "Accesses",
+        "classes": "Classes",
+        "exercises": "Exercises"
+      },
+      "performanceEvolution": {
+        "title": "Performance Evolution",
+        "description": "Average score in the last 12 months",
+        "averageScore": "Average Score"
+      },
+      "metricsByArea": {
+        "title": "Knowledge Area Metrics",
+        "description": "Detailed comparison across areas"
+      }
+    },
+    "table": {
+      "course": "Course",
+      "students": "Students",
+      "completion": "Completion",
+      "score": "Score",
+      "area": "Area",
+      "averageScore": "Average Score",
+      "completionRate": "Completion Rate",
+      "trend": "Trend",
+      "growing": "Growing"
+    },
+    "courseRanking": {
+      "reactAdvanced": "Advanced React",
+      "excelBusiness": "Excel for Business",
+      "agileProjectManagement": "Agile Project Management",
+      "pythonDataScience": "Python for Data Science",
+      "uxDesignFundamentals": "UX Design Fundamentals",
+      "typescriptPractice": "TypeScript in Practice",
+      "nodeComplete": "Complete Node.js",
+      "designSystem": "Design System"
+    }
   }
 }

package/hedhog/frontend/messages/pt.json

@@ -474,5 +474,155 @@
       "openingFormacao": "Abrindo \"{{nome}}\"...",
       "openingDetails": "Abrindo formacao..."
     }
+  },
+  "ReportsPage": {
+    "title": "Relatorios",
+    "description": "Analise detalhada do desempenho da plataforma",
+    "breadcrumbs": {
+      "home": "Home",
+      "reports": "Relatorios"
+    },
+    "actions": {
+      "export": "Exportar"
+    },
+    "toasts": {
+      "exported": "Relatorio exportado!"
+    },
+    "period": {
+      "7d": "7 dias",
+      "30d": "30 dias",
+      "6m": "6 meses",
+      "12m": "12 meses"
+    },
+    "kpis": {
+      "totalRevenue": {
+        "title": "Receita Total"
+      },
+      "enrollments": {
+        "title": "Matriculas"
+      },
+      "completionRate": {
+        "title": "Taxa de Conclusao"
+      },
+      "churnRate": {
+        "title": "Taxa de Cancelamento"
+      },
+      "vsPreviousPeriod": "vs. periodo anterior"
+    },
+    "tabs": {
+      "overview": "Visao Geral",
+      "courses": "Cursos",
+      "students": "Alunos"
+    },
+    "months": {
+      "jan": "Jan",
+      "feb": "Fev",
+      "mar": "Mar",
+      "apr": "Abr",
+      "may": "Mai",
+      "jun": "Jun",
+      "jul": "Jul",
+      "aug": "Ago",
+      "sep": "Set",
+      "oct": "Out",
+      "nov": "Nov",
+      "dec": "Dez"
+    },
+    "weekdays": {
+      "mon": "Seg",
+      "tue": "Ter",
+      "wed": "Qua",
+      "thu": "Qui",
+      "fri": "Sex",
+      "sat": "Sab",
+      "sun": "Dom"
+    },
+    "areas": {
+      "technology": "Tecnologia",
+      "design": "Design",
+      "management": "Gestao",
+      "marketing": "Marketing"
+    },
+    "statusDistribution": {
+      "active": "Ativos",
+      "completed": "Concluidos",
+      "inactive": "Inativos"
+    },
+    "radar": {
+      "engagement": "Engajamento",
+      "completion": "Conclusao",
+      "satisfaction": "Satisfacao",
+      "recommendation": "Recomendacao",
+      "retention": "Retencao",
+      "performance": "Desempenho"
+    },
+    "charts": {
+      "monthlyEnrollments": {
+        "title": "Matriculas Mensais",
+        "description": "Evolucao de matriculas e cancelamentos",
+        "enrollments": "Matriculas",
+        "cancellations": "Cancelamentos"
+      },
+      "monthlyRevenue": {
+        "title": "Receita Mensal",
+        "description": "Faturamento em R$ por mes",
+        "revenue": "Receita"
+      },
+      "studentStatus": {
+        "title": "Status dos Alunos",
+        "description": "Distribuicao por situacao"
+      },
+      "qualityIndicators": {
+        "title": "Indicadores de Qualidade",
+        "description": "Metricas-chave da plataforma",
+        "score": "Score"
+      },
+      "courseRanking": {
+        "title": "Ranking de Cursos",
+        "description": "Por numero de alunos matriculados"
+      },
+      "performanceByArea": {
+        "title": "Desempenho por Area",
+        "description": "Nota media e taxa de conclusao",
+        "completion": "Conclusao %"
+      },
+      "weeklyActivity": {
+        "title": "Atividade Semanal",
+        "description": "Acessos, aulas assistidas e exercicios",
+        "accesses": "Acessos",
+        "classes": "Aulas",
+        "exercises": "Exercicios"
+      },
+      "performanceEvolution": {
+        "title": "Evolucao de Desempenho",
+        "description": "Media de notas nos ultimos 12 meses",
+        "averageScore": "Nota Media"
+      },
+      "metricsByArea": {
+        "title": "Metricas por Area de Conhecimento",
+        "description": "Comparativo detalhado entre as areas"
+      }
+    },
+    "table": {
+      "course": "Curso",
+      "students": "Alunos",
+      "completion": "Conclusao",
+      "score": "Nota",
+      "area": "Area",
+      "averageScore": "Media de Nota",
+      "completionRate": "Taxa de Conclusao",
+      "trend": "Tendencia",
+      "growing": "Crescendo"
+    },
+    "courseRanking": {
+      "reactAdvanced": "React Avancado",
+      "excelBusiness": "Excel para Negocios",
+      "agileProjectManagement": "Gestao de Projetos Ageis",
+      "pythonDataScience": "Python para Data Science",
+      "uxDesignFundamentals": "UX Design Fundamentals",
+      "typescriptPractice": "TypeScript na Pratica",
+      "nodeComplete": "Node.js Completo",
+      "designSystem": "Design System"
+    }
   }
 }

package/hedhog/table/reports.yaml

@@ -0,0 +1,3 @@
+columns:
+  - type: pk
+  - name: name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/lms",
-  "version": "0.0.266",
+  "version": "0.0.267",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -11,9 +11,9 @@
     "@nestjs/mapped-types": "*",
     "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/api-pagination": "0.0.5",
-    "@hed-hog/api-prisma": "0.0.4",
     "@hed-hog/core": "0.0.261",
     "@hed-hog/api-types": "0.0.1",
+    "@hed-hog/api-prisma": "0.0.4",
     "@hed-hog/api": "0.0.3"
   },
   "exports": {