@hed-hog/core 0.0.297 → 0.0.298

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -9,437 +8,192 @@ import {
   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;
-}
+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';
 
-interface GmailConfig {
-  clientId: string;
-  clientSecret: string;
-  refreshToken: string;
-  fromName: string;
-  fromEmail: string;
-}
+const defaultMailConfigData: MailConfigWidgetData = {
+  status: {
+    isConfigured: false,
+    selectedProvider: null,
+    configuredProvider: null,
+  },
+  sender: {
+    from: null,
+  },
+  metrics: {
+    templateCount: 0,
+    sentCount: 0,
+    sentLast30Days: 0,
+  },
+  providers: [],
+};
 
-interface AwsSesConfig {
-  accessKeyId: string;
-  secretAccessKey: string;
-  region: string;
-  fromName: string;
-  fromEmail: string;
+interface MailConfigProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
 }
 
-const initialSmtp: SmtpConfig = {
-  host: 'smtp.empresa.com',
-  port: '587',
-  username: 'noreply@empresa.com',
-  password: '',
-  encryption: 'tls',
-  fromName: 'HeroAdmin',
-  fromEmail: 'noreply@empresa.com',
+const iconByProvider: Record<string, React.ElementType> = {
+  SMTP: Server,
+  GMAIL: Mail,
+  SES: Send,
 };
 
-const initialGmail: GmailConfig = {
-  clientId: '',
-  clientSecret: '',
-  refreshToken: '',
-  fromName: 'HeroAdmin',
-  fromEmail: '',
-};
+export default function MailConfig({ widget, onRemove }: MailConfigProps) {
+  const t = useTranslations('core.DashboardPage.mailConfig');
 
-const initialAwsSes: AwsSesConfig = {
-  accessKeyId: '',
-  secretAccessKey: '',
-  region: 'us-east-1',
-  fromName: 'HeroAdmin',
-  fromEmail: '',
-};
+  const { data, isLoading, isError, isAccessDenied } = useWidgetData<
+    DashboardCoreConfigOverviewData,
+    MailConfigWidgetData
+  >({
+    endpoint: '/dashboard-core/config/overview',
+    queryKey: 'dashboard-core-config-overview',
+    select: (d) => d.mailConfig,
+  });
 
-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);
+  const mailData = data ?? defaultMailConfigData;
 
   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"
-                />
+    <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 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>
+                <CardTitle className="text-base">{t('title')}</CardTitle>
+                <CardDescription>{t('description')}</CardDescription>
               </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>
+            <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="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 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="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 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>
-        )}
 
-        {/* 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 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>
-        )}
 
-        {/* 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 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">
-              <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>
-        )}
+              {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';
 
-        {/* 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
-                </>
+                  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>
+                  );
+                })
               ) : (
-                'Enviar teste'
+                <p className="text-xs text-muted-foreground">
+                  {t('noProviders')}
+                </p>
               )}
-            </Button>
-            <Button size="sm">Salvar</Button>
+            </div>
           </div>
-        </div>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
   );
 }