@hed-hog/core 0.0.386 → 0.0.390

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -48,11 +48,18 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { TableBodySkeleton } from '@/components/ui/skeletons';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tabs, TabsContent } from '@/components/ui/tabs';
+import { TabsOverflowList } from '@/components/ui/tabs-overflow-list';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Pencil, PlugZap, Trash2 } from 'lucide-react';
+import {
+  CircleAlert,
+  CircleCheck,
+  Pencil,
+  PlugZap,
+  Trash2,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
@@ -225,6 +232,22 @@ function TypeTab({
     return '—';
   };
 
+  /**
+   * Resultado do último "Testar conexão", gravado no config pelo backend. Os campos
+   * não são segredo, então sobrevivem ao mascaramento da listagem.
+   */
+  const getValidation = (
+    profile: IntegrationProfile
+  ): { state: 'ok' | 'error' | 'never'; at: string; error: string } => {
+    const config = (profile.config ?? {}) as Record<string, unknown>;
+    const status = String(config.last_validation_status ?? '');
+    return {
+      state: status === 'ok' ? 'ok' : status === 'error' ? 'error' : 'never',
+      at: String(config.last_validated_at ?? ''),
+      error: String(config.last_error ?? ''),
+    };
+  };
+
   return (
     <div className="space-y-4">
       <SearchBar
@@ -262,6 +285,7 @@ function TypeTab({
                     ? 'Configuração'
                     : 'Configuration'}
                 </TableHead>
+                <TableHead>{t('tableValidation')}</TableHead>
                 <TableHead>{t('tableStatus')}</TableHead>
                 <TableHead className="text-right">{t('tableUses')}</TableHead>
                 <TableHead>{t('tableUpdated')}</TableHead>
@@ -272,89 +296,138 @@ function TypeTab({
             </TableHeader>
             <TableBody>
               {isLoading ? (
-                <TableBodySkeleton rows={pageSize} columns={9} />
+                <TableBodySkeleton rows={pageSize} columns={10} />
               ) : (
                 profiles.map((profile) => (
-                <TableRow
-                  key={profile.id}
-                  className="cursor-pointer"
-                  onDoubleClick={() => onEdit(profile)}
-                >
-                  <TableCell>
-                    <Checkbox
-                      checked={selectedProfileIds.has(profile.id)}
-                      onCheckedChange={(checked) =>
-                        onToggleProfileSelection(profile.id, checked === true)
-                      }
-                      onClick={(event) => event.stopPropagation()}
-                      aria-label={t('selectProfile')}
-                    />
-                  </TableCell>
-                  <TableCell className="font-medium">{profile.name}</TableCell>
-                  <TableCell className="font-mono text-sm text-muted-foreground">
-                    {profile.slug}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary" className="gap-1.5">
-                      <IntegrationLogo
-                        provider={getProviderSlug(profile)}
-                        size={14}
-                        decorative
+                  <TableRow
+                    key={profile.id}
+                    className="cursor-pointer"
+                    onDoubleClick={() => onEdit(profile)}
+                  >
+                    <TableCell>
+                      <Checkbox
+                        checked={selectedProfileIds.has(profile.id)}
+                        onCheckedChange={(checked) =>
+                          onToggleProfileSelection(profile.id, checked === true)
+                        }
+                        onClick={(event) => event.stopPropagation()}
+                        aria-label={t('selectProfile')}
                       />
-                      {getProviderName(profile)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline">
-                      {getConfigurationLabel(profile)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={profile.is_active ? 'default' : 'outline'}>
-                      {profile.is_active
-                        ? t('statusActive')
-                        : t('statusInactive')}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {profile.uses_count > 0 ? (
-                      <Badge variant="secondary">{profile.uses_count}</Badge>
-                    ) : (
-                      <span className="text-muted-foreground">—</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {formatDate(
-                      profile.updated_at,
-                      getSettingValue,
-                      currentLocaleCode
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex justify-end gap-2">
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onEdit(profile);
-                        }}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDelete(profile.id);
-                        }}
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      {profile.name}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm text-muted-foreground">
+                      {profile.slug}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary" className="gap-1.5">
+                        <IntegrationLogo
+                          provider={getProviderSlug(profile)}
+                          size={14}
+                          decorative
+                        />
+                        {getProviderName(profile)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">
+                        {getConfigurationLabel(profile)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      {(() => {
+                        const validation = getValidation(profile);
+                        if (validation.state === 'never') {
+                          return (
+                            <span
+                              className="text-muted-foreground"
+                              title={t('validationNever')}
+                            >
+                              —
+                            </span>
+                          );
+                        }
+                        return (
+                          <Badge
+                            variant={
+                              validation.state === 'ok'
+                                ? 'secondary'
+                                : 'destructive'
+                            }
+                            className="gap-1.5"
+                            title={
+                              validation.state === 'error'
+                                ? validation.error
+                                : t('validationTooltipAt', {
+                                    date: formatDate(
+                                      validation.at,
+                                      getSettingValue,
+                                      currentLocaleCode
+                                    ),
+                                  })
+                            }
+                          >
+                            {validation.state === 'ok' ? (
+                              <CircleCheck className="h-3 w-3" />
+                            ) : (
+                              <CircleAlert className="h-3 w-3" />
+                            )}
+                            {validation.state === 'ok'
+                              ? t('validationOk')
+                              : t('validationError')}
+                          </Badge>
+                        );
+                      })()}
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant={profile.is_active ? 'default' : 'outline'}
                       >
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
+                        {profile.is_active
+                          ? t('statusActive')
+                          : t('statusInactive')}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {profile.uses_count > 0 ? (
+                        <Badge variant="secondary">{profile.uses_count}</Badge>
+                      ) : (
+                        <span className="text-muted-foreground">—</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(
+                        profile.updated_at,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onEdit(profile);
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete(profile.id);
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
                 ))
               )}
             </TableBody>
@@ -398,9 +471,7 @@ export default function IntegrationProfilesPage() {
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [profileToDelete, setProfileToDelete] = useState<number | null>(null);
-  const [editingProfileId, setEditingProfileId] = useState<number | null>(
-    null
-  );
+  const [editingProfileId, setEditingProfileId] = useState<number | null>(null);
   const [selectedProfileIds, setSelectedProfileIds] = useState<Set<number>>(
     new Set()
   );
@@ -657,7 +728,6 @@ export default function IntegrationProfilesPage() {
     }
   };
 
-
   return (
     <Page>
       <PageHeader
@@ -696,13 +766,20 @@ export default function IntegrationProfilesPage() {
       />
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          {types.map((ty) => (
-            <TabsTrigger key={ty.slug} value={ty.slug}>
-              {getLocaleName(ty.integration_type_locale, currentLocaleCode)}
-            </TabsTrigger>
-          ))}
-        </TabsList>
+        {/* Colapsa as abas que não cabem num dropdown "Mais": há muitos tipos de
+            integração e em telas estreitas os TabsTrigger crus encolhiam e se
+            sobrepunham. triggerClassName replica o padding do TabsTrigger nos
+            spans de medição invisíveis do TabsOverflowList. */}
+        <TabsOverflowList
+          items={types.map((ty) => ({
+            value: ty.slug,
+            label: getLocaleName(ty.integration_type_locale, currentLocaleCode),
+          }))}
+          activeValue={activeTab}
+          onValueChange={setActiveTab}
+          moreLabel={t('tabsMore')}
+          triggerClassName="min-h-8 px-3 text-sm font-medium"
+        />
 
         {types.map((ty) => (
           <TabsContent key={ty.slug} value={ty.slug} className="mt-4">

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