@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/widgets/activity-timeline.tsx.ejs

@@ -0,0 +1,223 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { ActivityEvent, AllWidgetsData } from '@/types/widget-data';
+import {
+  FileEdit,
+  LogIn,
+  LogOut,
+  Mail,
+  Settings,
+  ShieldAlert,
+  UserCheck,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const typeIconMap: Record<string, React.ElementType> = {
+  login: LogIn,
+  logout: LogOut,
+  security: ShieldAlert,
+  settings: Settings,
+  edit: FileEdit,
+  permission: UserCheck,
+  email: Mail,
+};
+
+const typeColorMap: Record<string, { color: string; bg: string }> = {
+  login: {
+    color: 'text-blue-600 dark:text-blue-400',
+    bg: 'bg-blue-50 dark:bg-blue-950/40',
+  },
+  logout: { color: 'text-muted-foreground', bg: 'bg-muted' },
+  security: {
+    color: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-50 dark:bg-amber-950/40',
+  },
+  settings: { color: 'text-foreground', bg: 'bg-muted' },
+  edit: {
+    color: 'text-indigo-600 dark:text-indigo-400',
+    bg: 'bg-indigo-50 dark:bg-indigo-950/40',
+  },
+  permission: {
+    color: 'text-emerald-600 dark:text-emerald-400',
+    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
+  },
+  email: {
+    color: 'text-rose-600 dark:text-rose-400',
+    bg: 'bg-rose-50 dark:bg-rose-950/40',
+  },
+};
+
+function detectType(action: string): string {
+  const a = action.toLowerCase();
+  if (a.includes('login') || a.includes('entrou') || a.includes('acesso'))
+    return 'login';
+  if (a.includes('logout') || a.includes('saiu') || a.includes('encerr'))
+    return 'logout';
+  if (
+    a.includes('senha') ||
+    a.includes('2fa') ||
+    a.includes('mfa') ||
+    a.includes('segur')
+  )
+    return 'security';
+  if (a.includes('config') || a.includes('idioma') || a.includes('preferên'))
+    return 'settings';
+  if (
+    a.includes('edit') ||
+    a.includes('atualiz') ||
+    a.includes('alter') ||
+    a.includes('perfil')
+  )
+    return 'edit';
+  if (a.includes('permiss') || a.includes('acesso') || a.includes('role'))
+    return 'permission';
+  if (a.includes('email') || a.includes('e-mail') || a.includes('notif'))
+    return 'email';
+  return 'settings';
+}
+
+function formatDate(
+  dateStr: string,
+  tToday: string,
+  tYesterday: string
+): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const eventDay = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  );
+  if (eventDay.getTime() === today.getTime()) return tToday;
+  if (eventDay.getTime() === yesterday.getTime()) return tYesterday;
+  return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short' });
+}
+
+function formatTime(dateStr: string): string {
+  return new Date(dateStr).toLocaleTimeString('pt-BR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function TimelineContent({ events }: { events: ActivityEvent[] }) {
+  const t = useTranslations('core.DashboardPage.activityTimeline');
+  let lastDate = '';
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-sm font-semibold sm:text-base">
+              {t('title')}
+            </CardTitle>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
+          </div>
+          <Badge variant="secondary" className="text-[10px] sm:text-xs">
+            {t('events', { count: events.length })}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden pt-0">
+        <ScrollArea className="h-full pr-2 sm:pr-3">
+          <div className="relative flex flex-col pb-2">
+            <div className="absolute bottom-0 left-[13px] top-0 w-px bg-border/60 sm:left-[15px]" />
+            {events.map((event, index) => {
+              const type = detectType(event.action);
+              const config =
+                typeColorMap[type] ??
+                (typeColorMap.settings as { color: string; bg: string });
+              const Icon = (typeIconMap[type] ?? Settings) as React.ElementType;
+              const dateLabel = formatDate(
+                event.created_at,
+                t('today'),
+                t('yesterday')
+              );
+              const showDate = dateLabel !== lastDate;
+              lastDate = dateLabel;
+
+              return (
+                <div key={event.id}>
+                  {showDate && (
+                    <div className="relative z-10 mb-1 mt-4 first:mt-0">
+                      <span className="ml-9 inline-block rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground sm:ml-11 sm:px-2 sm:text-[11px]">
+                        {dateLabel}
+                      </span>
+                    </div>
+                  )}
+                  <div className="group relative flex items-start gap-3 py-1.5">
+                    <div
+                      className={`relative z-10 mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg sm:h-8 sm:w-8 ${config.bg}`}
+                    >
+                      <Icon
+                        className={`h-3 w-3 sm:h-3.5 sm:w-3.5 ${config.color}`}
+                      />
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg px-1.5 py-1.5 transition-colors group-hover:bg-muted/40 sm:px-2">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="min-w-0 wrap-break-word text-xs font-medium leading-snug text-foreground sm:text-sm">
+                          {event.action}
+                        </span>
+                        <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground sm:text-[11px]">
+                          {formatTime(event.created_at)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ActivityTimelineProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function ActivityTimeline({
+  widget,
+  onRemove,
+}: ActivityTimelineProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    ActivityEvent[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.activityTimeline,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'activity-timeline'}
+      onRemove={onRemove}
+    >
+      {data && <TimelineContent events={data} />}
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/{app/dashboard/components/widgets → widgets}/email-notifications.tsx.ejs

@@ -12,66 +12,26 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type {
+  AllWidgetsData,
+  EmailNotificationsData,
+} from '@/types/widget-data';
 import { Mail, MailCheck, MailWarning, MailX } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 import { WidgetWrapper } from '../widget-wrapper';
 
-const data = [
-  { date: '01 Fev', recebidos: 5, lidos: 4 },
-  { date: '03 Fev', recebidos: 3, lidos: 2 },
-  { date: '05 Fev', recebidos: 8, lidos: 6 },
-  { date: '07 Fev', recebidos: 4, lidos: 4 },
-  { date: '09 Fev', recebidos: 6, lidos: 3 },
-  { date: '11 Fev', recebidos: 2, lidos: 2 },
-  { date: '13 Fev', recebidos: 7, lidos: 5 },
-];
-
-const chartConfig = {
-  recebidos: {
-    label: 'Recebidos',
-    color: 'hsl(221, 83%, 53%)',
-  },
-  lidos: {
-    label: 'Lidos',
-    color: 'hsl(160, 84%, 39%)',
+const defaultEmailNotificationsData: EmailNotificationsData = {
+  cards: {
+    received: 0,
+    read: 0,
+    unread: 0,
+    error: 0,
   },
+  chart: [],
 };
 
-const emailStats = [
-  {
-    label: 'Recebidos',
-    shortLabel: 'Rec.',
-    value: '35',
-    icon: Mail,
-    color: 'text-blue-600 dark:text-blue-400',
-    bg: 'bg-blue-50 dark:bg-blue-950/40',
-  },
-  {
-    label: 'Lidos',
-    shortLabel: 'Lid.',
-    value: '26',
-    icon: MailCheck,
-    color: 'text-emerald-600 dark:text-emerald-400',
-    bg: 'bg-emerald-50 dark:bg-emerald-950/40',
-  },
-  {
-    label: 'Nao lidos',
-    shortLabel: 'N. lid.',
-    value: '9',
-    icon: MailWarning,
-    color: 'text-amber-600 dark:text-amber-400',
-    bg: 'bg-amber-50 dark:bg-amber-950/40',
-  },
-  {
-    label: 'Com erro',
-    shortLabel: 'Erro',
-    value: '2',
-    icon: MailX,
-    color: 'text-red-600 dark:text-red-400',
-    bg: 'bg-red-50 dark:bg-red-950/40',
-  },
-];
-
 interface EmailNotificationsProps {
   widget?: { name?: string };
   onRemove?: () => void;
@@ -81,12 +41,76 @@ export default function EmailNotifications({
   widget,
   onRemove,
 }: EmailNotificationsProps) {
+  const t = useTranslations('core.DashboardPage.emailNotifications');
+
+  const chartConfig = {
+    recebidos: {
+      label: t('received'),
+      color: 'hsl(221, 83%, 53%)',
+    },
+    lidos: {
+      label: t('read'),
+      color: 'hsl(160, 84%, 39%)',
+    },
+  };
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    EmailNotificationsData
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.emailNotifications,
+  });
+
+  const widgetData = data ?? defaultEmailNotificationsData;
+  const chartData = widgetData.chart.map((point) => ({
+    date: point.date,
+    recebidos: point.received ?? 0,
+    lidos: point.read ?? 0,
+  }));
+
+  const emailStats = [
+    {
+      label: t('received'),
+      shortLabel: t('receivedShort'),
+      value: widgetData.cards.received ?? 0,
+      icon: Mail,
+      color: 'text-blue-600 dark:text-blue-400',
+      bg: 'bg-blue-50 dark:bg-blue-950/40',
+    },
+    {
+      label: t('read'),
+      shortLabel: t('readShort'),
+      value: widgetData.cards.read ?? 0,
+      icon: MailCheck,
+      color: 'text-emerald-600 dark:text-emerald-400',
+      bg: 'bg-emerald-50 dark:bg-emerald-950/40',
+    },
+    {
+      label: t('unread'),
+      shortLabel: t('unreadShort'),
+      value: widgetData.cards.unread ?? 0,
+      icon: MailWarning,
+      color: 'text-amber-600 dark:text-amber-400',
+      bg: 'bg-amber-50 dark:bg-amber-950/40',
+    },
+    {
+      label: t('error'),
+      shortLabel: t('errorShort'),
+      value: widgetData.cards.error ?? 0,
+      icon: MailX,
+      color: 'text-red-600 dark:text-red-400',
+      bg: 'bg-red-50 dark:bg-red-950/40',
+    },
+  ];
+
   return (
     <WidgetWrapper
-      isLoading={false}
-      isError={false}
-      isAccessDenied={false}
-      widgetName={widget?.name ?? 'email-notifications'}
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? t('title')}
       onRemove={onRemove}
     >
       <Card className="flex h-full min-h-0 flex-col overflow-hidden">
@@ -95,10 +119,10 @@ export default function EmailNotifications({
             <Mail className="h-4 w-4 text-rose-600 dark:text-rose-400 sm:h-5 sm:w-5" />
             <div>
               <CardTitle className="text-sm font-semibold sm:text-base">
-                Notificacoes por E-mail
+                {t('title')}
               </CardTitle>
               <CardDescription className="text-xs sm:text-sm">
-                E-mails do sistema nos ultimos 14 dias
+                {t('description')}
               </CardDescription>
             </div>
           </div>
@@ -133,9 +157,9 @@ export default function EmailNotifications({
 
           <ChartContainer
             config={chartConfig}
-            className="min-h-[170px] w-full flex-1 overflow-hidden sm:min-h-[220px]"
+            className="min-h-42.5 w-full flex-1 overflow-hidden sm:min-h-55"
           >
-            <AreaChart data={data}>
+            <AreaChart data={chartData}>
               <CartesianGrid vertical={false} strokeDasharray="3 3" />
               <XAxis
                 dataKey="date"

package/hedhog/frontend/widgets/locale-config.tsx.ejs

@@ -0,0 +1,168 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type {
+  DashboardCoreConfigOverviewData,
+  LocaleConfigWidgetData,
+} from '@/types/widget-data';
+import { Calendar, Clock, Globe, Languages } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const defaultLocaleConfigData: LocaleConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    enabledLocaleCount: 0,
+    disabledLocaleCount: 0,
+  },
+  settings: {
+    dateFormat: null,
+    timeFormat: null,
+    timezone: null,
+  },
+  locales: [],
+};
+
+interface LocaleConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function LocaleConfig({ widget, onRemove }: LocaleConfigProps) {
+  const t = useTranslations('core.DashboardPage.localeConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    LocaleConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.localeConfig,
+  });
+
+  const localeData = data ?? defaultLocaleConfigData;
+  const enabledLocales = localeData.locales.filter((locale) => locale.enabled);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? t('title')}
+      onRemove={onRemove}
+    >
+      <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+        <CardHeader className="shrink-0">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50">
+                <Globe className="h-5 w-5 text-indigo-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                localeData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {localeData.status.isConfigured ? t('configured') : t('pending')}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden pt-0">
+          <div className="grid grid-cols-3 gap-2">
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('enabled')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.status.enabledLocaleCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('disabled')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.status.disabledLocaleCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">{t('total')}</p>
+              <p className="mt-1 text-lg font-semibold">
+                {localeData.locales.length}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-2 sm:grid-cols-3">
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Clock className="h-3.5 w-3.5" />
+                {t('timezone')}
+              </div>
+              <p className="truncate font-mono text-xs">
+                {localeData.settings.timezone || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Calendar className="h-3.5 w-3.5" />
+                {t('dateFormat')}
+              </div>
+              <p className="font-mono text-xs">
+                {localeData.settings.dateFormat || t('notSet')}
+              </p>
+            </div>
+            <div className="rounded-lg border p-3">
+              <div className="mb-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Clock className="h-3.5 w-3.5" />
+                {t('timeFormat')}
+              </div>
+              <p className="font-mono text-xs">
+                {localeData.settings.timeFormat || t('notSet')}
+              </p>
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 rounded-lg border p-3">
+            <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+              <Languages className="h-3.5 w-3.5" />
+              <span>{t('enabledLocales')}</span>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {enabledLocales.length > 0 ? (
+                enabledLocales.map((locale) => (
+                  <Badge key={locale.id} variant="outline" className="gap-1">
+                    <span className="font-mono text-[10px]">{locale.code}</span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {locale.name}
+                    </span>
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-xs text-muted-foreground">
+                  {t('noneEnabled')}
+                </span>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/login-history-chart.tsx.ejs

@@ -0,0 +1,115 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import type { AllWidgetsData, LoginDay } from '@/types/widget-data';
+import { LogIn } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function LoginChart({ data }: { data: LoginDay[] }) {
+  const t = useTranslations('core.DashboardPage.loginHistory');
+
+  const chartConfig = {
+    logins: { label: t('logins'), color: 'hsl(221, 83%, 53%)' },
+    failed: { label: t('failed'), color: 'hsl(0, 84%, 60%)' },
+  };
+
+  return (
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
+      <CardHeader className="shrink-0 pb-2">
+        <div className="flex items-center gap-2">
+          <LogIn className="h-4 w-4 text-blue-600 sm:h-5 sm:w-5" />
+          <div>
+            <CardTitle className="text-sm font-semibold sm:text-base">
+              {t('title')}
+            </CardTitle>
+            <CardDescription className="text-xs sm:text-sm">
+              {t('description')}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden pt-0">
+        <ChartContainer
+          config={chartConfig}
+          className="h-full min-h-[140px] w-full flex-1 overflow-hidden sm:min-h-40"
+        >
+          <BarChart data={data as any} barGap={2}>
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              axisLine={false}
+              fontSize={10}
+              tickMargin={4}
+              minTickGap={20}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              fontSize={10}
+              tickMargin={4}
+              allowDecimals={false}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar
+              dataKey="logins"
+              fill="hsl(221, 83%, 53%)"
+              radius={[4, 4, 0, 0]}
+            />
+            <Bar
+              dataKey="failed"
+              fill="hsl(0, 84%, 60%)"
+              radius={[4, 4, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface LoginHistoryChartProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function LoginHistoryChart({
+  widget,
+  onRemove,
+}: LoginHistoryChartProps) {
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    AllWidgetsData,
+    LoginDay[]
+  >({
+    endpoint: '/dashboard-core/widgets/me',
+    queryKey: 'widget-me',
+    select: (d) => d.loginHistory,
+  });
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isError={isError}
+      isAccessDenied={isAccessDenied}
+      widgetName={widget?.name ?? 'login-history-chart'}
+      onRemove={onRemove}
+    >
+      {data && <LoginChart data={data} />}
+    </WidgetWrapper>
+  );
+}