@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/mail/layout/page.tsx.ejs

@@ -0,0 +1,344 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { HtmlContentEditor } from '@/components/html-content-editor';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertCircle, Save } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type LayoutTranslation = {
+  name?: string;
+  header?: string;
+  footer?: string;
+};
+
+interface MailLayoutResponse {
+  id: number;
+  slug: string;
+  is_default: boolean;
+  wrapper: string;
+  locale: Record<string, LayoutTranslation>;
+}
+
+/** Tokens que o wrapper e os fragmentos aceitam. */
+const LAYOUT_TOKENS = [
+  '{{{content}}}',
+  '{{{header}}}',
+  '{{{footer}}}',
+  '{{subject}}',
+  '{{brandName}}',
+  '{{year}}',
+  '{{lang}}',
+];
+
+/** Tokens oferecidos no autocomplete do editor de código. */
+const EDITOR_VARIABLES = LAYOUT_TOKENS.map((label) => ({ label }));
+
+function hasContentToken(wrapper: string) {
+  return wrapper.includes('{{{content}}}') || wrapper.includes('{{content}}');
+}
+
+export default function MailLayoutPage() {
+  const { locales, request, currentLocaleCode } = useApp();
+  const t = useTranslations('core.MailLayoutPage');
+
+  const [layoutId, setLayoutId] = useState<number | null>(null);
+  const [wrapper, setWrapper] = useState('');
+  // Guarda TODOS os idiomas ao mesmo tempo: trocar de idioma nunca descarta
+  // edição não salva, e o PATCH envia o conjunto inteiro.
+  const [translations, setTranslations] = useState<
+    Record<string, LayoutTranslation>
+  >({});
+  const [selectedLocaleCode, setSelectedLocaleCode] =
+    useState<string>(currentLocaleCode);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [previewHtml, setPreviewHtml] = useState('');
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  const current = translations[selectedLocaleCode] || {};
+  const missingContentToken = !hasContentToken(wrapper);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoading(true);
+      try {
+        const list = await request<{ data?: MailLayoutResponse[] }>({
+          url: '/mail-layout',
+          params: { pageSize: 100 },
+        });
+
+        const rows = list.data?.data || [];
+        const target = rows.find((row) => row.is_default) || rows[0];
+
+        if (!target) {
+          toast.error(t('loadError'));
+          return;
+        }
+
+        // A listagem vem achatada em um único idioma; o detalhe traz o mapa
+        // completo de traduções que a tela precisa.
+        const detail = await request<MailLayoutResponse>({
+          url: `/mail-layout/${target.id}`,
+        });
+
+        if (cancelled) return;
+
+        setLayoutId(detail.data.id);
+        setWrapper(detail.data.wrapper || '');
+        setTranslations(detail.data.locale || {});
+      } catch (error) {
+        console.error('Error loading mail layout:', error);
+        if (!cancelled) toast.error(t('loadError'));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [request, t]);
+
+  // Preview do layout inteiro com um corpo de exemplo, enviando as alterações
+  // ainda não salvas para o servidor renderizar.
+  useEffect(() => {
+    if (loading || !wrapper.trim()) {
+      setPreviewHtml('');
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = setTimeout(async () => {
+      setPreviewLoading(true);
+      try {
+        const response = await request<{ html: string }>({
+          url: '/mail/preview',
+          method: 'POST',
+          params: { locale: selectedLocaleCode },
+          data: {
+            subject: t('sampleSubject'),
+            body: t('sampleBody'),
+            layout: {
+              wrapper,
+              header: current.header ?? '',
+              footer: current.footer ?? '',
+            },
+          },
+          signal: controller.signal,
+          showErrors: false,
+        });
+        setPreviewHtml(response.data?.html || '');
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error('Error rendering layout preview:', error);
+        }
+      } finally {
+        if (!controller.signal.aborted) setPreviewLoading(false);
+      }
+    }, 400);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [
+    loading,
+    wrapper,
+    current.header,
+    current.footer,
+    selectedLocaleCode,
+    request,
+    t,
+  ]);
+
+  const updateTranslation = useCallback(
+    (field: keyof LayoutTranslation, value: string) => {
+      setTranslations((prev) => ({
+        ...prev,
+        [selectedLocaleCode]: {
+          ...(prev[selectedLocaleCode] || {}),
+          [field]: value,
+        },
+      }));
+    },
+    [selectedLocaleCode]
+  );
+
+  const handleSave = useCallback(async () => {
+    if (layoutId === null) return;
+
+    if (missingContentToken) {
+      toast.error(t('missingContentTokenError'));
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await request({
+        url: `/mail-layout/${layoutId}`,
+        method: 'PATCH',
+        data: { wrapper, locale: translations },
+      });
+      toast.success(t('saveSuccess'));
+    } catch (error) {
+      console.error('Error saving mail layout:', error);
+      toast.error(t('saveError'));
+    } finally {
+      setSaving(false);
+    }
+  }, [layoutId, missingContentToken, request, t, translations, wrapper]);
+
+  const editorHeight = 'h-[calc(100vh-360px)]';
+
+  const tokenPanel = useMemo(
+    () => (
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs text-muted-foreground">{t('tokensHelp')}</span>
+        {LAYOUT_TOKENS.map((token) => (
+          <Badge key={token} variant="outline" className="font-mono text-xs">
+            {token}
+          </Badge>
+        ))}
+      </div>
+    ),
+    [t]
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbMail'), href: '/core/mail/template' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: saving ? t('saving') : t('save'),
+            onClick: handleSave,
+            icon: <Save className="h-4 w-4" />,
+            disabled: saving || loading || layoutId === null,
+          },
+        ]}
+      />
+
+      {loading ? (
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-[420px] w-full" />
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-end justify-between gap-4">
+            {tokenPanel}
+            <div className="space-y-1.5">
+              <Label htmlFor="layout-locale">{t('localeLabel')}</Label>
+              <Select
+                value={selectedLocaleCode}
+                onValueChange={setSelectedLocaleCode}
+              >
+                <SelectTrigger id="layout-locale" className="w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {locales.map((locale) => (
+                    <SelectItem key={locale.code} value={locale.code}>
+                      {locale.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <Tabs defaultValue="header" className="space-y-3">
+            <TabsList>
+              <TabsTrigger value="header">{t('tabHeader')}</TabsTrigger>
+              <TabsTrigger value="footer">{t('tabFooter')}</TabsTrigger>
+              <TabsTrigger value="wrapper">{t('tabWrapper')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="header" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('headerHelp')}
+              </p>
+              <HtmlContentEditor
+                key={`header-${selectedLocaleCode}`}
+                value={current.header ?? ''}
+                onChange={(value) => updateTranslation('header', value)}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+              />
+            </TabsContent>
+
+            <TabsContent value="footer" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('footerHelp')}
+              </p>
+              <HtmlContentEditor
+                key={`footer-${selectedLocaleCode}`}
+                value={current.footer ?? ''}
+                onChange={(value) => updateTranslation('footer', value)}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+              />
+            </TabsContent>
+
+            <TabsContent value="wrapper" className="mt-0">
+              <p className="mb-2 text-sm text-muted-foreground">
+                {t('wrapperHelp')}
+              </p>
+              {/* allowRichText desligado: o wrapper contém <style> e <head>, que
+                  o editor visual descartaria silenciosamente. */}
+              <HtmlContentEditor
+                value={wrapper}
+                onChange={setWrapper}
+                variables={EDITOR_VARIABLES}
+                previewHtml={previewHtml}
+                previewLoading={previewLoading}
+                allowRichText={false}
+                defaultTab="code"
+                zoomStorageKey="mail-layout-html-editor-zoom"
+                className={editorHeight}
+                warnings={
+                  missingContentToken ? (
+                    <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive">
+                      <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                      <span>{t('missingContentTokenError')}</span>
+                    </div>
+                  ) : null
+                }
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      )}
+    </Page>
+  );
+}

package/hedhog/frontend/app/mail/log/page.tsx.ejs

@@ -43,6 +43,7 @@ import {
   LayoutGrid,
   List,
   Mail,
+  MailWarning,
   TriangleAlert,
   User,
 } from 'lucide-react';
@@ -65,12 +66,34 @@ type MailSent = {
   cc?: string;
   bcc?: string;
   body: string;
+  provider_message_id?: string | null;
+  delivery_status?: MailDeliveryStatus | null;
+  delivery_updated_at?: string | null;
   created_at: string;
   updated_at: string;
   mail_sent_user?: MailSentRecipientLog[];
+  mail_delivery_event?: MailDeliveryEvent[];
   deliverySummary?: MailDeliverySummary;
 };
 
+/**
+ * Desfecho reportado pelo provedor. `null` significa que ele aceitou a mensagem
+ * e nao disse mais nada - que era o unico estado possivel antes do webhook de
+ * entrega existir.
+ */
+type MailDeliveryStatus = 'delivered' | 'bounced' | 'complained' | 'rejected';
+
+type MailDeliveryEvent = {
+  id: number;
+  recipient_email?: string | null;
+  event_type: string;
+  bounce_type?: string | null;
+  bounce_subtype?: string | null;
+  diagnostic_code?: string | null;
+  reporting_mta?: string | null;
+  occurred_at: string;
+};
+
 type MailSentRecipientLog = {
   id: number;
   recipient_email: string;
@@ -94,6 +117,13 @@ type MailDeliverySummary = {
 };
 
 type DeliveryStatusFilter = 'all' | 'received' | 'read' | 'error';
+type DeliveryOutcomeFilter =
+  | 'all'
+  | 'pending'
+  | 'delivered'
+  | 'bounced'
+  | 'complained'
+  | 'rejected';
 type HasErrorFilter = 'all' | 'true' | 'false';
 type ViewMode = 'cards' | 'table';
 
@@ -107,6 +137,8 @@ export default function MailLogPage() {
   const [recipientEmail, setRecipientEmail] = useState('');
   const [statusFilter, setStatusFilter] = useState<DeliveryStatusFilter>('all');
   const [hasErrorFilter, setHasErrorFilter] = useState<HasErrorFilter>('all');
+  const [deliveryFilter, setDeliveryFilter] =
+    useState<DeliveryOutcomeFilter>('all');
   const [createdAtFrom, setCreatedAtFrom] = useState('');
   const [createdAtTo, setCreatedAtTo] = useState('');
   const [viewMode, setViewMode] = useState<ViewMode>('cards');
@@ -162,6 +194,7 @@ export default function MailLogPage() {
       debouncedRecipientEmail,
       statusFilter,
       hasErrorFilter,
+      deliveryFilter,
       createdAtFrom,
       createdAtTo,
       page,
@@ -175,6 +208,7 @@ export default function MailLogPage() {
           recipientEmail: debouncedRecipientEmail || undefined,
           status: statusFilter !== 'all' ? statusFilter : undefined,
           hasError: hasErrorFilter !== 'all' ? hasErrorFilter : undefined,
+          deliveryStatus: deliveryFilter !== 'all' ? deliveryFilter : undefined,
           createdAtFrom: createdAtFrom || undefined,
           createdAtTo: createdAtTo || undefined,
           page,
@@ -252,6 +286,24 @@ export default function MailLogPage() {
           { value: 'false', label: t('errorNone') },
         ],
       },
+      {
+        id: 'delivery-status',
+        type: 'select',
+        value: deliveryFilter,
+        onChange: (value) => {
+          setDeliveryFilter(value as DeliveryOutcomeFilter);
+          setPage(1);
+        },
+        placeholder: t('filterByDelivery'),
+        options: [
+          { value: 'all', label: t('deliveryAll') },
+          { value: 'pending', label: t('deliveryPending') },
+          { value: 'delivered', label: t('deliveryDelivered') },
+          { value: 'bounced', label: t('deliveryBounced') },
+          { value: 'complained', label: t('deliveryComplained') },
+          { value: 'rejected', label: t('deliveryRejected') },
+        ],
+      },
       {
         id: 'created-at-from',
         type: 'date',
@@ -273,7 +325,7 @@ export default function MailLogPage() {
         min: createdAtFrom || undefined,
       },
     ],
-    [createdAtFrom, createdAtTo, hasErrorFilter, statusFilter, t]
+    [createdAtFrom, createdAtTo, deliveryFilter, hasErrorFilter, statusFilter, t]
   );
 
   const summary = useMemo(() => {
@@ -286,6 +338,15 @@ export default function MailLogPage() {
         if (deliverySummary?.hasError) {
           acc.emailsWithError += 1;
         }
+        // Aceito pelo provedor e devolvido depois: o caso que antes ficava
+        // invisivel, porque o envio constava como bem-sucedido.
+        if (
+          log.delivery_status === 'bounced' ||
+          log.delivery_status === 'complained' ||
+          log.delivery_status === 'rejected'
+        ) {
+          acc.undelivered += 1;
+        }
         return acc;
       },
       {
@@ -293,6 +354,7 @@ export default function MailLogPage() {
         readCount: 0,
         errorCount: 0,
         emailsWithError: 0,
+        undelivered: 0,
       }
     );
   }, [logs]);
@@ -305,6 +367,9 @@ export default function MailLogPage() {
         value: total,
         icon: Mail,
         layout: 'compact',
+        accentClassName: 'from-slate-500/25 via-slate-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-slate-500/10 text-slate-700 dark:text-slate-300',
       },
       {
         key: 'totalRecipients',
@@ -312,6 +377,8 @@ export default function MailLogPage() {
         value: summary.totalRecipients,
         icon: Inbox,
         layout: 'compact',
+        accentClassName: 'from-sky-500/25 via-sky-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-500/10 text-sky-700 dark:text-sky-400',
       },
       {
         key: 'readRecipients',
@@ -319,6 +386,19 @@ export default function MailLogPage() {
         value: summary.readCount,
         icon: Eye,
         layout: 'compact',
+        accentClassName: 'from-emerald-500/25 via-emerald-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+      },
+      {
+        key: 'undelivered',
+        title: t('undeliveredCurrentPage'),
+        value: summary.undelivered,
+        description: t('undeliveredHint'),
+        icon: MailWarning,
+        layout: 'compact',
+        accentClassName: 'from-rose-500/25 via-rose-500/10 to-transparent',
+        iconContainerClassName: 'bg-rose-500/10 text-rose-700 dark:text-rose-400',
       },
       {
         key: 'emailsWithError',
@@ -326,12 +406,16 @@ export default function MailLogPage() {
         value: summary.emailsWithError,
         icon: TriangleAlert,
         layout: 'compact',
+        accentClassName: 'from-amber-500/25 via-amber-500/10 to-transparent',
+        iconContainerClassName:
+          'bg-amber-500/10 text-amber-700 dark:text-amber-400',
       },
     ],
     [
       summary.emailsWithError,
       summary.readCount,
       summary.totalRecipients,
+      summary.undelivered,
       t,
       total,
     ]
@@ -344,6 +428,45 @@ export default function MailLogPage() {
       : text;
   };
 
+  /**
+   * Desfecho que o provedor reportou.
+   *
+   * Vem primeiro na coluna porque responde a pergunta que os contadores de
+   * leitura nao respondem: a mensagem chegou? Sem isto, "enviado" queria dizer
+   * apenas "o provedor aceitou".
+   */
+  const renderDeliveryStatus = (log: MailSent) => {
+    const status = log.delivery_status;
+
+    if (!status) {
+      return (
+        <Badge
+          variant="outline"
+          className="border-dashed text-muted-foreground"
+          title={t('deliveryPendingHint')}
+        >
+          {t('deliveryPending')}
+        </Badge>
+      );
+    }
+
+    const styles: Record<MailDeliveryStatus, string> = {
+      delivered:
+        'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+      bounced: 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-400',
+      complained:
+        'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400',
+      rejected:
+        'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-400',
+    };
+
+    return (
+      <Badge variant="outline" className={styles[status]}>
+        {t(`delivery${status.charAt(0).toUpperCase()}${status.slice(1)}` as never)}
+      </Badge>
+    );
+  };
+
   const renderDeliveryBadges = (deliverySummary?: MailDeliverySummary) => {
     if (!deliverySummary) {
       return <Badge variant="outline">{t('statusUnavailable')}</Badge>;
@@ -503,7 +626,10 @@ export default function MailLogPage() {
                       {log.to}
                     </TableCell>
                     <TableCell>
-                      {renderDeliveryBadges(log.deliverySummary)}
+                      <div className="flex flex-wrap items-center gap-2">
+                        {renderDeliveryStatus(log)}
+                        {renderDeliveryBadges(log.deliverySummary)}
+                      </div>
                     </TableCell>
                     <TableCell>
                       {formatDate(log.created_at, getSettingValue)}
@@ -564,7 +690,10 @@ export default function MailLogPage() {
                         </span>
                       </div>
                     </div>
-                    {renderDeliveryBadges(log.deliverySummary)}
+                    <div className="flex flex-wrap items-center gap-2">
+                      {renderDeliveryStatus(log)}
+                      {renderDeliveryBadges(log.deliverySummary)}
+                    </div>
                   </div>
                   <Button
                     variant="outline"
@@ -638,6 +767,18 @@ export default function MailLogPage() {
                     </p>
                   </div>
                 )}
+                {/* Chave para procurar a mensagem no console do provedor (SES,
+                    SMTP) e descobrir se houve entrega, bounce ou supressao. */}
+                {selectedLog.provider_message_id && (
+                  <div>
+                    <h4 className="mb-2 text-sm font-semibold">
+                      {t('providerMessageId')}
+                    </h4>
+                    <p className="break-all rounded-md bg-muted p-3 font-mono text-xs">
+                      {selectedLog.provider_message_id}
+                    </p>
+                  </div>
+                )}
                 <div>
                   <h4 className="mb-2 text-sm font-semibold">{t('body')}</h4>
                   <div
@@ -652,6 +793,7 @@ export default function MailLogPage() {
                   </h4>
                   <div className="rounded-md border p-3">
                     <div className="mb-3 flex flex-wrap gap-2">
+                      {renderDeliveryStatus(selectedLog)}
                       {renderDeliveryBadges(selectedLog.deliverySummary)}
                       <Badge variant="outline">
                         {t('totalRecipientsLabel', {
@@ -722,6 +864,71 @@ export default function MailLogPage() {
                   </div>
                 </div>
 
+                {/*
+                  O que o provedor disse depois de aceitar a mensagem. O bloco
+                  acima so cobre destinatario que e usuario da plataforma; para
+                  um solicitante externo, este e o unico rastro de entrega.
+                */}
+                <div>
+                  <h4 className="mb-2 text-sm font-semibold">
+                    {t('providerEvents')}
+                  </h4>
+                  {selectedLog.mail_delivery_event &&
+                  selectedLog.mail_delivery_event.length > 0 ? (
+                    <div className="space-y-2">
+                      {selectedLog.mail_delivery_event.map((event) => (
+                        <div
+                          key={event.id}
+                          className="rounded-md border border-border/60 p-3"
+                        >
+                          <div className="flex flex-wrap items-center justify-between gap-2">
+                            <div className="text-sm font-medium">
+                              {event.recipient_email ?? t('allRecipients')}
+                            </div>
+                            <div className="flex flex-wrap items-center gap-2">
+                              <Badge variant="outline" className="uppercase">
+                                {event.event_type}
+                              </Badge>
+                              <span className="text-xs text-muted-foreground">
+                                {formatDate(event.occurred_at, getSettingValue)}
+                              </span>
+                            </div>
+                          </div>
+
+                          {event.bounce_type ? (
+                            <p className="mt-2 text-xs text-muted-foreground">
+                              {event.bounce_type}
+                              {event.bounce_subtype
+                                ? ` / ${event.bounce_subtype}`
+                                : ''}
+                            </p>
+                          ) : null}
+
+                          {/*
+                            A resposta literal do servidor destinatario: e a
+                            unica coisa na tela que responde "por que nao chegou".
+                          */}
+                          {event.diagnostic_code ? (
+                            <p className="mt-2 break-all rounded-md bg-muted p-2 font-mono text-xs">
+                              {event.diagnostic_code}
+                            </p>
+                          ) : null}
+
+                          {event.reporting_mta ? (
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              {t('reportingMta')}: {event.reporting_mta}
+                            </p>
+                          ) : null}
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      {t('noProviderEvents')}
+                    </p>
+                  )}
+                </div>
+
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <h4 className="mb-2 text-sm font-semibold">