@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/core.email-notifications.tsx.ejs

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

package/hedhog/frontend/app/dashboard/components/widgets/core.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/app/dashboard/components/widgets/core.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>
+  );
+}