@hed-hog/core 0.0.215 → 0.0.216

package/hedhog/frontend/app/dashboard/components/widgets/mail-config.tsx.ejs

@@ -0,0 +1,445 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { AlertCircle, CheckCircle2, Mail, Send, Server } from 'lucide-react';
+import { useState } from 'react';
+
+type EmailProvider = 'smtp' | 'gmail' | 'aws_ses';
+
+interface SmtpConfig {
+  host: string;
+  port: string;
+  username: string;
+  password: string;
+  encryption: 'tls' | 'ssl' | 'none';
+  fromName: string;
+  fromEmail: string;
+}
+
+interface GmailConfig {
+  clientId: string;
+  clientSecret: string;
+  refreshToken: string;
+  fromName: string;
+  fromEmail: string;
+}
+
+interface AwsSesConfig {
+  accessKeyId: string;
+  secretAccessKey: string;
+  region: string;
+  fromName: string;
+  fromEmail: string;
+}
+
+const initialSmtp: SmtpConfig = {
+  host: 'smtp.empresa.com',
+  port: '587',
+  username: 'noreply@empresa.com',
+  password: '',
+  encryption: 'tls',
+  fromName: 'HeroAdmin',
+  fromEmail: 'noreply@empresa.com',
+};
+
+const initialGmail: GmailConfig = {
+  clientId: '',
+  clientSecret: '',
+  refreshToken: '',
+  fromName: 'HeroAdmin',
+  fromEmail: '',
+};
+
+const initialAwsSes: AwsSesConfig = {
+  accessKeyId: '',
+  secretAccessKey: '',
+  region: 'us-east-1',
+  fromName: 'HeroAdmin',
+  fromEmail: '',
+};
+
+const providers: {
+  value: EmailProvider;
+  label: string;
+  icon: React.ReactNode;
+  description: string;
+}[] = [
+  {
+    value: 'smtp',
+    label: 'SMTP',
+    icon: <Server className="h-4 w-4" />,
+    description: 'Servidor SMTP personalizado',
+  },
+  {
+    value: 'gmail',
+    label: 'Gmail',
+    icon: <Mail className="h-4 w-4" />,
+    description: 'API do Google Gmail',
+  },
+  {
+    value: 'aws_ses',
+    label: 'AWS SES',
+    icon: <Send className="h-4 w-4" />,
+    description: 'Amazon Simple Email Service',
+  },
+];
+
+export default function EmailConfig() {
+  const [provider, setProvider] = useState<EmailProvider>('smtp');
+  const [smtp, setSmtp] = useState(initialSmtp);
+  const [gmail, setGmail] = useState(initialGmail);
+  const [awsSes, setAwsSes] = useState(initialAwsSes);
+  const [testSent, setTestSent] = useState(false);
+
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <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">Envio de E-mails</CardTitle>
+              <CardDescription>
+                Configure o provedor de e-mail do sistema
+              </CardDescription>
+            </div>
+          </div>
+          <Badge variant="secondary" className="bg-emerald-50 text-emerald-700">
+            <CheckCircle2 className="mr-1 h-3 w-3" />
+            Ativo
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Provider Selector */}
+        <div className="grid grid-cols-3 gap-3">
+          {providers.map((p) => (
+            <button
+              key={p.value}
+              type="button"
+              onClick={() => setProvider(p.value)}
+              className={`flex flex-col items-center gap-2 rounded-lg border-2 p-4 text-center transition-all ${
+                provider === p.value
+                  ? 'border-foreground bg-foreground/3'
+                  : 'border-border hover:border-foreground/20'
+              }`}
+            >
+              <div
+                className={`flex h-9 w-9 items-center justify-center rounded-full ${
+                  provider === p.value
+                    ? 'bg-foreground text-background'
+                    : 'bg-muted text-muted-foreground'
+                }`}
+              >
+                {p.icon}
+              </div>
+              <span className="text-sm font-medium">{p.label}</span>
+              <span className="text-xs text-muted-foreground">
+                {p.description}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* SMTP Fields */}
+        {provider === 'smtp' && (
+          <div className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="smtp-host">Servidor SMTP</Label>
+                <Input
+                  id="smtp-host"
+                  value={smtp.host}
+                  onChange={(e) => setSmtp({ ...smtp, host: e.target.value })}
+                  placeholder="smtp.exemplo.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="smtp-port">Porta</Label>
+                <Input
+                  id="smtp-port"
+                  value={smtp.port}
+                  onChange={(e) => setSmtp({ ...smtp, port: e.target.value })}
+                  placeholder="587"
+                />
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="smtp-user">Usuario</Label>
+                <Input
+                  id="smtp-user"
+                  value={smtp.username}
+                  onChange={(e) =>
+                    setSmtp({ ...smtp, username: e.target.value })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="smtp-pass">Senha</Label>
+                <Input
+                  id="smtp-pass"
+                  type="password"
+                  value={smtp.password}
+                  onChange={(e) =>
+                    setSmtp({ ...smtp, password: e.target.value })
+                  }
+                  placeholder="********"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Criptografia</Label>
+              <Select
+                value={smtp.encryption}
+                onValueChange={(val: 'tls' | 'ssl' | 'none') =>
+                  setSmtp({ ...smtp, encryption: val })
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="tls">TLS (Recomendado)</SelectItem>
+                  <SelectItem value="ssl">SSL</SelectItem>
+                  <SelectItem value="none">Nenhuma</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="smtp-from-name">Nome do remetente</Label>
+                <Input
+                  id="smtp-from-name"
+                  value={smtp.fromName}
+                  onChange={(e) =>
+                    setSmtp({ ...smtp, fromName: e.target.value })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="smtp-from-email">E-mail do remetente</Label>
+                <Input
+                  id="smtp-from-email"
+                  type="email"
+                  value={smtp.fromEmail}
+                  onChange={(e) =>
+                    setSmtp({ ...smtp, fromEmail: e.target.value })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Gmail Fields */}
+        {provider === 'gmail' && (
+          <div className="space-y-4">
+            <div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
+              <div className="flex items-start gap-2">
+                <AlertCircle className="mt-0.5 h-4 w-4 text-amber-600" />
+                <p className="text-xs text-amber-800">
+                  Configure as credenciais OAuth2 no Google Cloud Console.
+                  Habilite a API do Gmail e gere o Client ID e Secret.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="gmail-client-id">Client ID</Label>
+              <Input
+                id="gmail-client-id"
+                value={gmail.clientId}
+                onChange={(e) =>
+                  setGmail({ ...gmail, clientId: e.target.value })
+                }
+                placeholder="xxxxx.apps.googleusercontent.com"
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="gmail-client-secret">Client Secret</Label>
+              <Input
+                id="gmail-client-secret"
+                type="password"
+                value={gmail.clientSecret}
+                onChange={(e) =>
+                  setGmail({ ...gmail, clientSecret: e.target.value })
+                }
+                placeholder="GOCSPX-..."
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="gmail-refresh-token">Refresh Token</Label>
+              <Input
+                id="gmail-refresh-token"
+                type="password"
+                value={gmail.refreshToken}
+                onChange={(e) =>
+                  setGmail({ ...gmail, refreshToken: e.target.value })
+                }
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="gmail-from-name">Nome do remetente</Label>
+                <Input
+                  id="gmail-from-name"
+                  value={gmail.fromName}
+                  onChange={(e) =>
+                    setGmail({ ...gmail, fromName: e.target.value })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="gmail-from-email">E-mail do remetente</Label>
+                <Input
+                  id="gmail-from-email"
+                  type="email"
+                  value={gmail.fromEmail}
+                  onChange={(e) =>
+                    setGmail({ ...gmail, fromEmail: e.target.value })
+                  }
+                  placeholder="email@gmail.com"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* AWS SES Fields */}
+        {provider === 'aws_ses' && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="ses-access-key">Access Key ID</Label>
+              <Input
+                id="ses-access-key"
+                value={awsSes.accessKeyId}
+                onChange={(e) =>
+                  setAwsSes({ ...awsSes, accessKeyId: e.target.value })
+                }
+                placeholder="AKIAIOSFODNN7EXAMPLE"
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="ses-secret-key">Secret Access Key</Label>
+              <Input
+                id="ses-secret-key"
+                type="password"
+                value={awsSes.secretAccessKey}
+                onChange={(e) =>
+                  setAwsSes({ ...awsSes, secretAccessKey: e.target.value })
+                }
+                className="font-mono text-sm"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>Regiao</Label>
+              <Select
+                value={awsSes.region}
+                onValueChange={(val) => setAwsSes({ ...awsSes, region: val })}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="us-east-1">
+                    US East (N. Virginia)
+                  </SelectItem>
+                  <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
+                  <SelectItem value="eu-west-1">EU (Ireland)</SelectItem>
+                  <SelectItem value="eu-central-1">EU (Frankfurt)</SelectItem>
+                  <SelectItem value="sa-east-1">
+                    South America (Sao Paulo)
+                  </SelectItem>
+                  <SelectItem value="ap-southeast-1">
+                    Asia Pacific (Singapore)
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="ses-from-name">Nome do remetente</Label>
+                <Input
+                  id="ses-from-name"
+                  value={awsSes.fromName}
+                  onChange={(e) =>
+                    setAwsSes({ ...awsSes, fromName: e.target.value })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="ses-from-email">E-mail do remetente</Label>
+                <Input
+                  id="ses-from-email"
+                  type="email"
+                  value={awsSes.fromEmail}
+                  onChange={(e) =>
+                    setAwsSes({ ...awsSes, fromEmail: e.target.value })
+                  }
+                  placeholder="noreply@seudominio.com"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center justify-between border-t pt-4">
+          <div className="flex items-center gap-2">
+            <Switch id="email-active" defaultChecked />
+            <Label
+              htmlFor="email-active"
+              className="text-sm text-muted-foreground"
+            >
+              Envio de e-mails ativo
+            </Label>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setTestSent(true);
+                setTimeout(() => setTestSent(false), 3000);
+              }}
+            >
+              {testSent ? (
+                <>
+                  <CheckCircle2 className="mr-1 h-3.5 w-3.5 text-emerald-600" />
+                  Enviado
+                </>
+              ) : (
+                'Enviar teste'
+              )}
+            </Button>
+            <Button size="sm">Salvar</Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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