@hed-hog/core 0.0.298 → 0.0.299

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

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

@@ -0,0 +1,199 @@
+'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,
+  MailConfigWidgetData,
+} from '@/types/widget-data';
+import { CheckCircle2, Mail, Send, Server } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+const defaultMailConfigData: MailConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    selectedProvider: null,
+    configuredProvider: null,
+  },
+  sender: {
+    from: null,
+  },
+  metrics: {
+    templateCount: 0,
+    sentCount: 0,
+    sentLast30Days: 0,
+  },
+  providers: [],
+};
+
+interface MailConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+const iconByProvider: Record<string, React.ElementType> = {
+  SMTP: Server,
+  GMAIL: Mail,
+  SES: Send,
+};
+
+export default function MailConfig({ widget, onRemove }: MailConfigProps) {
+  const t = useTranslations('core.DashboardPage.mailConfig');
+
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    MailConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.mailConfig,
+  });
+
+  const mailData = data ?? defaultMailConfigData;
+
+  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-blue-50">
+                <Mail className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
+              </div>
+            </div>
+            <Badge
+              variant="secondary"
+              className={
+                mailData.status.isConfigured
+                  ? 'bg-emerald-50 text-emerald-700'
+                  : 'bg-amber-50 text-amber-700'
+              }
+            >
+              {mailData.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('templates')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {mailData.metrics.templateCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('sentTotal')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {mailData.metrics.sentCount}
+              </p>
+            </div>
+            <div className="rounded-lg border bg-muted/30 p-3 text-center">
+              <p className="text-[11px] text-muted-foreground">
+                {t('sent30Days')}
+              </p>
+              <p className="mt-1 text-lg font-semibold">
+                {mailData.metrics.sentLast30Days}
+              </p>
+            </div>
+          </div>
+
+          <div className="rounded-lg border p-3">
+            <p className="mb-2 text-xs text-muted-foreground">{t('sender')}</p>
+            <p className="truncate text-sm font-medium">
+              {mailData.sender.from || t('notSet')}
+            </p>
+          </div>
+
+          <div className="min-h-0 flex-1 rounded-lg border p-3">
+            <div className="mb-2 flex items-center justify-between">
+              <p className="text-xs text-muted-foreground">{t('providers')}</p>
+              <Badge variant="outline" className="text-[10px]">
+                {t('selectedProvider', {
+                  provider: mailData.status.selectedProvider || t('none'),
+                })}
+              </Badge>
+            </div>
+            <div className="space-y-2">
+              {mailData.providers.length > 0 ? (
+                mailData.providers.map((provider) => {
+                  const Icon = iconByProvider[provider.id] ?? Mail;
+                  const statusClass = provider.configured
+                    ? 'bg-emerald-50 text-emerald-700'
+                    : 'bg-muted text-muted-foreground';
+
+                  return (
+                    <div
+                      key={provider.id}
+                      className="flex items-center justify-between rounded-lg border p-2"
+                    >
+                      <div className="flex min-w-0 items-center gap-2">
+                        <div className="flex h-7 w-7 items-center justify-center rounded-md bg-muted/60">
+                          <Icon className="h-3.5 w-3.5" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-medium">
+                            {provider.label}
+                          </p>
+                          <p className="truncate text-[11px] text-muted-foreground">
+                            {provider.missingKeys.length > 0
+                              ? t('missingKeys', {
+                                  count: provider.missingKeys.length,
+                                })
+                              : t('allKeysPresent')}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        {provider.selected && (
+                          <Badge variant="outline" className="text-[10px]">
+                            {t('selected')}
+                          </Badge>
+                        )}
+                        <Badge variant="secondary" className={statusClass}>
+                          {provider.configured ? (
+                            <>
+                              <CheckCircle2 className="mr-1 h-3 w-3" />
+                              {t('configured')}
+                            </>
+                          ) : (
+                            t('pending')
+                          )}
+                        </Badge>
+                      </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  {t('noProviders')}
+                </p>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/mail-sent-card.tsx.ejs

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

package/hedhog/frontend/widgets/mail-sent-chart.tsx.ejs

@@ -0,0 +1,149 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetWrapper } from '../widget-wrapper';
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ value: number; dataKey: string }>;
+  label?: string;
+}) {
+  const t = useTranslations('core.Dashboard');
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="rounded-lg border bg-card px-3 py-2 shadow-xl">
+      <p className="mb-1 text-xs font-medium text-card-foreground">{label}</p>
+      {payload.map((entry) => (
+        <p key={entry.dataKey} className="text-xs text-muted-foreground">
+          <span
+            className="mr-1.5 inline-block h-2 w-2 rounded-full"
+            style={{ backgroundColor: '#3b82f6' }}
+          />
+          {t('sent')}: {entry.value.toLocaleString('pt-BR')}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+interface EmailStatsChartProps {
+  widget?: any;
+  onRemove?: () => void;
+}
+
+interface MailStatsData {
+  charts?: {
+    emailsPerWeek?: Array<{
+      day: string;
+      sent: number;
+    }>;
+  };
+}
+
+export default function EmailStatsChart({
+  widget,
+  onRemove,
+}: EmailStatsChartProps) {
+  const t = useTranslations('core.Dashboard');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<MailStatsData>({
+      endpoint: '/dashboard-core/stats/overview/mails',
+      queryKey: 'dashboard-stats-mails',
+    });
+
+  const chartData = data?.charts?.emailsPerWeek || [];
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('emailSendingTitle')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col group">
+        <div
+          className="drag-handle absolute top-3 left-4 z-10"
+          style={{ cursor: 'grab' }}
+        >
+          <IconGripVertical className="text-muted-foreground/50 size-4 shrink-0" />
+        </div>
+        <CardHeader className="pb-2 pt-4 pl-10">
+          <CardTitle className="text-base font-semibold">
+            {t('emailSendingTitle')}
+          </CardTitle>
+          <CardDescription>{t('emailSendingDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="h-[280px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={chartData}
+                margin={{ top: 5, right: 10, left: -20, bottom: 0 }}
+              >
+                <CartesianGrid
+                  strokeDasharray="3 3"
+                  stroke="currentColor"
+                  opacity={0.1}
+                />
+                <XAxis
+                  dataKey="day"
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <YAxis
+                  tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+                  axisLine={false}
+                  tickLine={false}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar
+                  dataKey="sent"
+                  fill="#3b82f6"
+                  radius={[4, 4, 0, 0]}
+                  animationDuration={1200}
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="mt-3 flex items-center justify-center">
+            <div className="flex items-center gap-2">
+              <div
+                className="h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: '#3b82f6' }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {t('emailsSent')}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/menus-card.tsx.ejs

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