@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/widgets/active-classes-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 { CalendarDays, 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?: { activeClasses?: DashboardMetric } };
+
+export default function ActiveClassesKpi({ 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: { activeClasses: (d as any)?.kpis?.activeClasses } }),
+  });
+
+  const metric = data?.kpis?.activeClasses;
+  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.activeClasses.label')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <div className="h-1 w-full bg-gradient-to-r from-emerald-500/60 via-emerald-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.activeClasses.label')}
+            </p>
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10">
+              <CalendarDays className="size-4 text-emerald-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.activeClasses.description')}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/active-courses-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 { BookOpen, 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?: { activeCourses?: DashboardMetric } };
+
+export default function ActiveCoursesKpi({ 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: { activeCourses: (d as any)?.kpis?.activeCourses } }),
+  });
+
+  const metric = data?.kpis?.activeCourses;
+  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.activeCourses.label')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <div className="h-1 w-full bg-gradient-to-r from-sky-500/60 via-blue-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.activeCourses.label')}
+            </p>
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/10">
+              <BookOpen className="size-4 text-sky-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.activeCourses.description')}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/approval-rate-kpi.tsx.ejs

@@ -0,0 +1,81 @@
+'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 { Percent, 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?: { approvalRate?: DashboardMetric } };
+
+export default function ApprovalRateKpi({ 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: { approvalRate: (d as any)?.kpis?.approvalRate } }),
+  });
+
+  const metric = data?.kpis?.approvalRate;
+  const value = metric?.value ?? 0;
+  const change = metric?.change ?? 0;
+
+  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.approvalRate.label')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/70">
+        <div className="h-1 w-full bg-gradient-to-r from-rose-500/60 via-rose-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.approvalRate.label')}
+            </p>
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-rose-500/10">
+              <Percent className="size-4 text-rose-700" />
+            </div>
+          </div>
+          <div>
+            <p className="text-3xl font-bold tracking-tight">{decimalFmt.format(value)}%</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.approvalRate.description')}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/category-distribution-chart.tsx.ejs

@@ -0,0 +1,119 @@
+'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 {
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts';
+
+interface Props {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+type CategoryItem = { name: string; value: number };
+type Data = { charts?: { categoryDistribution?: CategoryItem[] } };
+
+const PIE_COLORS = [
+  '#f97316',
+  '#3b82f6',
+  '#22c55e',
+  '#a855f7',
+  '#ec4899',
+];
+
+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 CategoryDistributionChart({ widget, onRemove }: Props) {
+  const t = useTranslations('lms.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } = useWidgetData<Data>({
+    endpoint: '/lms/dashboard',
+    queryKey: 'lms-dashboard',
+    select: (d) => ({ charts: { categoryDistribution: (d as any)?.charts?.categoryDistribution } }),
+  });
+
+  const chartData = useMemo(
+    () =>
+      (data?.charts?.categoryDistribution ?? []).map((item) => ({
+        nome: item.name,
+        valor: item.value,
+      })),
+    [data]
+  );
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('charts.categoryDistribution.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.categoryDistribution.title')}
+          </CardTitle>
+          <CardDescription>{t('charts.categoryDistribution.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-1 flex-col items-center pt-0">
+          <div className="w-full flex-1">
+            <ResponsiveContainer width="100%" height={220}>
+              <PieChart>
+                <Pie
+                  data={chartData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={55}
+                  outerRadius={85}
+                  dataKey="valor"
+                  nameKey="nome"
+                  strokeWidth={3}
+                  stroke="hsl(var(--background))"
+                >
+                  {chartData.map((_, index) => (
+                    <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip
+                  contentStyle={chartTooltipStyle}
+                  formatter={(value: number) => [
+                    `${value}%`,
+                    t('charts.categoryDistribution.tooltip'),
+                  ]}
+                />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-2 flex flex-wrap justify-center gap-x-4 gap-y-2">
+            {chartData.map((item, i) => (
+              <div key={item.nome} className="flex items-center gap-1.5 text-xs">
+                <span
+                  className="inline-block size-2.5 rounded-full"
+                  style={{ backgroundColor: PIE_COLORS[i % PIE_COLORS.length] }}
+                />
+                <span className="text-muted-foreground">
+                  {item.nome} ({item.valor}%)
+                </span>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}