@hed-hog/core 0.0.299 → 0.0.300

package/hedhog/frontend/app/dashboard/components/widgets/core..gitkeep.ejs

@@ -1,11 +0,0 @@
-Reserved for widget templates contributed directly by this library.
-
-Expected naming convention:
-- core widgets: <slug>.tsx.ejs (legacy-compatible)
-- cross-library-safe widgets: <library>.<slug>.tsx.ejs
-
-The Hedhog CLI should copy these templates to:
-apps/admin/src/app/(app)/(libraries)/core/dashboard/components/widgets/
-
-Optional static previews can follow the same namespaced slug and be copied to:
-apps/admin/public/libraries/core/dashboard-previews/

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>
-  );
-}