@hed-hog/core 0.0.350 → 0.0.353

package/hedhog/frontend/app/integrations-webhooks/page.tsx.ejs

@@ -21,6 +21,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { EntityPicker } from '@/components/ui/entity-picker';
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
@@ -51,11 +52,29 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
+import {
+  DndContext,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   Activity,
   BookOpenText,
+  ChevronRight,
   Clock3,
+  GripVertical,
   Pencil,
   Plus,
   RotateCcw,
@@ -64,9 +83,23 @@ import {
   Webhook,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { type ReactNode, useMemo, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { toast } from 'sonner';
 
+const RichTextEditor = dynamic(
+  () =>
+    import('@/components/rich-text-editor').then((mod) => ({
+      default: mod.RichTextEditor,
+    })),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="min-h-56 animate-pulse rounded-md bg-muted" />
+    ),
+  }
+);
+
 type Status = 'active' | 'inactive';
 
 type EventCatalog = {
@@ -98,6 +131,24 @@ type IncomingAction = {
   whatsapp_token?: string | null;
 };
 
+type IncomingActionForm = {
+  type: IncomingAction['type'];
+  name: string;
+  order: number;
+  status: Status;
+  mail_profile_id: number | null;
+  mail_id: number | null;
+  email_to: string;
+  email_cc: string;
+  email_bcc: string;
+  whatsapp_target_type: 'phone' | 'group';
+  whatsapp_target: string;
+  whatsapp_template: string;
+  whatsapp_instance: string;
+  whatsapp_base_url: string;
+  whatsapp_token: string;
+};
+
 type IncomingIntegration = {
   id: number;
   slug: string;
@@ -168,6 +219,69 @@ type SelectOption = {
   module?: string;
 };
 
+type MailProfileProvider = 'SMTP' | 'GMAIL' | 'SES';
+
+type MailProfileDetail = {
+  id: number;
+  slug: string;
+  name: string;
+  provider: MailProfileProvider;
+  from_name?: string | null;
+  from_email: string;
+  reply_to_name?: string | null;
+  reply_to_email?: string | null;
+  smtp_host?: string | null;
+  smtp_port?: number | null;
+  smtp_secure?: boolean;
+  smtp_username?: string | null;
+  smtp_password?: string | null;
+  gmail_client_id?: string | null;
+  gmail_client_secret?: string | null;
+  gmail_refresh_token?: string | null;
+  ses_access_key_id?: string | null;
+  ses_secret_access_key?: string | null;
+  ses_region?: string | null;
+};
+
+type MailTemplateDetail = {
+  id: number;
+  slug: string;
+  mail_id?: number;
+  subject?: string;
+  body?: string;
+  mail_var?: Array<{ name?: string }>;
+  locale?: { code: string };
+};
+
+const defaultMailProfileEditForm = {
+  slug: '',
+  name: '',
+  provider: 'SMTP' as MailProfileProvider,
+  from_name: '',
+  from_email: '',
+  reply_to_name: '',
+  reply_to_email: '',
+  smtp_host: '',
+  smtp_port: '587',
+  smtp_secure: true,
+  smtp_username: '',
+  smtp_password: '',
+  gmail_client_id: '',
+  gmail_client_secret: '',
+  gmail_refresh_token: '',
+  ses_access_key_id: '',
+  ses_secret_access_key: '',
+  ses_region: '',
+};
+
+const defaultMailTemplateEditForm = {
+  slug: '',
+  locale_code: 'en',
+  subject: '',
+  body: '',
+  variables: '',
+};
+
 type PaginatedResponse<T> = {
   data: T[];
   totalItems: number;
@@ -198,13 +312,13 @@ const defaultIncomingForm = {
   body_schema: '',
 };
 
-const defaultActionForm = {
+const defaultActionForm: IncomingActionForm = {
   type: 'email' as IncomingAction['type'],
   name: '',
   order: 0,
   status: 'active' as Status,
-  mail_profile_id: '',
-  mail_id: '',
+  mail_profile_id: null,
+  mail_id: null,
   email_to: '',
   email_cc: '',
   email_bcc: '',
@@ -260,6 +374,25 @@ function stringifyStringArray(values: string[]) {
   return filtered.length ? JSON.stringify(filtered, null, 2) : '';
 }
 
+function stringifyTemplateVars(value?: Array<{ name?: string }>) {
+  if (!Array.isArray(value) || value.length === 0) {
+    return '';
+  }
+
+  return value
+    .map((item) => item?.name?.trim())
+    .filter((name): name is string => Boolean(name))
+    .join('\n');
+}
+
+function parseTemplateVars(value: string) {
+  return value
+    .split('\n')
+    .map((item) => item.trim())
+    .filter(Boolean)
+    .map((name) => ({ name }));
+}
+
 function getPublicWebhookUrl(uuid: string, publicUrl?: string | null) {
   if (publicUrl) return publicUrl;
   const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';
@@ -268,7 +401,9 @@ function getPublicWebhookUrl(uuid: string, publicUrl?: string | null) {
 
 export default function IntegrationsWebhooksPage() {
   const t = useTranslations('core.IntegrationsWebhooksPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const { request, currentLocaleCode, getSettingValue, locales, accessToken } =
+    useApp();
+  const queryClient = useQueryClient();
   const pageSizeOptions = [6, 12, 24, 48] as const;
 
   const catalog = usePagination({
@@ -297,9 +432,34 @@ export default function IntegrationsWebhooksPage() {
   const [incomingSheetTab, setIncomingSheetTab] = useState('settings');
   const [oneTimeToken, setOneTimeToken] = useState<string | null>(null);
   const [allowedIpDraft, setAllowedIpDraft] = useState('');
-  const [actionForm, setActionForm] = useState(defaultActionForm);
+  const [incomingActions, setIncomingActions] = useState<IncomingAction[]>([]);
+  const [actionSheetOpen, setActionSheetOpen] = useState(false);
+  const [actionEdit, setActionEdit] = useState<IncomingAction | null>(null);
+  const [actionForm, setActionForm] =
+    useState<IncomingActionForm>(defaultActionForm);
+  const [mailProfileEditorOpen, setMailProfileEditorOpen] = useState(false);
+  const [mailProfileEditId, setMailProfileEditId] = useState<number | null>(
+    null
+  );
+  const [mailProfileEditForm, setMailProfileEditForm] = useState(
+    defaultMailProfileEditForm
+  );
+  const [mailProfileIsTesting, setMailProfileIsTesting] = useState(false);
+  const [mailProfileTestedSignature, setMailProfileTestedSignature] = useState<
+    string | null
+  >(null);
+  const [mailTemplateEditorOpen, setMailTemplateEditorOpen] = useState(false);
+  const [mailTemplateEditId, setMailTemplateEditId] = useState<number | null>(
+    null
+  );
+  const [mailTemplateEditForm, setMailTemplateEditForm] = useState(
+    defaultMailTemplateEditForm
+  );
   const [incomingLogsPage, setIncomingLogsPage] = useState(1);
   const [incomingLogsPageSize, setIncomingLogsPageSize] = useState(12);
+  const [logOrder, setLogOrder] = useState<'desc' | 'asc'>('desc');
+  const [selectedLog, setSelectedLog] = useState<IncomingCallLog | null>(null);
+  const sseAbortRef = useRef<AbortController | null>(null);
 
   const [eventWebhookOpen, setEventWebhookOpen] = useState(false);
   const [eventWebhookEdit, setEventWebhookEdit] = useState<EventWebhook | null>(
@@ -330,7 +490,9 @@ export default function IntegrationsWebhooksPage() {
     placeholderData: (previous) => previous ?? [],
   });
 
-  const { data: mailProfiles = [] } = useQuery<SelectOption[]>({
+  const { data: mailProfiles = [], refetch: refetchMailProfiles } = useQuery<
+    SelectOption[]
+  >({
     queryKey: ['webhook-mail-profiles', currentLocaleCode],
     queryFn: async () => {
       const response = await request<{ data: SelectOption[] }>({
@@ -342,7 +504,9 @@ export default function IntegrationsWebhooksPage() {
     placeholderData: (previous) => previous ?? [],
   });
 
-  const { data: mailTemplates = [] } = useQuery<SelectOption[]>({
+  const { data: mailTemplates = [], refetch: refetchMailTemplates } = useQuery<
+    SelectOption[]
+  >({
     queryKey: ['webhook-mail-templates', currentLocaleCode],
     queryFn: async () => {
       const response = await request<{ data: SelectOption[] }>({
@@ -361,6 +525,7 @@ export default function IntegrationsWebhooksPage() {
         incomingEdit?.id,
         incomingLogsPage,
         incomingLogsPageSize,
+        logOrder,
       ],
       queryFn: async () => {
         if (!incomingEdit?.id) {
@@ -373,7 +538,7 @@ export default function IntegrationsWebhooksPage() {
         }
 
         const response = await request<PaginatedResponse<IncomingCallLog>>({
-          url: `/webhook-integration/${incomingEdit.id}/log?page=${incomingLogsPage}&pageSize=${incomingLogsPageSize}`,
+          url: `/webhook-integration/${incomingEdit.id}/log?page=${incomingLogsPage}&pageSize=${incomingLogsPageSize}&sort=${logOrder}`,
           method: 'GET',
         });
 
@@ -395,6 +560,78 @@ export default function IntegrationsWebhooksPage() {
         },
     });
 
+  useEffect(() => {
+    if (!incomingEdit?.id || !incomingOpen || incomingSheetTab !== 'logs') {
+      sseAbortRef.current?.abort();
+      sseAbortRef.current = null;
+      return;
+    }
+
+    const controller = new AbortController();
+    sseAbortRef.current = controller;
+
+    const rawBase = process.env.NEXT_PUBLIC_API_BASE_URL || '/api';
+    const apiBase = rawBase.replace(/\/$/, '');
+    const url = `${apiBase}/webhook-integration/${incomingEdit.id}/log/stream`;
+
+    (async () => {
+      try {
+        const response = await fetch(url, {
+          method: 'GET',
+          headers: {
+            Accept: 'text/event-stream',
+            ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+          },
+          signal: controller.signal,
+        });
+
+        if (!response.ok || !response.body) return;
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const events = buffer.split('\n\n');
+          buffer = events.pop() ?? '';
+
+          for (const eventBlock of events) {
+            const dataLine = eventBlock
+              .split('\n')
+              .find((l) => l.startsWith('data:'));
+            if (!dataLine) continue;
+            try {
+              const payload = JSON.parse(dataLine.slice(5).trim());
+              if (payload?.type === 'log') {
+                queryClient.invalidateQueries({
+                  queryKey: ['incoming-webhook-logs', incomingEdit.id],
+                });
+              }
+            } catch {
+              // ignore malformed frames
+            }
+          }
+        }
+      } catch {
+        // connection closed or aborted — ignore
+      }
+    })();
+
+    return () => {
+      controller.abort();
+      sseAbortRef.current = null;
+    };
+  }, [
+    incomingEdit?.id,
+    incomingOpen,
+    incomingSheetTab,
+    accessToken,
+    queryClient,
+  ]);
+
   const stats = useMemo(
     () => [
       {
@@ -427,6 +664,11 @@ export default function IntegrationsWebhooksPage() {
   );
   const incomingLogItems = incomingLogsResult?.data || [];
   const incomingLogsTotalItems = incomingLogsResult?.totalItems || 0;
+  const actionSensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    })
+  );
 
   const openCatalogCreate = () => {
     setCatalogEdit(null);
@@ -474,9 +716,14 @@ export default function IntegrationsWebhooksPage() {
     setIncomingEdit(null);
     setIncomingSheetTab('settings');
     setIncomingLogsPage(1);
+    setLogOrder('desc');
+    setSelectedLog(null);
+    setIncomingActions([]);
     setIncomingForm(defaultIncomingForm);
     setOneTimeToken(null);
     setAllowedIpDraft('');
+    setActionEdit(null);
+    setActionSheetOpen(false);
     setActionForm(defaultActionForm);
     setIncomingOpen(true);
   };
@@ -500,13 +747,266 @@ export default function IntegrationsWebhooksPage() {
     if (data.plainToken) {
       setOneTimeToken(data.plainToken);
     }
+    setIncomingActions(
+      [...(data.webhook_action || [])].sort(
+        (a, b) => a.order - b.order || a.id - b.id
+      )
+    );
     setAllowedIpDraft('');
+    setActionEdit(null);
+    setActionSheetOpen(false);
     setActionForm(defaultActionForm);
     setIncomingSheetTab('settings');
     setIncomingLogsPage(1);
+    setLogOrder('desc');
+    setSelectedLog(null);
     setIncomingOpen(true);
   };
 
+  const openActionCreate = () => {
+    setActionEdit(null);
+    setActionForm({
+      ...defaultActionForm,
+      order: incomingActions.length,
+    });
+    setActionSheetOpen(true);
+  };
+
+  const openActionEdit = (action: IncomingAction) => {
+    setActionEdit(action);
+    setActionForm({
+      type: action.type,
+      name: action.name,
+      order: Number(action.order || 0),
+      status: action.status,
+      mail_profile_id: action.mail_profile_id ?? null,
+      mail_id: action.mail_id ?? null,
+      email_to: action.email_to || '',
+      email_cc: action.email_cc || '',
+      email_bcc: action.email_bcc || '',
+      whatsapp_target_type: action.whatsapp_target_type || 'phone',
+      whatsapp_target: action.whatsapp_target || '',
+      whatsapp_template: action.whatsapp_template || '',
+      whatsapp_instance: action.whatsapp_instance || '',
+      whatsapp_base_url: action.whatsapp_base_url || '',
+      whatsapp_token: action.whatsapp_token || '',
+    });
+    setActionSheetOpen(true);
+  };
+
+  const openMailProfileEditor = async (id: number) => {
+    try {
+      const response = await request<MailProfileDetail>({
+        url: `/mail-profile/${id}`,
+        method: 'GET',
+      });
+
+      const data = response.data;
+      setMailProfileEditId(data.id);
+      setMailProfileEditForm({
+        slug: data.slug || '',
+        name: data.name || '',
+        provider: data.provider || 'SMTP',
+        from_name: data.from_name || '',
+        from_email: data.from_email || '',
+        reply_to_name: data.reply_to_name || '',
+        reply_to_email: data.reply_to_email || '',
+        smtp_host: data.smtp_host || '',
+        smtp_port: data.smtp_port ? String(data.smtp_port) : '587',
+        smtp_secure: Boolean(data.smtp_secure),
+        smtp_username: data.smtp_username || '',
+        smtp_password: data.smtp_password || '',
+        gmail_client_id: data.gmail_client_id || '',
+        gmail_client_secret: data.gmail_client_secret || '',
+        gmail_refresh_token: data.gmail_refresh_token || '',
+        ses_access_key_id: data.ses_access_key_id || '',
+        ses_secret_access_key: data.ses_secret_access_key || '',
+        ses_region: data.ses_region || '',
+      });
+      setMailProfileTestedSignature(null);
+      setMailProfileEditorOpen(true);
+    } catch {
+      toast.error(t('loadError'));
+    }
+  };
+
+  const createMailProfilePayload = () => ({
+    slug: mailProfileEditForm.slug,
+    name: mailProfileEditForm.name,
+    provider: mailProfileEditForm.provider,
+    from_name: mailProfileEditForm.from_name || undefined,
+    from_email: mailProfileEditForm.from_email,
+    reply_to_name: mailProfileEditForm.reply_to_name || undefined,
+    reply_to_email: mailProfileEditForm.reply_to_email || undefined,
+    smtp_host: mailProfileEditForm.smtp_host || undefined,
+    smtp_port: mailProfileEditForm.smtp_port
+      ? Number(mailProfileEditForm.smtp_port)
+      : undefined,
+    smtp_secure: mailProfileEditForm.smtp_secure,
+    smtp_username: mailProfileEditForm.smtp_username || undefined,
+    smtp_password: mailProfileEditForm.smtp_password || undefined,
+    gmail_client_id: mailProfileEditForm.gmail_client_id || undefined,
+    gmail_client_secret: mailProfileEditForm.gmail_client_secret || undefined,
+    gmail_refresh_token: mailProfileEditForm.gmail_refresh_token || undefined,
+    ses_access_key_id: mailProfileEditForm.ses_access_key_id || undefined,
+    ses_secret_access_key:
+      mailProfileEditForm.ses_secret_access_key || undefined,
+    ses_region: mailProfileEditForm.ses_region || undefined,
+  });
+
+  const currentMailProfileSignature = JSON.stringify(
+    createMailProfilePayload()
+  );
+  const canSubmitMailProfile =
+    mailProfileTestedSignature === currentMailProfileSignature;
+
+  const handleTestMailProfile = async () => {
+    const payload = createMailProfilePayload();
+
+    try {
+      setMailProfileIsTesting(true);
+      const { data } = await request<{ success: boolean; destination: string }>(
+        {
+          url: '/mail-profile/test',
+          method: 'POST',
+          data: payload,
+        }
+      );
+
+      setMailProfileTestedSignature(JSON.stringify(payload));
+      toast.success(
+        data.destination || payload.from_email
+          ? `Perfil testado com sucesso para ${data.destination || payload.from_email}`
+          : 'Perfil testado com sucesso.'
+      );
+    } catch (error) {
+      console.error('Error testing mail profile:', error);
+      setMailProfileTestedSignature(null);
+      toast.error('Erro ao testar o perfil de e-mail.');
+    } finally {
+      setMailProfileIsTesting(false);
+    }
+  };
+
+  const saveMailProfileEditor = async () => {
+    if (!mailProfileEditId) return;
+
+    try {
+      await request({
+        url: `/mail-profile/${mailProfileEditId}`,
+        method: 'PATCH',
+        data: {
+          slug: mailProfileEditForm.slug,
+          name: mailProfileEditForm.name,
+          provider: mailProfileEditForm.provider,
+          from_name: mailProfileEditForm.from_name || undefined,
+          from_email: mailProfileEditForm.from_email,
+          reply_to_name: mailProfileEditForm.reply_to_name || undefined,
+          reply_to_email: mailProfileEditForm.reply_to_email || undefined,
+          smtp_host: mailProfileEditForm.smtp_host || undefined,
+          smtp_port: mailProfileEditForm.smtp_port
+            ? Number(mailProfileEditForm.smtp_port)
+            : undefined,
+          smtp_secure: mailProfileEditForm.smtp_secure,
+          smtp_username: mailProfileEditForm.smtp_username || undefined,
+          smtp_password: mailProfileEditForm.smtp_password || undefined,
+          gmail_client_id: mailProfileEditForm.gmail_client_id || undefined,
+          gmail_client_secret:
+            mailProfileEditForm.gmail_client_secret || undefined,
+          gmail_refresh_token:
+            mailProfileEditForm.gmail_refresh_token || undefined,
+          ses_access_key_id: mailProfileEditForm.ses_access_key_id || undefined,
+          ses_secret_access_key:
+            mailProfileEditForm.ses_secret_access_key || undefined,
+          ses_region: mailProfileEditForm.ses_region || undefined,
+        },
+      });
+
+      await refetchMailProfiles();
+      toast.success(t('updated'));
+      setMailProfileTestedSignature(null);
+      setMailProfileEditorOpen(false);
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
+  const openMailTemplateEditor = async (id: number) => {
+    const defaultLocale = locales?.[0]?.code || 'en';
+    try {
+      const response = await request<MailTemplateDetail>({
+        url: `/mail/${id}?locale=${defaultLocale}`,
+        method: 'GET',
+      });
+
+      const data = response.data;
+      setMailTemplateEditId(data.mail_id || data.id);
+      setMailTemplateEditForm({
+        slug: data.slug || '',
+        locale_code: data.locale?.code || defaultLocale,
+        subject: data.subject || '',
+        body: data.body || '',
+        variables: stringifyTemplateVars(data.mail_var),
+      });
+      setMailTemplateEditorOpen(true);
+    } catch {
+      toast.error(t('loadError'));
+    }
+  };
+
+  const loadMailTemplateLocale = async (localeCode: string) => {
+    if (!mailTemplateEditId) return;
+
+    try {
+      const response = await request<MailTemplateDetail>({
+        url: `/mail/${mailTemplateEditId}?locale=${localeCode}`,
+        method: 'GET',
+      });
+
+      const data = response.data;
+      setMailTemplateEditForm((current) => ({
+        ...current,
+        locale_code: localeCode,
+        subject: data.subject || '',
+        body: data.body || '',
+        variables: stringifyTemplateVars(data.mail_var),
+      }));
+    } catch {
+      toast.error(t('loadError'));
+    }
+  };
+
+  const saveMailTemplateEditor = async () => {
+    if (!mailTemplateEditId) return;
+
+    try {
+      await request({
+        url: `/mail/${mailTemplateEditId}`,
+        method: 'PATCH',
+        data: {
+          slug: mailTemplateEditForm.slug,
+          mail_locale: [
+            {
+              locale_id:
+                locales.findIndex(
+                  (locale) => locale.code === mailTemplateEditForm.locale_code
+                ) + 1 || 1,
+              subject: mailTemplateEditForm.subject,
+              body: mailTemplateEditForm.body,
+            },
+          ],
+          mail_var: parseTemplateVars(mailTemplateEditForm.variables),
+        },
+      });
+
+      await refetchMailTemplates();
+      toast.success(t('updated'));
+      setMailTemplateEditorOpen(false);
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
   const setAllowedIpList = (items: string[]) => {
     setIncomingForm((current) => ({
       ...current,
@@ -573,18 +1073,74 @@ export default function IntegrationsWebhooksPage() {
   const saveAction = async () => {
     if (!incomingEdit) return;
 
+    const missingFields: string[] = [];
+
+    if (actionForm.type === 'email') {
+      if (actionForm.mail_profile_id == null)
+        missingFields.push('mail_profile_id');
+      if (actionForm.mail_id == null) missingFields.push('mail_id');
+      if (!actionForm.email_to.trim()) missingFields.push('email_to');
+    }
+
+    if (actionForm.type === 'whatsapp_evolution') {
+      if (!actionForm.whatsapp_target.trim()) {
+        missingFields.push('whatsapp_target');
+      }
+      if (!actionForm.whatsapp_template.trim()) {
+        missingFields.push('whatsapp_template');
+      }
+      if (!actionForm.whatsapp_instance.trim()) {
+        missingFields.push('whatsapp_instance');
+      }
+      if (!actionForm.whatsapp_base_url.trim()) {
+        missingFields.push('whatsapp_base_url');
+      }
+      if (!actionForm.whatsapp_token.trim()) {
+        missingFields.push('whatsapp_token');
+      }
+    }
+
+    if (missingFields.length) {
+      toast.error(
+        `Preencha os campos obrigatorios da acao: ${missingFields.join(', ')}`
+      );
+      return;
+    }
+
     try {
-      await request({
-        url: `/webhook-integration/${incomingEdit.id}/action`,
-        method: 'POST',
-        data: {
-          ...actionForm,
-          order: Number(actionForm.order || 0),
-          mail_profile_id: actionForm.mail_profile_id || null,
-          mail_id: actionForm.mail_id || null,
-        },
-      });
-      toast.success(t('created'));
+      const payload = {
+        ...actionForm,
+        order: Number(actionForm.order || 0),
+        mail_profile_id: actionForm.mail_profile_id,
+        mail_id: actionForm.mail_id,
+        email_to: actionForm.email_to.trim(),
+        email_cc: actionForm.email_cc.trim(),
+        email_bcc: actionForm.email_bcc.trim(),
+        whatsapp_target: actionForm.whatsapp_target.trim(),
+        whatsapp_template: actionForm.whatsapp_template.trim(),
+        whatsapp_instance: actionForm.whatsapp_instance.trim(),
+        whatsapp_base_url: actionForm.whatsapp_base_url.trim(),
+        whatsapp_token: actionForm.whatsapp_token.trim(),
+      };
+
+      if (actionEdit) {
+        await request({
+          url: `/webhook-integration/${incomingEdit.id}/action/${actionEdit.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('updated'));
+      } else {
+        await request({
+          url: `/webhook-integration/${incomingEdit.id}/action`,
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('created'));
+      }
+
+      setActionEdit(null);
+      setActionSheetOpen(false);
       setActionForm(defaultActionForm);
       await openIncomingEdit(incomingEdit);
       await incoming.refetch();
@@ -593,6 +1149,53 @@ export default function IntegrationsWebhooksPage() {
     }
   };
 
+  const handleIncomingActionDragEnd = async ({
+    active,
+    over,
+  }: DragEndEvent) => {
+    if (!incomingEdit || !over || active.id === over.id) {
+      return;
+    }
+
+    const current = [...incomingActions];
+    const oldIndex = current.findIndex(
+      (item) => String(item.id) === String(active.id)
+    );
+    const newIndex = current.findIndex(
+      (item) => String(item.id) === String(over.id)
+    );
+
+    if (oldIndex < 0 || newIndex < 0) {
+      return;
+    }
+
+    const reordered = arrayMove(current, oldIndex, newIndex).map(
+      (item, index) => ({
+        ...item,
+        order: index,
+      })
+    );
+
+    setIncomingActions(reordered);
+
+    try {
+      await Promise.all(
+        reordered.map((item, index) =>
+          request({
+            url: `/webhook-integration/${incomingEdit.id}/action/${item.id}`,
+            method: 'PATCH',
+            data: { order: index },
+          })
+        )
+      );
+      await openIncomingEdit(incomingEdit);
+      await incoming.refetch();
+    } catch {
+      setIncomingActions(current);
+      toast.error(t('saveError'));
+    }
+  };
+
   const regenerateUuid = async () => {
     if (!incomingEdit) return;
     const response = await request<IncomingIntegration>({
@@ -1172,6 +1775,10 @@ export default function IntegrationsWebhooksPage() {
             setOneTimeToken(null);
             setIncomingSheetTab('settings');
             setIncomingLogsPage(1);
+            setLogOrder('desc');
+            setSelectedLog(null);
+            setActionEdit(null);
+            setActionSheetOpen(false);
           }
         }}
       >
@@ -1188,7 +1795,7 @@ export default function IntegrationsWebhooksPage() {
             className="mt-4"
           >
             <div className="px-3 sm:px-4">
-              <TabsList className="grid w-full grid-cols-2">
+              <TabsList className="grid w-full grid-cols-3">
                 <TabsTrigger value="settings">
                   <Webhook className="mr-2 h-4 w-4" />
                   {t('incomingSheetTabSettings')}
@@ -1197,6 +1804,10 @@ export default function IntegrationsWebhooksPage() {
                   <Clock3 className="mr-2 h-4 w-4" />
                   {t('incomingSheetTabLogs')}
                 </TabsTrigger>
+                <TabsTrigger value="actions" disabled={!incomingEdit}>
+                  <Activity className="mr-2 h-4 w-4" />
+                  {t('actionSection')}
+                </TabsTrigger>
               </TabsList>
             </div>
             <TabsContent value="settings" className="mt-0">
@@ -1436,223 +2047,41 @@ export default function IntegrationsWebhooksPage() {
                   onCancel={() => setIncomingOpen(false)}
                   t={t}
                 />
+              </div>
+            </TabsContent>
 
-                {incomingEdit && (
-                  <div className="space-y-4 border-t pt-5">
-                    <div className="flex items-center gap-2">
-                      <Activity className="h-4 w-4" />
-                      <h3 className="text-sm font-semibold">
-                        {t('actionSection')}
-                      </h3>
-                    </div>
-                    <div className="grid gap-3 md:grid-cols-3">
-                      <Field label={t('actionType')}>
-                        <Select
-                          value={actionForm.type}
-                          onValueChange={(value: IncomingAction['type']) =>
-                            setActionForm({ ...actionForm, type: value })
-                          }
-                        >
-                          <SelectTrigger className="w-full">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="email">{t('email')}</SelectItem>
-                            <SelectItem value="whatsapp_evolution">
-                              {t('whatsapp')}
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </Field>
-                      <Field label={t('name')}>
-                        <Input
-                          value={actionForm.name}
-                          onChange={(event) =>
-                            setActionForm({
-                              ...actionForm,
-                              name: event.target.value,
-                            })
-                          }
-                        />
-                      </Field>
-                      <Field label={t('order')}>
-                        <Input
-                          type="number"
-                          value={actionForm.order}
-                          onChange={(event) =>
-                            setActionForm({
-                              ...actionForm,
-                              order: Number(event.target.value),
-                            })
-                          }
-                        />
-                      </Field>
-                    </div>
-                    {actionForm.type === 'email' ? (
-                      <div className="grid gap-3 md:grid-cols-2">
-                        <Field label={t('mailProfile')}>
-                          <Select
-                            value={actionForm.mail_profile_id}
-                            onValueChange={(value) =>
-                              setActionForm({
-                                ...actionForm,
-                                mail_profile_id: value,
-                              })
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder={t('select')} />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {mailProfiles.map((profile) => (
-                                <SelectItem
-                                  key={profile.id}
-                                  value={String(profile.id)}
-                                >
-                                  {profile.name || profile.slug}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </Field>
-                        <Field label={t('mailTemplate')}>
-                          <Select
-                            value={actionForm.mail_id}
-                            onValueChange={(value) =>
-                              setActionForm({ ...actionForm, mail_id: value })
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue placeholder={t('select')} />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {mailTemplates.map((template) => (
-                                <SelectItem
-                                  key={template.id}
-                                  value={String(template.id)}
-                                >
-                                  {template.slug}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </Field>
-                        <Field label={t('emailTo')}>
-                          <Input
-                            value={actionForm.email_to}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                email_to: event.target.value,
-                              })
-                            }
-                            placeholder="{{email}}"
-                          />
-                        </Field>
-                        <Field label={t('emailCc')}>
-                          <Input
-                            value={actionForm.email_cc}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                email_cc: event.target.value,
-                              })
-                            }
-                          />
-                        </Field>
-                      </div>
-                    ) : (
-                      <div className="grid gap-3 md:grid-cols-2">
-                        <Field label={t('whatsappTargetType')}>
-                          <Select
-                            value={actionForm.whatsapp_target_type}
-                            onValueChange={(value) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_target_type: value,
-                              })
-                            }
-                          >
-                            <SelectTrigger className="w-full">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="phone">
-                                {t('phone')}
-                              </SelectItem>
-                              <SelectItem value="group">
-                                {t('group')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </Field>
-                        <Field label={t('whatsappTarget')}>
-                          <Input
-                            value={actionForm.whatsapp_target}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_target: event.target.value,
-                              })
-                            }
-                            placeholder="{{phone}}"
-                          />
-                        </Field>
-                        <Field label={t('whatsappInstance')}>
-                          <Input
-                            value={actionForm.whatsapp_instance}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_instance: event.target.value,
-                              })
-                            }
-                          />
-                        </Field>
-                        <Field label={t('whatsappBaseUrl')}>
-                          <Input
-                            value={actionForm.whatsapp_base_url}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_base_url: event.target.value,
-                              })
-                            }
-                          />
-                        </Field>
-                        <Field label={t('whatsappToken')}>
-                          <Input
-                            type="password"
-                            value={actionForm.whatsapp_token}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_token: event.target.value,
-                              })
-                            }
-                          />
-                        </Field>
-                        <Field label={t('whatsappTemplate')}>
-                          <Textarea
-                            value={actionForm.whatsapp_template}
-                            onChange={(event) =>
-                              setActionForm({
-                                ...actionForm,
-                                whatsapp_template: event.target.value,
-                              })
-                            }
-                            placeholder="Olá {{name}}"
-                          />
-                        </Field>
-                      </div>
-                    )}
-                    <div className="flex justify-end">
-                      <Button onClick={saveAction}>{t('addAction')}</Button>
-                    </div>
-                    <div className="rounded-md border">
+            <TabsContent
+              value="actions"
+              className="mt-0 space-y-4 px-3 pb-8 sm:px-4"
+            >
+              {!incomingEdit ? (
+                <EmptyState
+                  icon={<Activity className="h-12 w-12" />}
+                  title={t('actionSection')}
+                  description={t('emptyIncomingDescription')}
+                />
+              ) : (
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between gap-3">
+                    <p className="text-sm text-muted-foreground">
+                      {t('actionsCount')}: {incomingActions.length}
+                    </p>
+                    <Button onClick={openActionCreate}>
+                      <Plus className="mr-2 h-4 w-4" />
+                      {t('addAction')}
+                    </Button>
+                  </div>
+
+                  <div className="rounded-md border">
+                    <DndContext
+                      sensors={actionSensors}
+                      collisionDetection={closestCenter}
+                      onDragEnd={handleIncomingActionDragEnd}
+                    >
                       <Table>
                         <TableHeader>
                           <TableRow>
+                            <TableHead className="w-8" />
                             <TableHead>{t('name')}</TableHead>
                             <TableHead>{t('actionType')}</TableHead>
                             <TableHead>{t('order')}</TableHead>
@@ -1661,23 +2090,28 @@ export default function IntegrationsWebhooksPage() {
                             </TableHead>
                           </TableRow>
                         </TableHeader>
-                        <TableBody>
-                          {incomingEdit.webhook_action?.map((action) => (
-                            <TableRow key={action.id}>
-                              <TableCell>{action.name}</TableCell>
-                              <TableCell>
-                                <Badge variant="secondary">
-                                  {action.type === 'email'
-                                    ? t('email')
-                                    : t('whatsapp')}
-                                </Badge>
-                              </TableCell>
-                              <TableCell>{action.order}</TableCell>
-                              <TableCell className="text-right">
-                                <Button
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={() =>
+                        <SortableContext
+                          items={incomingActions.map((action) => action.id)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          <TableBody>
+                            {incomingActions.length === 0 ? (
+                              <TableRow>
+                                <TableCell
+                                  colSpan={5}
+                                  className="h-16 text-center text-sm text-muted-foreground"
+                                >
+                                  {t('emptyIncomingDescription')}
+                                </TableCell>
+                              </TableRow>
+                            ) : (
+                              incomingActions.map((action) => (
+                                <SortableIncomingActionRow
+                                  key={action.id}
+                                  action={action}
+                                  t={t}
+                                  onEdit={openActionEdit}
+                                  onDelete={() =>
                                     setDeleteTarget({
                                       kind: 'action',
                                       id: action.id,
@@ -1685,18 +2119,16 @@ export default function IntegrationsWebhooksPage() {
                                       name: action.name,
                                     })
                                   }
-                                >
-                                  <Trash2 className="h-4 w-4 text-destructive" />
-                                </Button>
-                              </TableCell>
-                            </TableRow>
-                          ))}
-                        </TableBody>
+                                />
+                              ))
+                            )}
+                          </TableBody>
+                        </SortableContext>
                       </Table>
-                    </div>
+                    </DndContext>
                   </div>
-                )}
-              </div>
+                </div>
+              )}
             </TabsContent>
 
             <TabsContent
@@ -1716,102 +2148,98 @@ export default function IntegrationsWebhooksPage() {
                   description={t('emptyIncomingLogsDescription')}
                 />
               ) : (
-                <div className="space-y-4">
-                  {incomingLogItems.map((log) => (
-                    <div key={log.id} className="rounded-md border p-4">
-                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                        <div className="flex items-center gap-2">
-                          <Badge
-                            variant="outline"
-                            className={
-                              log.status === 'success'
-                                ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                                : 'border-red-500/20 bg-red-500/10 text-red-600'
-                            }
-                          >
-                            {log.status === 'success'
-                              ? t('logStatusSuccess')
-                              : t('logStatusFailed')}
-                          </Badge>
-                          <span className="text-xs text-muted-foreground">
-                            {formatDate(
-                              log.created_at,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </span>
-                        </div>
-                        <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
-                          <span>
-                            {t('logDuration')}: {log.duration_ms}ms
-                          </span>
-                          <span>
-                            {t('logRemoteIp')}: {log.remote_ip || '-'}
-                          </span>
-                        </div>
-                      </div>
-
-                      {log.error_message ? (
-                        <p className="mt-3 text-xs text-destructive">
-                          {log.error_message}
-                        </p>
-                      ) : null}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-end">
+                    <Select
+                      value={logOrder}
+                      onValueChange={(v: 'desc' | 'asc') => {
+                        setLogOrder(v);
+                        setIncomingLogsPage(1);
+                      }}
+                    >
+                      <SelectTrigger className="w-52">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="desc">
+                          {t('logOrderDesc')}
+                        </SelectItem>
+                        <SelectItem value="asc">{t('logOrderAsc')}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
 
-                      {log.webhook_action_log?.length ? (
-                        <div className="mt-4 rounded-md border">
-                          <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead>{t('actionType')}</TableHead>
-                                <TableHead>{t('name')}</TableHead>
-                                <TableHead>{t('status')}</TableHead>
-                                <TableHead>{t('logDuration')}</TableHead>
-                                <TableHead>{t('logResponse')}</TableHead>
-                              </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                              {log.webhook_action_log.map((actionLog) => (
-                                <TableRow key={actionLog.id}>
-                                  <TableCell>
-                                    {actionLog.action_type === 'email'
-                                      ? t('email')
-                                      : t('whatsapp')}
-                                  </TableCell>
-                                  <TableCell>{actionLog.action_name}</TableCell>
-                                  <TableCell>
-                                    <Badge
-                                      variant="outline"
-                                      className={
-                                        actionLog.status === 'success'
-                                          ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                                          : 'border-red-500/20 bg-red-500/10 text-red-600'
-                                      }
-                                    >
-                                      {actionLog.status === 'success'
-                                        ? t('logStatusSuccess')
-                                        : t('logStatusFailed')}
-                                    </Badge>
-                                  </TableCell>
-                                  <TableCell>
-                                    {actionLog.duration_ms}ms
-                                  </TableCell>
-                                  <TableCell>
-                                    <div className="max-h-24 overflow-auto rounded border bg-muted/30 p-2 font-mono text-xs">
-                                      {actionLog.error_message ||
-                                        stringifyJson(
-                                          actionLog.response_payload
-                                        ) ||
-                                        '-'}
-                                    </div>
-                                  </TableCell>
-                                </TableRow>
-                              ))}
-                            </TableBody>
-                          </Table>
-                        </div>
-                      ) : null}
-                    </div>
-                  ))}
+                  <div className="rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead className="w-28">{t('status')}</TableHead>
+                          <TableHead>{t('logDate')}</TableHead>
+                          <TableHead className="hidden sm:table-cell">
+                            {t('logRemoteIp')}
+                          </TableHead>
+                          <TableHead className="w-24 text-right">
+                            {t('logDuration')}
+                          </TableHead>
+                          <TableHead className="w-16 text-center">
+                            {t('actions')}
+                          </TableHead>
+                          <TableHead className="w-8" />
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {incomingLogItems.map((log) => (
+                          <TableRow
+                            key={log.id}
+                            className="cursor-pointer"
+                            onClick={() => setSelectedLog(log)}
+                          >
+                            <TableCell>
+                              <Badge
+                                variant="outline"
+                                className={
+                                  log.status === 'success'
+                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
+                                }
+                              >
+                                {log.status === 'success'
+                                  ? t('logStatusSuccess')
+                                  : t('logStatusFailed')}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-sm text-muted-foreground">
+                              {formatDate(
+                                log.created_at,
+                                getSettingValue,
+                                currentLocaleCode
+                              )}
+                            </TableCell>
+                            <TableCell className="hidden text-xs text-muted-foreground sm:table-cell">
+                              {log.remote_ip || '-'}
+                            </TableCell>
+                            <TableCell className="text-right text-xs text-muted-foreground">
+                              {log.duration_ms}ms
+                            </TableCell>
+                            <TableCell className="text-center">
+                              {log.webhook_action_log?.length ? (
+                                <Badge variant="secondary" className="text-xs">
+                                  {log.webhook_action_log.length}
+                                </Badge>
+                              ) : (
+                                <span className="text-xs text-muted-foreground">
+                                  —
+                                </span>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
                 </div>
               )}
 
@@ -1833,6 +2261,406 @@ export default function IntegrationsWebhooksPage() {
               ) : null}
             </TabsContent>
           </Tabs>
+
+          <Sheet
+            open={actionSheetOpen}
+            onOpenChange={(open) => {
+              setActionSheetOpen(open);
+              if (!open) {
+                setActionEdit(null);
+                setActionForm(defaultActionForm);
+              }
+            }}
+          >
+            <SheetContent
+              side="right"
+              className="w-full overflow-y-auto sm:max-w-3xl"
+            >
+              <SheetHeader>
+                <SheetTitle>
+                  {actionEdit ? t('updated') : t('addAction')}
+                </SheetTitle>
+                <SheetDescription>{t('actionSection')}</SheetDescription>
+              </SheetHeader>
+              <div className="space-y-5 px-3 pb-8 sm:px-4">
+                <div className="grid gap-3 md:grid-cols-3">
+                  <Field label={t('actionType')}>
+                    <Select
+                      value={actionForm.type}
+                      onValueChange={(value: IncomingAction['type']) =>
+                        setActionForm({ ...actionForm, type: value })
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="email">{t('email')}</SelectItem>
+                        <SelectItem value="whatsapp_evolution">
+                          {t('whatsapp')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </Field>
+                  <Field label={t('name')}>
+                    <Input
+                      value={actionForm.name}
+                      onChange={(event) =>
+                        setActionForm({
+                          ...actionForm,
+                          name: event.target.value,
+                        })
+                      }
+                    />
+                  </Field>
+                  <Field label={t('order')}>
+                    <Input
+                      type="number"
+                      value={actionForm.order}
+                      onChange={(event) =>
+                        setActionForm({
+                          ...actionForm,
+                          order: Number(event.target.value),
+                        })
+                      }
+                    />
+                  </Field>
+                </div>
+
+                {actionForm.type === 'email' ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <Field label={t('mailProfile')}>
+                      <div className="flex items-start gap-2">
+                        <EntityPicker<SelectOption>
+                          value={actionForm.mail_profile_id}
+                          className="w-full"
+                          valueType="number"
+                          placeholder={t('select')}
+                          entityLabel={t('mailProfile')}
+                          options={mailProfiles}
+                          loadOptions={async ({ page, pageSize, search }) => {
+                            const response = await request<{
+                              data: SelectOption[];
+                            }>({
+                              url: `/mail-profile?page=${page}&pageSize=${pageSize}&search=${encodeURIComponent(search)}`,
+                              method: 'GET',
+                            });
+
+                            return {
+                              items: response.data?.data || [],
+                              hasMore: false,
+                            };
+                          }}
+                          getOptionValue={(option) => option.id}
+                          getOptionLabel={(option) =>
+                            option.name || option.slug
+                          }
+                          getOptionDescription={(option) =>
+                            option.provider || option.slug
+                          }
+                          createFields={[
+                            {
+                              name: 'slug',
+                              label: 'Slug',
+                              required: true,
+                            },
+                            {
+                              name: 'name',
+                              label: t('name'),
+                              required: true,
+                            },
+                            {
+                              name: 'from_email',
+                              label: 'From e-mail',
+                              type: 'email',
+                              required: true,
+                            },
+                            {
+                              name: 'smtp_host',
+                              label: 'SMTP host',
+                              required: true,
+                            },
+                            {
+                              name: 'smtp_port',
+                              label: 'SMTP port',
+                              type: 'number',
+                              defaultValue: '587',
+                              required: true,
+                            },
+                            {
+                              name: 'smtp_username',
+                              label: 'SMTP username',
+                              required: true,
+                            },
+                            {
+                              name: 'smtp_password',
+                              label: 'SMTP password',
+                              type: 'password',
+                              required: true,
+                            },
+                          ]}
+                          createTitle="Criar perfil de e-mail"
+                          createDescription="Crie rapidamente um perfil SMTP para usar nesta ação."
+                          onCreate={async (values) => {
+                            const response = await request<SelectOption>({
+                              url: '/mail-profile',
+                              method: 'POST',
+                              data: {
+                                slug: values.slug,
+                                name: values.name,
+                                provider: 'SMTP',
+                                from_email: values.from_email,
+                                smtp_host: values.smtp_host,
+                                smtp_port: Number(values.smtp_port || 587),
+                                smtp_secure: false,
+                                smtp_username: values.smtp_username,
+                                smtp_password: values.smtp_password,
+                              },
+                            });
+
+                            await refetchMailProfiles();
+
+                            return {
+                              id: response.data.id,
+                              slug: response.data.slug,
+                              name: response.data.name,
+                              provider: response.data.provider,
+                            };
+                          }}
+                          onChange={(value) =>
+                            setActionForm((current) => ({
+                              ...current,
+                              mail_profile_id:
+                                typeof value === 'number'
+                                  ? value
+                                  : value != null && value !== ''
+                                    ? Number(value)
+                                    : null,
+                            }))
+                          }
+                        />
+
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="h-10 w-10 shrink-0"
+                          disabled={!actionForm.mail_profile_id}
+                          aria-label="Editar perfil de e-mail selecionado"
+                          title="Editar perfil de e-mail selecionado"
+                          onClick={() => {
+                            if (actionForm.mail_profile_id) {
+                              void openMailProfileEditor(
+                                actionForm.mail_profile_id
+                              );
+                            }
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </Field>
+                    <Field label={t('mailTemplate')}>
+                      <div className="flex items-start gap-2">
+                        <div className="min-w-0 flex-1">
+                          <EntityPicker<SelectOption>
+                            className="w-full"
+                            value={actionForm.mail_id}
+                            valueType="number"
+                            placeholder={t('select')}
+                            entityLabel={t('mailTemplate')}
+                            options={mailTemplates}
+                            loadOptions={async ({ page, pageSize, search }) => {
+                              const response = await request<{
+                                data: SelectOption[];
+                              }>({
+                                url: `/mail?page=${page}&pageSize=${pageSize}&search=${encodeURIComponent(search)}`,
+                                method: 'GET',
+                              });
+
+                              return {
+                                items: response.data?.data || [],
+                                hasMore: false,
+                              };
+                            }}
+                            getOptionValue={(option) => option.id}
+                            getOptionLabel={(option) => option.slug}
+                            getOptionDescription={(option) =>
+                              option.subject || option.name
+                            }
+                            createFields={[
+                              {
+                                name: 'slug',
+                                label: 'Slug',
+                                required: true,
+                              },
+                            ]}
+                            createTitle="Criar template de e-mail"
+                            createDescription="Crie rapidamente um template para usar nesta ação."
+                            onCreate={async (values) => {
+                              const response = await request<SelectOption>({
+                                url: '/mail',
+                                method: 'POST',
+                                data: {
+                                  slug: values.slug,
+                                },
+                              });
+
+                              await refetchMailTemplates();
+
+                              return {
+                                id: response.data.id,
+                                slug: response.data.slug,
+                                subject: response.data.subject,
+                                name: response.data.name,
+                              };
+                            }}
+                            onChange={(value) =>
+                              setActionForm((current) => ({
+                                ...current,
+                                mail_id:
+                                  typeof value === 'number'
+                                    ? value
+                                    : value != null && value !== ''
+                                      ? Number(value)
+                                      : null,
+                              }))
+                            }
+                          />
+                        </div>
+
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="h-10 w-10 shrink-0"
+                          disabled={!actionForm.mail_id}
+                          aria-label="Editar template de e-mail selecionado"
+                          title="Editar template de e-mail selecionado"
+                          onClick={() => {
+                            if (actionForm.mail_id) {
+                              void openMailTemplateEditor(actionForm.mail_id);
+                            }
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </Field>
+                    <Field label={t('emailTo')}>
+                      <Input
+                        value={actionForm.email_to}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            email_to: event.target.value,
+                          })
+                        }
+                        placeholder="{{email}}"
+                      />
+                    </Field>
+                    <Field label={t('emailCc')}>
+                      <Input
+                        value={actionForm.email_cc}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            email_cc: event.target.value,
+                          })
+                        }
+                      />
+                    </Field>
+                  </div>
+                ) : (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <Field label={t('whatsappTargetType')}>
+                      <Select
+                        value={actionForm.whatsapp_target_type}
+                        onValueChange={(value) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_target_type: value as 'phone' | 'group',
+                          })
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="phone">{t('phone')}</SelectItem>
+                          <SelectItem value="group">{t('group')}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <Field label={t('whatsappTarget')}>
+                      <Input
+                        value={actionForm.whatsapp_target}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_target: event.target.value,
+                          })
+                        }
+                        placeholder="{{phone}}"
+                      />
+                    </Field>
+                    <Field label={t('whatsappInstance')}>
+                      <Input
+                        value={actionForm.whatsapp_instance}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_instance: event.target.value,
+                          })
+                        }
+                      />
+                    </Field>
+                    <Field label={t('whatsappBaseUrl')}>
+                      <Input
+                        value={actionForm.whatsapp_base_url}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_base_url: event.target.value,
+                          })
+                        }
+                      />
+                    </Field>
+                    <Field label={t('whatsappToken')}>
+                      <Input
+                        type="password"
+                        value={actionForm.whatsapp_token}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_token: event.target.value,
+                          })
+                        }
+                      />
+                    </Field>
+                    <Field label={t('whatsappTemplate')}>
+                      <Textarea
+                        value={actionForm.whatsapp_template}
+                        onChange={(event) =>
+                          setActionForm({
+                            ...actionForm,
+                            whatsapp_template: event.target.value,
+                          })
+                        }
+                        placeholder="Olá {{name}}"
+                      />
+                    </Field>
+                  </div>
+                )}
+
+                <SheetActions
+                  onSave={saveAction}
+                  onCancel={() => setActionSheetOpen(false)}
+                  t={t}
+                />
+              </div>
+            </SheetContent>
+          </Sheet>
         </SheetContent>
       </Sheet>
 
@@ -2019,6 +2847,577 @@ export default function IntegrationsWebhooksPage() {
         </SheetContent>
       </Sheet>
 
+      <Sheet
+        open={mailProfileEditorOpen}
+        onOpenChange={(open) => {
+          setMailProfileEditorOpen(open);
+          if (!open) {
+            setMailProfileEditId(null);
+            setMailProfileEditForm(defaultMailProfileEditForm);
+            setMailProfileTestedSignature(null);
+            setMailProfileIsTesting(false);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-4xl">
+          <SheetHeader>
+            <SheetTitle>Editar perfil de e-mail</SheetTitle>
+            <SheetDescription>
+              Atualize o perfil selecionado sem sair desta tela.
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-6 px-3 pb-8 sm:px-4">
+            <div className="grid gap-6 md:grid-cols-2">
+              <Field label={t('name')}>
+                <Input
+                  value={mailProfileEditForm.name}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      name: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label={t('technicalName')}>
+                <Input
+                  value={mailProfileEditForm.slug}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      slug: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label={t('provider')}>
+                <Select
+                  value={mailProfileEditForm.provider}
+                  onValueChange={(provider: MailProfileProvider) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      provider,
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="SMTP">SMTP</SelectItem>
+                    <SelectItem value="GMAIL">GMAIL</SelectItem>
+                    <SelectItem value="SES">SES</SelectItem>
+                  </SelectContent>
+                </Select>
+              </Field>
+
+              <Field label="From e-mail">
+                <Input
+                  type="email"
+                  value={mailProfileEditForm.from_email}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      from_email: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label="From name">
+                <Input
+                  value={mailProfileEditForm.from_name}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      from_name: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label="Reply-to e-mail">
+                <Input
+                  type="email"
+                  value={mailProfileEditForm.reply_to_email}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      reply_to_email: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label="Reply-to name">
+                <Input
+                  value={mailProfileEditForm.reply_to_name}
+                  onChange={(event) =>
+                    setMailProfileEditForm((current) => ({
+                      ...current,
+                      reply_to_name: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+            </div>
+
+            {mailProfileEditForm.provider === 'SMTP' ? (
+              <div className="grid gap-6 md:grid-cols-2">
+                <Field label="SMTP host">
+                  <Input
+                    value={mailProfileEditForm.smtp_host}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        smtp_host: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="SMTP port">
+                  <Input
+                    type="number"
+                    value={mailProfileEditForm.smtp_port}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        smtp_port: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="SMTP username">
+                  <Input
+                    value={mailProfileEditForm.smtp_username}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        smtp_username: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="SMTP password">
+                  <Input
+                    type="password"
+                    value={mailProfileEditForm.smtp_password}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        smtp_password: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <div className="rounded-md border px-4 py-3 md:col-span-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm">SMTP secure</span>
+                    <Switch
+                      checked={mailProfileEditForm.smtp_secure}
+                      onCheckedChange={(checked) =>
+                        setMailProfileEditForm((current) => ({
+                          ...current,
+                          smtp_secure: checked,
+                        }))
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {mailProfileEditForm.provider === 'GMAIL' ? (
+              <div className="grid gap-6 md:grid-cols-2">
+                <Field label="Gmail client id">
+                  <Input
+                    value={mailProfileEditForm.gmail_client_id}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        gmail_client_id: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="Gmail client secret">
+                  <Input
+                    type="password"
+                    value={mailProfileEditForm.gmail_client_secret}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        gmail_client_secret: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="Gmail refresh token">
+                  <Textarea
+                    className="md:col-span-2"
+                    value={mailProfileEditForm.gmail_refresh_token}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        gmail_refresh_token: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+              </div>
+            ) : null}
+
+            {mailProfileEditForm.provider === 'SES' ? (
+              <div className="grid gap-6 md:grid-cols-2">
+                <Field label="SES access key id">
+                  <Input
+                    value={mailProfileEditForm.ses_access_key_id}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        ses_access_key_id: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="SES secret access key">
+                  <Input
+                    type="password"
+                    value={mailProfileEditForm.ses_secret_access_key}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        ses_secret_access_key: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+                <Field label="SES region">
+                  <Input
+                    value={mailProfileEditForm.ses_region}
+                    onChange={(event) =>
+                      setMailProfileEditForm((current) => ({
+                        ...current,
+                        ses_region: event.target.value,
+                      }))
+                    }
+                  />
+                </Field>
+              </div>
+            ) : null}
+
+            <div className="flex justify-end border-t pt-4">
+              {canSubmitMailProfile ? (
+                <Button
+                  type="button"
+                  className="min-w-40"
+                  onClick={saveMailProfileEditor}
+                >
+                  Salvar alterações
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  className="min-w-40"
+                  onClick={handleTestMailProfile}
+                  disabled={mailProfileIsTesting}
+                >
+                  {mailProfileIsTesting ? 'Testando...' : 'Testar perfil'}
+                </Button>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={mailTemplateEditorOpen}
+        onOpenChange={(open) => {
+          setMailTemplateEditorOpen(open);
+          if (!open) {
+            setMailTemplateEditId(null);
+            setMailTemplateEditForm(defaultMailTemplateEditForm);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-4xl">
+          <SheetHeader>
+            <SheetTitle>Editar template de e-mail</SheetTitle>
+            <SheetDescription>
+              Atualize o template selecionado sem sair desta tela.
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-6 px-3 pb-8 sm:px-4">
+            <div className="grid gap-6 md:grid-cols-2">
+              <Field label={t('technicalName')}>
+                <Input
+                  value={mailTemplateEditForm.slug}
+                  onChange={(event) =>
+                    setMailTemplateEditForm((current) => ({
+                      ...current,
+                      slug: event.target.value,
+                    }))
+                  }
+                />
+              </Field>
+
+              <Field label="Locale">
+                <Select
+                  value={mailTemplateEditForm.locale_code}
+                  onValueChange={(localeCode) => {
+                    void loadMailTemplateLocale(localeCode);
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {locales.map((locale) => (
+                      <SelectItem key={locale.code} value={locale.code}>
+                        {locale.name || locale.code}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </div>
+
+            <Field label="Subject">
+              <Input
+                value={mailTemplateEditForm.subject}
+                onChange={(event) =>
+                  setMailTemplateEditForm((current) => ({
+                    ...current,
+                    subject: event.target.value,
+                  }))
+                }
+              />
+            </Field>
+
+            <Field label="Body">
+              <RichTextEditor
+                value={mailTemplateEditForm.body}
+                onChange={(value) =>
+                  setMailTemplateEditForm((current) => ({
+                    ...current,
+                    body: value,
+                  }))
+                }
+              />
+            </Field>
+
+            <Field label="Variaveis (uma por linha)">
+              <Textarea
+                className="min-h-32 font-mono text-xs"
+                value={mailTemplateEditForm.variables}
+                onChange={(event) =>
+                  setMailTemplateEditForm((current) => ({
+                    ...current,
+                    variables: event.target.value,
+                  }))
+                }
+                placeholder="first_name\ninvoice_number"
+              />
+            </Field>
+
+            <SheetActions
+              onSave={saveMailTemplateEditor}
+              onCancel={() => setMailTemplateEditorOpen(false)}
+              t={t}
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={Boolean(selectedLog)}
+        onOpenChange={(open) => !open && setSelectedLog(null)}
+      >
+        <SheetContent
+          side="right"
+          className="w-full overflow-y-auto sm:max-w-3xl"
+        >
+          <SheetHeader>
+            <SheetTitle>{t('logDetailTitle')}</SheetTitle>
+            <SheetDescription>
+              {selectedLog
+                ? formatDate(
+                    selectedLog.created_at,
+                    getSettingValue,
+                    currentLocaleCode
+                  )
+                : ''}
+            </SheetDescription>
+          </SheetHeader>
+
+          {selectedLog ? (
+            <div className="space-y-6 px-3 pb-8 sm:px-4">
+              <div className="flex flex-wrap gap-3 pt-2">
+                <Badge
+                  variant="outline"
+                  className={
+                    selectedLog.status === 'success'
+                      ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                      : 'border-red-500/20 bg-red-500/10 text-red-600'
+                  }
+                >
+                  {selectedLog.status === 'success'
+                    ? t('logStatusSuccess')
+                    : t('logStatusFailed')}
+                </Badge>
+                <span className="text-sm text-muted-foreground">
+                  {t('logDuration')}: {selectedLog.duration_ms}ms
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {t('logRemoteIp')}: {selectedLog.remote_ip || '-'}
+                </span>
+              </div>
+
+              {selectedLog.error_message ? (
+                <div>
+                  <p className="mb-1 text-xs font-medium text-destructive">
+                    {t('logError')}
+                  </p>
+                  <p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-destructive dark:border-red-900 dark:bg-red-950">
+                    {selectedLog.error_message}
+                  </p>
+                </div>
+              ) : null}
+
+              {selectedLog.payload_summary ? (
+                <div>
+                  <p className="mb-1 text-xs font-medium text-muted-foreground">
+                    {t('logPayload')}
+                  </p>
+                  <pre className="max-h-56 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs">
+                    {stringifyJson(selectedLog.payload_summary)}
+                  </pre>
+                </div>
+              ) : null}
+
+              {selectedLog.response_summary ? (
+                <div>
+                  <p className="mb-1 text-xs font-medium text-muted-foreground">
+                    {t('logResponse')}
+                  </p>
+                  <pre className="max-h-56 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs">
+                    {stringifyJson(selectedLog.response_summary)}
+                  </pre>
+                </div>
+              ) : null}
+
+              {selectedLog.webhook_action_log?.length ? (
+                <div>
+                  <p className="mb-2 text-xs font-medium text-muted-foreground">
+                    {t('actionSection')}
+                  </p>
+                  <div className="rounded-md border">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>{t('actionType')}</TableHead>
+                          <TableHead>{t('name')}</TableHead>
+                          <TableHead>{t('status')}</TableHead>
+                          <TableHead className="w-20 text-right">
+                            {t('logDuration')}
+                          </TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {selectedLog.webhook_action_log.map((actionLog) => (
+                          <TableRow key={actionLog.id}>
+                            <TableCell>
+                              <Badge variant="secondary" className="text-xs">
+                                {actionLog.action_type === 'email'
+                                  ? t('email')
+                                  : t('whatsapp')}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-sm">
+                              {actionLog.action_name}
+                            </TableCell>
+                            <TableCell>
+                              <Badge
+                                variant="outline"
+                                className={
+                                  actionLog.status === 'success'
+                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
+                                }
+                              >
+                                {actionLog.status === 'success'
+                                  ? t('logStatusSuccess')
+                                  : t('logStatusFailed')}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-right text-xs text-muted-foreground">
+                              {actionLog.duration_ms}ms
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+
+                  {selectedLog.webhook_action_log.some(
+                    (al) =>
+                      al.request_payload ||
+                      al.response_payload ||
+                      al.error_message
+                  ) ? (
+                    <div className="mt-4 space-y-4">
+                      {selectedLog.webhook_action_log.map((actionLog) =>
+                        actionLog.request_payload ||
+                        actionLog.response_payload ||
+                        actionLog.error_message ? (
+                          <div
+                            key={actionLog.id}
+                            className="rounded-md border p-3 text-xs"
+                          >
+                            <p className="mb-2 font-medium">
+                              {actionLog.action_name}
+                            </p>
+                            {actionLog.error_message ? (
+                              <p className="mb-2 text-destructive">
+                                {actionLog.error_message}
+                              </p>
+                            ) : null}
+                            {actionLog.request_payload ? (
+                              <div className="mb-2">
+                                <p className="mb-1 text-muted-foreground">
+                                  {t('logRequest')}
+                                </p>
+                                <pre className="max-h-32 overflow-auto rounded border bg-muted/40 p-2 font-mono">
+                                  {stringifyJson(actionLog.request_payload)}
+                                </pre>
+                              </div>
+                            ) : null}
+                            {actionLog.response_payload ? (
+                              <div>
+                                <p className="mb-1 text-muted-foreground">
+                                  {t('logResponse')}
+                                </p>
+                                <pre className="max-h-32 overflow-auto rounded border bg-muted/40 p-2 font-mono">
+                                  {stringifyJson(actionLog.response_payload)}
+                                </pre>
+                              </div>
+                            ) : null}
+                          </div>
+                        ) : null
+                      )}
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+
       <AlertDialog
         open={Boolean(deleteTarget)}
         onOpenChange={(open) => !open && setDeleteTarget(null)}
@@ -2054,6 +3453,68 @@ function Field({ label, children }: { label: string; children: ReactNode }) {
   );
 }
 
+function SortableIncomingActionRow({
+  action,
+  t,
+  onEdit,
+  onDelete,
+}: {
+  action: IncomingAction;
+  t: (key: string) => string;
+  onEdit: (action: IncomingAction) => void;
+  onDelete: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: action.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : undefined,
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      className={isDragging ? 'bg-muted/40' : ''}
+    >
+      <TableCell className="w-8 pr-0">
+        <button
+          type="button"
+          {...attributes}
+          {...listeners}
+          className="flex cursor-grab touch-none items-center justify-center rounded p-1 text-muted-foreground active:cursor-grabbing"
+          aria-label={t('order')}
+        >
+          <GripVertical className="h-4 w-4" />
+        </button>
+      </TableCell>
+      <TableCell>{action.name}</TableCell>
+      <TableCell>
+        <Badge variant="secondary">
+          {action.type === 'email' ? t('email') : t('whatsapp')}
+        </Badge>
+      </TableCell>
+      <TableCell>{action.order}</TableCell>
+      <TableCell className="text-right">
+        <Button variant="ghost" size="icon" onClick={() => onEdit(action)}>
+          <Pencil className="h-4 w-4" />
+        </Button>
+        <Button variant="ghost" size="icon" onClick={onDelete}>
+          <Trash2 className="h-4 w-4 text-destructive" />
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
 function StatusSelect({
   value,
   onValueChange,