@hed-hog/core 0.0.299 → 0.0.301

package/hedhog/frontend/app/dashboard/components/widgets/core.account-security.tsx.ejs

@@ -1,192 +0,0 @@
-'use client';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Progress } from '@/components/ui/progress';
-import { useWidgetData } from '@/hooks/use-widget-data';
-import type { AllWidgetsData } from '@/types/widget-data';
-import {
-  AlertTriangle,
-  CheckCircle2,
-  ChevronRight,
-  Lock,
-  Mail,
-  ShieldCheck,
-  Smartphone,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-
-import type { AccountSecurityData } from '@/types/widget-data';
-import { useRouter } from 'next/navigation';
-import { WidgetWrapper } from '../widget-wrapper';
-
-const ICON_MAP: Record<string, React.ElementType> = {
-  password: Lock,
-  '2fa': Smartphone,
-  email: Mail,
-  sessions: AlertTriangle,
-};
-
-const CHECK_ROUTE_MAP: Record<string, string> = {
-  password: '/core/account/password',
-  '2fa': '/core/account/2fa',
-  email: '/core/account/email',
-  sessions: '/core/account/sessions',
-};
-
-function AccountSecurityContent({ data }: { data: AccountSecurityData }) {
-  const t = useTranslations('core.DashboardPage.accountSecurity');
-  const router = useRouter();
-  const [score, setScore] = useState(0);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setScore(data.score), 300);
-    return () => clearTimeout(timer);
-  }, [data.score]);
-
-  const scoreColor =
-    score >= 80
-      ? 'text-emerald-600'
-      : score >= 50
-        ? 'text-amber-600'
-        : 'text-red-600';
-
-  const progressColor =
-    score >= 80
-      ? 'hsl(160, 84%, 39%)'
-      : score >= 50
-        ? 'hsl(38, 92%, 50%)'
-        : 'hsl(0, 84%, 60%)';
-
-  return (
-    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
-      <CardHeader className="shrink-0 px-4 pb-2 pt-4 sm:px-5">
-        <div className="flex items-center gap-2">
-          <ShieldCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
-          <div>
-            <CardTitle className="text-base font-semibold">
-              {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-auto px-4 pb-3 pt-0 sm:px-5 sm:pb-4">
-        <div className="mb-2 flex flex-col items-center gap-1.5 rounded-xl bg-muted/50 p-2 sm:mb-3 sm:gap-2 sm:p-3">
-          <div className="flex items-baseline gap-1">
-            <span
-              className={`text-2xl font-bold tracking-tight sm:text-3xl ${scoreColor}`}
-            >
-              {score}
-            </span>
-            <span className="text-xs text-muted-foreground sm:text-sm">
-              /100
-            </span>
-          </div>
-          <Progress
-            value={score}
-            className="h-1.5 w-full max-w-70"
-            style={
-              {
-                '--progress-foreground': progressColor,
-              } as any
-            }
-          />
-          <p className="text-[10px] text-muted-foreground sm:text-[11px]">
-            {score >= 80 ? t('wellProtected') : t('recommendProtections')}
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-1">
-          {data.checks.map((item) => {
-            const Icon = ICON_MAP[item.id] ?? ShieldCheck;
-            return (
-              <button
-                type="button"
-                key={item.id}
-                onClick={() =>
-                  router.push(CHECK_ROUTE_MAP[item.id] ?? '/core/account')
-                }
-                className="group flex w-full cursor-pointer flex-wrap items-start gap-2 rounded-lg p-2 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:items-center sm:gap-2.5 sm:p-2.5"
-              >
-                <div
-                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg sm:h-8 sm:w-8 ${
-                    item.enabled
-                      ? 'bg-emerald-50 dark:bg-emerald-950/40'
-                      : 'bg-muted'
-                  }`}
-                >
-                  <Icon
-                    className={`h-3.5 w-3.5 ${
-                      item.enabled
-                        ? 'text-emerald-600 dark:text-emerald-400'
-                        : 'text-muted-foreground'
-                    }`}
-                  />
-                </div>
-                <div className="flex min-w-0 flex-1 flex-col">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="wrap-break-word text-[12px] font-medium text-foreground sm:text-[13px]">
-                      {t(`labels.${item.labelKey}` as any) || item.labelKey}
-                    </span>
-                    {item.enabled ? (
-                      <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
-                    ) : (
-                      <AlertTriangle className="h-3.5 w-3.5 text-amber-500" />
-                    )}
-                  </div>
-                  <span className="text-[10px] text-muted-foreground sm:text-[11px]">
-                    {t(`descriptions.${item.descriptionKey}` as any) ||
-                      item.descriptionKey}
-                  </span>
-                </div>
-                <div className="mt-0.5 flex w-full shrink-0 items-center justify-end gap-1 text-[11px] font-medium text-foreground sm:mt-0 sm:w-auto sm:text-xs">
-                  {!item.enabled && <span>{t('activate')}</span>}
-                  <ChevronRight className="h-3 w-3" />
-                </div>
-              </button>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-interface AccountSecurityProps {
-  widget?: { name?: string };
-  onRemove?: () => void;
-}
-
-export default function AccountSecurity({
-  widget,
-  onRemove,
-}: AccountSecurityProps) {
-  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
-    AllWidgetsData,
-    AccountSecurityData
-  >({
-    endpoint: '/dashboard-core/widgets/me',
-    queryKey: 'widget-me',
-    select: (d) => d.accountSecurity,
-  });
-
-  return (
-    <WidgetWrapper
-      isLoading={isLoading}
-      isError={isError}
-      isAccessDenied={isAccessDenied}
-      widgetName={widget?.name ?? 'account-security'}
-      onRemove={onRemove}
-    >
-      {data && <AccountSecurityContent data={data} />}
-    </WidgetWrapper>
-  );
-}

package/hedhog/frontend/app/dashboard/components/widgets/core.active-users-card.tsx.ejs

@@ -1,58 +0,0 @@
-import { useWidgetData } from '@/hooks/use-widget-data';
-import { Users } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import StatCard from '../stats';
-import { WidgetWrapper } from '../widget-wrapper';
-
-interface ActiveUsersProps {
-  widget?: any;
-  onRemove?: () => void;
-}
-
-interface UserStatsData {
-  cards?: {
-    activeUsers?: {
-      value: number;
-      change: number | null;
-    };
-  };
-}
-
-export default function ActiveUsers({ widget, onRemove }: ActiveUsersProps) {
-  const t = useTranslations('core.Dashboard');
-
-  const { data, isLoading, isAccessDenied, isError } =
-    useWidgetData<UserStatsData>({
-      endpoint: '/dashboard-core/stats/overview/users',
-      queryKey: 'dashboard-stats-users',
-    });
-
-  const value = data?.cards?.activeUsers?.value?.toLocaleString('pt-BR') || '0';
-  const change = data?.cards?.activeUsers?.change;
-  const changeType =
-    change !== null && change !== undefined && change >= 0 ? 'up' : 'down';
-
-  return (
-    <WidgetWrapper
-      isLoading={isLoading}
-      isAccessDenied={isAccessDenied}
-      isError={isError}
-      widgetName={widget?.name || t('activeUsers')}
-      onRemove={onRemove}
-    >
-      <StatCard
-        title={t('activeUsers')}
-        value={value}
-        change={
-          change !== null && change !== undefined
-            ? `${change > 0 ? '+' : ''}${change}%`
-            : undefined
-        }
-        changeType={changeType}
-        icon={<Users className="h-6 w-6 text-blue-500" />}
-        iconBg="bg-blue-500/10"
-        delay={50}
-      />
-    </WidgetWrapper>
-  );
-}

package/hedhog/frontend/app/dashboard/components/widgets/core.activity-timeline.tsx.ejs

@@ -1,223 +0,0 @@
-'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/core.email-notifications.tsx.ejs

@@ -1,226 +0,0 @@
-'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,
-  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 defaultEmailNotificationsData: EmailNotificationsData = {
-  cards: {
-    received: 0,
-    read: 0,
-    unread: 0,
-    error: 0,
-  },
-  chart: [],
-};
-
-interface EmailNotificationsProps {
-  widget?: { name?: string };
-  onRemove?: () => void;
-}
-
-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={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 pb-2">
-          <div className="flex items-center gap-2">
-            <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">
-                {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 gap-4 overflow-hidden pt-0">
-          <div className="grid grid-cols-2 gap-1.5 sm:gap-2 md:grid-cols-4">
-            {emailStats.map((stat) => {
-              const Icon = stat.icon;
-              return (
-                <div
-                  key={stat.label}
-                  className="flex min-w-0 flex-col items-center gap-1 rounded-lg border p-2 text-center transition-colors hover:bg-muted/30 sm:p-2.5"
-                >
-                  <div
-                    className={`flex h-6 w-6 items-center justify-center rounded-md sm:h-7 sm:w-7 ${stat.bg}`}
-                  >
-                    <Icon
-                      className={`h-3 w-3 sm:h-3.5 sm:w-3.5 ${stat.color}`}
-                    />
-                  </div>
-                  <span className="text-base font-bold text-foreground sm:text-lg">
-                    {stat.value}
-                  </span>
-                  <span className="truncate text-[9px] text-muted-foreground sm:text-[10px]">
-                    <span className="sm:hidden">{stat.shortLabel}</span>
-                    <span className="hidden sm:inline">{stat.label}</span>
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-
-          <ChartContainer
-            config={chartConfig}
-            className="min-h-42.5 w-full flex-1 overflow-hidden sm:min-h-55"
-          >
-            <AreaChart data={chartData}>
-              <CartesianGrid vertical={false} strokeDasharray="3 3" />
-              <XAxis
-                dataKey="date"
-                tickLine={false}
-                axisLine={false}
-                fontSize={10}
-                tickMargin={4}
-                minTickGap={20}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                fontSize={10}
-                tickMargin={4}
-                allowDecimals={false}
-              />
-              <ChartTooltip content={<ChartTooltipContent />} />
-              <defs>
-                <linearGradient id="fillRecebidos" x1="0" y1="0" x2="0" y2="1">
-                  <stop
-                    offset="5%"
-                    stopColor="hsl(221, 83%, 53%)"
-                    stopOpacity={0.2}
-                  />
-                  <stop
-                    offset="95%"
-                    stopColor="hsl(221, 83%, 53%)"
-                    stopOpacity={0}
-                  />
-                </linearGradient>
-                <linearGradient id="fillLidos" x1="0" y1="0" x2="0" y2="1">
-                  <stop
-                    offset="5%"
-                    stopColor="hsl(160, 84%, 39%)"
-                    stopOpacity={0.2}
-                  />
-                  <stop
-                    offset="95%"
-                    stopColor="hsl(160, 84%, 39%)"
-                    stopOpacity={0}
-                  />
-                </linearGradient>
-              </defs>
-              <Area
-                type="monotone"
-                dataKey="recebidos"
-                stroke="hsl(221, 83%, 53%)"
-                fill="url(#fillRecebidos)"
-                strokeWidth={2}
-              />
-              <Area
-                type="monotone"
-                dataKey="lidos"
-                stroke="hsl(160, 84%, 39%)"
-                fill="url(#fillLidos)"
-                strokeWidth={2}
-              />
-            </AreaChart>
-          </ChartContainer>
-        </CardContent>
-      </Card>
-    </WidgetWrapper>
-  );
-}