@hed-hog/core 0.0.215 → 0.0.217

package/hedhog/frontend/app/dashboard/components/stats.tsx.ejs

@@ -0,0 +1,93 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { IconGripVertical } from '@tabler/icons-react';
+import { ArrowRight, TrendingDown, TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React, { useEffect, useState } from 'react';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  change?: string;
+  changeType: 'up' | 'down';
+  icon: React.ReactNode;
+  iconBg: string;
+  delay: number;
+}
+
+export default function StatCard({
+  title,
+  value,
+  change,
+  changeType,
+  icon,
+  iconBg,
+  delay,
+}: StatCardProps) {
+  const t = useTranslations('core.Dashboard');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setMounted(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  return (
+    <Card
+      className={`h-full flex flex-col group relative overflow-hidden transition-all duration-300 hover:shadow-lg ${
+        mounted ? 'animate-fade-in-up' : 'opacity-0'
+      }`}
+    >
+      <div className="absolute inset-0 animate-shimmer opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+      <div
+        className="drag-handle absolute top-2 left-3 z-10"
+        style={{ cursor: 'grab' }}
+      >
+        <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
+      </div>
+      <CardContent className="flex-1 p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium text-muted-foreground">
+              {title}
+            </span>
+            <span className="text-3xl font-bold tracking-tight text-foreground animate-count-up">
+              {value}
+            </span>
+            {change !== undefined && (
+              <div className="flex items-center gap-1 pt-1">
+                {changeType === 'up' ? (
+                  <TrendingUp className="h-3.5 w-3.5 text-emerald-500" />
+                ) : (
+                  <TrendingDown className="h-3.5 w-3.5 text-destructive" />
+                )}
+                <span
+                  className={`text-xs font-medium ${
+                    changeType === 'up'
+                      ? 'text-emerald-500'
+                      : 'text-destructive'
+                  }`}
+                >
+                  {change}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {t('vsPreviousMonth')}
+                </span>
+              </div>
+            )}
+          </div>
+          <div
+            className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl ${iconBg}`}
+          >
+            {icon}
+          </div>
+        </div>
+        <div className="mt-4 flex items-center gap-1 text-xs text-muted-foreground opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+          <span>{t('viewDetails')}</span>
+          <ArrowRight className="h-3 w-3" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widget-wrapper.tsx.ejs

@@ -0,0 +1,150 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { IconGripVertical, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+
+interface WidgetWrapperProps {
+  isLoading: boolean;
+  isAccessDenied: boolean;
+  isError: boolean;
+  widgetName: string;
+  onRemove?: () => void;
+  children: React.ReactNode;
+}
+
+export function WidgetWrapper({
+  isLoading,
+  isAccessDenied,
+  isError,
+  widgetName,
+  onRemove,
+  children,
+}: WidgetWrapperProps) {
+  const t = useTranslations('core.DashboardPage');
+
+  if (isLoading) {
+    return (
+      <div className="relative h-full w-full">
+        {onRemove && (
+          <div className="absolute top-3 right-4 z-10">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-6 shrink-0 no-drag"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onRemove();
+              }}
+            >
+              <IconX className="size-3" />
+            </Button>
+          </div>
+        )}
+        <Skeleton className="h-full w-full" />
+      </div>
+    );
+  }
+
+  if (isAccessDenied) {
+    return (
+      <div className="group relative flex h-full w-full flex-col items-center justify-center rounded-lg border border-destructive/50 bg-destructive/5 p-4 text-center">
+        <div
+          className="drag-handle absolute left-4 top-3 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="size-4 shrink-0 text-muted-foreground/50" />
+        </div>
+        {onRemove && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="no-drag absolute right-4 top-3 z-10 size-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onRemove();
+            }}
+          >
+            <IconX className="size-3" />
+          </Button>
+        )}
+        <div className="mb-2 text-4xl text-destructive">🔒</div>
+        <h3 className="mb-2 text-sm font-semibold text-destructive">
+          {widgetName}
+        </h3>
+        <p className="mb-1 text-xs font-medium text-destructive">
+          {t('accessDenied')}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {t('widgetDataUnavailable')}
+        </p>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="group relative flex h-full w-full flex-col items-center justify-center rounded-lg border border-destructive/50 bg-destructive/5 p-4 text-center">
+        <div
+          className="drag-handle absolute left-4 top-3 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="size-4 shrink-0 text-muted-foreground/50" />
+        </div>
+        {onRemove && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="no-drag absolute right-4 top-3 z-10 size-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onRemove();
+            }}
+          >
+            <IconX className="size-3" />
+          </Button>
+        )}
+        <div className="mb-2 text-4xl text-destructive">⚠️</div>
+        <h3 className="mb-2 text-sm font-semibold text-destructive">
+          {widgetName}
+        </h3>
+        <p className="mb-1 text-xs font-medium text-destructive">
+          {t('renderError')}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {t('widgetRenderError')}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group relative h-full w-full">
+      <div
+        className="drag-handle absolute left-3 top-3 z-20"
+        style={{ cursor: 'grab' }}
+      >
+        <IconGripVertical className="size-4 shrink-0 text-muted-foreground/30 opacity-0 transition-opacity group-hover:opacity-100" />
+      </div>
+      {onRemove && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="no-drag absolute right-3 top-3 z-20 size-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onRemove();
+          }}
+        >
+          <IconX className="size-3" />
+        </Button>
+      )}
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,184 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+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,
+};
+
+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 flex-col">
+      <CardHeader className="shrink-0 pb-3">
+        <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>{t('description')}</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 overflow-auto pt-0">
+        <div className="mb-5 flex flex-col items-center gap-3 rounded-xl bg-muted/50 p-5">
+          <div className="flex items-baseline gap-1">
+            <span className={`text-5xl font-bold tracking-tight ${scoreColor}`}>
+              {score}
+            </span>
+            <span className="text-lg text-muted-foreground">/100</span>
+          </div>
+          <Progress
+            value={score}
+            className="h-2.5 w-full max-w-xs"
+            style={
+              {
+                '--progress-foreground': progressColor,
+              } as any
+            }
+          />
+          <p className="text-xs text-muted-foreground">
+            {score >= 80 ? t('wellProtected') : t('recommendProtections')}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          {data.checks.map((item) => {
+            const Icon = ICON_MAP[item.id] ?? ShieldCheck;
+            return (
+              <div
+                key={item.id}
+                className="group flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50"
+              >
+                <div
+                  className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
+                    item.enabled
+                      ? 'bg-emerald-50 dark:bg-emerald-950/40'
+                      : 'bg-muted'
+                  }`}
+                >
+                  <Icon
+                    className={`h-4 w-4 ${
+                      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 items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">
+                      {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-xs text-muted-foreground">
+                    {t(`descriptions.${item.descriptionKey}` as any) ||
+                      item.descriptionKey}
+                  </span>
+                </div>
+                {!item.enabled && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => router.push('/core/account/2fa')}
+                    className="shrink-0 gap-1 text-xs"
+                  >
+                    {t('activate')}
+                    <ChevronRight className="h-3 w-3" />
+                  </Button>
+                )}
+              </div>
+            );
+          })}
+        </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/active-users-card.tsx.ejs

@@ -0,0 +1,58 @@
+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>
+  );
+}