@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/widgets/footer-summary.tsx.ejs

@@ -0,0 +1,80 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type FooterSummary = {
+  activeClasses: number;
+  publishedCourses: number;
+  enrolledStudents: number;
+  certificates: number;
+};
+
+type Data = { footerSummary?: FooterSummary };
+
+export default function FooterSummary({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+  const locale = useLocale();
+  const culture = locale.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ footerSummary: (d as any)?.footerSummary }),
+  });
+
+  const numberFmt = useMemo(() => new Intl.NumberFormat(culture), [culture]);
+  const summary = data?.footerSummary;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('footer.systemStatus')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <CardContent className="flex h-full flex-wrap items-center justify-between gap-4 p-4">
+          <div className="flex items-center gap-2.5">
+            <Badge variant="secondary" className="gap-1.5 text-xs font-medium">
+              <span className="inline-block size-2 rounded-full bg-emerald-500" />
+              {t('footer.systemStatus')}
+            </Badge>
+          </div>
+          <div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
+            <span>
+              {t('footer.activeClasses', {
+                count: numberFmt.format(summary?.activeClasses ?? 0),
+              })}
+            </span>
+            <span>
+              {t('footer.publishedCourses', {
+                count: numberFmt.format(summary?.publishedCourses ?? 0),
+              })}
+            </span>
+            <span>
+              {t('footer.enrolledStudents', {
+                count: numberFmt.format(summary?.enrolledStudents ?? 0),
+              })}
+            </span>
+            <span>
+              {t('footer.certificates', {
+                count: numberFmt.format(summary?.certificates ?? 0),
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/issued-certificates-kpi.tsx.ejs

@@ -0,0 +1,74 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Award, TrendingUp, TrendingDown } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type DashboardMetric = { value: number; change: number; changeType: 'percent' | 'absolute' };
+type Data = { kpis?: { issuedCertificates?: DashboardMetric } };
+
+export default function IssuedCertificatesKpi({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+  const locale = useLocale();
+  const culture = locale.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ kpis: { issuedCertificates: (d as any)?.kpis?.issuedCertificates } }),
+  });
+
+  const metric = data?.kpis?.issuedCertificates;
+  const value = metric?.value ?? 0;
+  const change = metric?.change ?? 0;
+
+  const numberFmt = useMemo(() => new Intl.NumberFormat(culture), [culture]);
+  const formatted = numberFmt.format(value);
+  const isPositive = change >= 0;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.issuedCertificates.label')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <div className="h-1 w-full bg-gradient-to-r from-amber-500/60 via-yellow-400/30 to-transparent" />
+        <CardContent className="flex h-full flex-col justify-between p-5">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-medium text-muted-foreground">
+              {t('kpis.issuedCertificates.label')}
+            </p>
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/10">
+              <Award className="size-4 text-amber-700" />
+            </div>
+          </div>
+          <div>
+            <p className="text-3xl font-bold tracking-tight">{formatted}</p>
+            <div className="mt-1 flex items-center gap-1 text-xs">
+              {isPositive ? (
+                <TrendingUp className="size-3 text-emerald-600" />
+              ) : (
+                <TrendingDown className="size-3 text-red-500" />
+              )}
+              <span className={isPositive ? 'text-emerald-600' : 'text-red-500'}>
+                +{numberFmt.format(Math.abs(change))}
+              </span>
+              <span className="text-muted-foreground">{t('kpis.issuedCertificates.description')}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/latest-enrollments.tsx.ejs

@@ -0,0 +1,166 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { format } from 'date-fns';
+import { enUS } from 'date-fns/locale/en-US';
+import { ptBR } from 'date-fns/locale/pt-BR';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type EnrollmentItem = {
+  id: number;
+  studentName: string;
+  email: string;
+  courseTitle: string;
+  enrolledAt: string;
+  status: string;
+};
+
+type Data = { latestEnrollments?: EnrollmentItem[] };
+
+const ITEMS_PER_PAGE = 5;
+
+function parseApiDateTime(value: string): Date {
+  const raw = String(value ?? '').trim();
+  if (!raw) return new Date(NaN);
+  const hasTimezone = /[zZ]$|[+-]\d{2}:\d{2}$/.test(raw);
+  if (hasTimezone) return new Date(raw);
+  const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+  if (dateOnly) {
+    return new Date(Number(dateOnly[1]), Number(dateOnly[2]) - 1, Number(dateOnly[3]), 12, 0, 0, 0);
+  }
+  const dt = /^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?/.exec(raw);
+  if (dt) {
+    return new Date(Number(dt[1]), Number(dt[2]) - 1, Number(dt[3]), Number(dt[4]), Number(dt[5]), Number(dt[6] ?? '0'), 0);
+  }
+  return new Date(raw);
+}
+
+function getInitials(name: string) {
+  return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
+}
+
+function statusColor(status: string) {
+  if (['confirmed', 'active', 'completed'].includes(status)) return 'bg-emerald-100 text-emerald-700';
+  if (['pending', 'paused', 'open'].includes(status)) return 'bg-amber-100 text-amber-700';
+  return 'bg-red-100 text-red-700';
+}
+
+export default function LatestEnrollments({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+  const locale = useLocale();
+  const dateLocale = locale.startsWith('pt') ? ptBR : enUS;
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ latestEnrollments: (d as any)?.latestEnrollments }),
+  });
+
+  const enrollments = useMemo(
+    () =>
+      (data?.latestEnrollments ?? []).map((item) => ({
+        id: item.id,
+        aluno: item.studentName,
+        email: item.email,
+        curso: item.courseTitle,
+        data: format(
+          parseApiDateTime(item.enrolledAt),
+          locale.startsWith('pt') ? 'dd/MM/yyyy' : 'MM/dd/yyyy',
+          { locale: dateLocale }
+        ),
+        status: item.status,
+      })),
+    [data, dateLocale, locale]
+  );
+
+  const paged = enrollments.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('tables.latestEnrollments.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col overflow-hidden border-border/70">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-semibold">
+            {t('tables.latestEnrollments.title')}
+          </CardTitle>
+          <CardDescription>
+            {t('tables.latestEnrollments.description', { count: enrollments.length })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-1 flex-col">
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('tables.latestEnrollments.columns.student')}</TableHead>
+                  <TableHead className="hidden sm:table-cell">{t('tables.latestEnrollments.columns.email')}</TableHead>
+                  <TableHead>{t('tables.latestEnrollments.columns.course')}</TableHead>
+                  <TableHead className="hidden md:table-cell">{t('tables.latestEnrollments.columns.date')}</TableHead>
+                  <TableHead>{t('tables.latestEnrollments.columns.status')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paged.map((m) => (
+                  <TableRow key={m.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2.5">
+                        <Avatar className="size-8">
+                          <AvatarFallback className="bg-foreground text-[10px] font-medium text-background">
+                            {getInitials(m.aluno)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="font-medium">{m.aluno}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden text-muted-foreground sm:table-cell">{m.email}</TableCell>
+                    <TableCell>{m.curso}</TableCell>
+                    <TableCell className="hidden text-muted-foreground md:table-cell">{m.data}</TableCell>
+                    <TableCell>
+                      <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ${statusColor(m.status)}`}>
+                        {t(`statuses.${m.status}`)}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          <div className="mt-auto border-t pt-4">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={ITEMS_PER_PAGE}
+              totalItems={enrollments.length}
+              onPageChange={setPage}
+              onPageSizeChange={() => undefined}
+              pageSizeOptions={[ITEMS_PER_PAGE]}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/student-growth-chart.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type GrowthItem = { label: string; students: number };
+type Data = { charts?: { studentGrowth?: GrowthItem[] } };
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '8px',
+  fontSize: '12px',
+  boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+};
+
+export default function StudentGrowthChart({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ charts: { studentGrowth: (d as any)?.charts?.studentGrowth } }),
+  });
+
+  const chartData = useMemo(
+    () =>
+      (data?.charts?.studentGrowth ?? []).map((item) => ({
+        mes: item.label,
+        alunos: item.students,
+      })),
+    [data]
+  );
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('charts.studentGrowth.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col overflow-hidden border-border/70">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-semibold">
+            {t('charts.studentGrowth.title')}
+          </CardTitle>
+          <CardDescription>{t('charts.studentGrowth.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+              <XAxis dataKey="mes" fontSize={12} tickLine={false} axisLine={false} />
+              <YAxis fontSize={12} tickLine={false} axisLine={false} />
+              <Tooltip contentStyle={chartTooltipStyle} />
+              <Line
+                type="monotone"
+                dataKey="alunos"
+                stroke="#3b82f6"
+                strokeWidth={2.5}
+                dot={{ r: 4, fill: '#3b82f6', strokeWidth: 2, stroke: '#fff' }}
+                activeDot={{ r: 6, fill: '#3b82f6' }}
+                name={t('charts.studentGrowth.series')}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/top-courses-chart.tsx.ejs

@@ -0,0 +1,104 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type TopCourseItem = { title: string; accesses: number };
+type Data = { charts?: { topCourses?: TopCourseItem[] } };
+
+const chartTooltipStyle = {
+  backgroundColor: 'hsl(var(--card))',
+  border: '1px solid hsl(var(--border))',
+  borderRadius: '8px',
+  fontSize: '12px',
+  boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+};
+
+export default function TopCoursesChart({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ charts: { topCourses: (d as any)?.charts?.topCourses } }),
+  });
+
+  const chartData = useMemo(
+    () =>
+      (data?.charts?.topCourses ?? []).map((item) => ({
+        curso: item.title,
+        acessos: item.accesses,
+      })),
+    [data]
+  );
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('charts.topCourses.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col overflow-hidden border-border/70">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-semibold">
+            {t('charts.topCourses.title')}
+          </CardTitle>
+          <CardDescription>{t('charts.topCourses.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData} layout="vertical">
+              <CartesianGrid
+                strokeDasharray="3 3"
+                stroke="hsl(var(--border))"
+                horizontal={false}
+              />
+              <XAxis type="number" fontSize={12} tickLine={false} axisLine={false} />
+              <YAxis
+                type="category"
+                dataKey="curso"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+                width={110}
+              />
+              <Tooltip contentStyle={chartTooltipStyle} />
+              <defs>
+                <linearGradient id="topCoursesBar" x1="0" y1="0" x2="1" y2="0">
+                  <stop offset="0%" stopColor="#3b82f6" />
+                  <stop offset="100%" stopColor="#60a5fa" />
+                </linearGradient>
+              </defs>
+              <Bar
+                dataKey="acessos"
+                fill="url(#topCoursesBar)"
+                radius={[0, 6, 6, 0]}
+                name={t('charts.topCourses.series')}
+                barSize={28}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/total-students-kpi.tsx.ejs

@@ -0,0 +1,78 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Users, TrendingUp, TrendingDown } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type DashboardMetric = { value: number; change: number; changeType: 'percent' | 'absolute' };
+type Data = { kpis?: { totalStudents?: DashboardMetric } };
+
+export default function TotalStudentsKpi({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+  const locale = useLocale();
+  const culture = locale.startsWith('pt') ? 'pt-BR' : 'en-US';
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ kpis: { totalStudents: (d as any)?.kpis?.totalStudents } }),
+  });
+
+  const metric = data?.kpis?.totalStudents;
+  const value = metric?.value ?? 0;
+  const change = metric?.change ?? 0;
+
+  const formatted = useMemo(() => new Intl.NumberFormat(culture).format(value), [culture, value]);
+  const decimalFmt = useMemo(
+    () => new Intl.NumberFormat(culture, { minimumFractionDigits: 1, maximumFractionDigits: 1 }),
+    [culture]
+  );
+
+  const isPositive = change >= 0;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.totalStudents.label')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <div className="h-1 w-full bg-gradient-to-r from-orange-500/60 via-amber-500/30 to-transparent" />
+        <CardContent className="flex h-full flex-col justify-between p-5">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-medium text-muted-foreground">
+              {t('kpis.totalStudents.label')}
+            </p>
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-orange-500/10">
+              <Users className="size-4 text-orange-700" />
+            </div>
+          </div>
+          <div>
+            <p className="text-3xl font-bold tracking-tight">{formatted}</p>
+            <div className="mt-1 flex items-center gap-1 text-xs">
+              {isPositive ? (
+                <TrendingUp className="size-3 text-emerald-600" />
+              ) : (
+                <TrendingDown className="size-3 text-red-500" />
+              )}
+              <span className={isPositive ? 'text-emerald-600' : 'text-red-500'}>
+                {decimalFmt.format(Math.abs(change))}%
+              </span>
+              <span className="text-muted-foreground">{t('kpis.totalStudents.description')}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}