@hed-hog/core 0.0.349 → 0.0.350

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

@@ -1,1835 +1,2098 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PageHeader,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { CopyButton } from '@/components/copy-button';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { usePagination } from '@/hooks/use-pagination';
-import { formatDate } from '@/lib/format-date';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  Activity,
-  BookOpenText,
-  Pencil,
-  Plus,
-  RotateCcw,
-  Send,
-  Trash2,
-  Webhook,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { type ReactNode, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-
-type Status = 'active' | 'inactive';
-
-type EventCatalog = {
-  id: number;
-  slug: string;
-  name: string;
-  module: string;
-  description?: string | null;
-  status: Status;
-  updated_at: string;
-};
-
-type IncomingAction = {
-  id: number;
-  type: 'email' | 'whatsapp_evolution';
-  name: string;
-  order: number;
-  status: Status;
-  mail_profile_id?: number | null;
-  mail_id?: number | null;
-  email_to?: string | null;
-  email_cc?: string | null;
-  email_bcc?: string | null;
-  whatsapp_target_type?: 'phone' | 'group' | null;
-  whatsapp_target?: string | null;
-  whatsapp_template?: string | null;
-  whatsapp_instance?: string | null;
-  whatsapp_base_url?: string | null;
-  whatsapp_token?: string | null;
-};
-
-type IncomingIntegration = {
-  id: number;
-  slug: string;
-  name: string;
-  description?: string | null;
-  public_uuid: string;
-  public_url?: string | null;
-  status: Status;
-  require_token: boolean;
-  allowed_ips?: unknown;
-  body_schema?: unknown;
-  webhook_action?: IncomingAction[];
-  updated_at: string;
-  plainToken?: string | null;
-};
-
-type EventWebhook = {
-  id: number;
-  slug: string;
-  name: string;
-  description?: string | null;
-  status: Status;
-  priority: number;
-  url: string;
-  method: string;
-  headers?: unknown;
-  query?: unknown;
-  payload?: unknown;
-  timeout_ms: number;
-  retry_count: number;
-  event_webhook_event?: Array<{
-    integration_event_catalog: EventCatalog;
-  }>;
-  updated_at: string;
-};
-
-type SelectOption = {
-  id: number;
-  slug: string;
-  name?: string;
-  subject?: string;
-  provider?: string;
-  module?: string;
-};
-
-const statusClass = {
-  active: 'border-green-500/20 bg-green-500/10 text-green-600',
-  inactive: 'border-slate-500/20 bg-slate-500/10 text-slate-600',
-};
-
-const defaultCatalogForm = {
-  slug: '',
-  name: '',
-  module: '',
-  description: '',
-  status: 'active' as Status,
-};
-
-const defaultIncomingForm = {
-  slug: '',
-  name: '',
-  description: '',
-  status: 'active' as Status,
-  require_token: false,
-  allowed_ips: '',
-  body_schema: '',
-};
-
-const defaultActionForm = {
-  type: 'email' as IncomingAction['type'],
-  name: '',
-  order: 0,
-  status: 'active' as Status,
-  mail_profile_id: '',
-  mail_id: '',
-  email_to: '',
-  email_cc: '',
-  email_bcc: '',
-  whatsapp_target_type: 'phone',
-  whatsapp_target: '',
-  whatsapp_template: '',
-  whatsapp_instance: '',
-  whatsapp_base_url: '',
-  whatsapp_token: '',
-};
-
-const defaultEventWebhookForm = {
-  slug: '',
-  name: '',
-  description: '',
-  status: 'active' as Status,
-  priority: 0,
-  url: '',
-  method: 'POST',
-  headers: '{\n  "Content-Type": "application/json"\n}',
-  query: '{}',
-  payload:
-    '{\n  "eventName": "{{eventName}}",\n  "aggregateId": "{{aggregateId}}",\n  "sourceModule": "{{sourceModule}}"\n}',
-  timeout_ms: 10000,
-  retry_count: 0,
-  event_ids: [] as number[],
-};
-
-function stringifyJson(value: unknown) {
-  if (!value) return '';
-  if (typeof value === 'string') return value;
-  return JSON.stringify(value, null, 2);
-}
-
-function parseJsonText(value: string) {
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-  return JSON.parse(trimmed);
-}
-
-function parseStringArrayText(value: string) {
-  try {
-    const parsed = parseJsonText(value);
-    if (!Array.isArray(parsed)) return [];
-    return parsed.filter((item): item is string => typeof item === 'string');
-  } catch {
-    return [];
-  }
-}
-
-function stringifyStringArray(values: string[]) {
-  const filtered = values.map((value) => value.trim()).filter(Boolean);
-  return filtered.length ? JSON.stringify(filtered, null, 2) : '';
-}
-
-function getPublicWebhookUrl(uuid: string, publicUrl?: string | null) {
-  if (publicUrl) return publicUrl;
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';
-  return `${baseUrl.replace(/\/+$/, '')}/webhook/${uuid}`;
-}
-
-export default function IntegrationsWebhooksPage() {
-  const t = useTranslations('core.IntegrationsWebhooksPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-
-  const catalog = usePagination({ url: '/integration-event-catalog' });
-  const incoming = usePagination({ url: '/webhook-integration' });
-  const eventWebhooks = usePagination({ url: '/event-webhook' });
-
-  const [activeTab, setActiveTab] = useState('catalog');
-  const [catalogOpen, setCatalogOpen] = useState(false);
-  const [catalogEdit, setCatalogEdit] = useState<EventCatalog | null>(null);
-  const [catalogForm, setCatalogForm] = useState(defaultCatalogForm);
-
-  const [incomingOpen, setIncomingOpen] = useState(false);
-  const [incomingEdit, setIncomingEdit] = useState<IncomingIntegration | null>(
-    null,
-  );
-  const [incomingForm, setIncomingForm] = useState(defaultIncomingForm);
-  const [oneTimeToken, setOneTimeToken] = useState<string | null>(null);
-  const [allowedIpDraft, setAllowedIpDraft] = useState('');
-  const [actionForm, setActionForm] = useState(defaultActionForm);
-
-  const [eventWebhookOpen, setEventWebhookOpen] = useState(false);
-  const [eventWebhookEdit, setEventWebhookEdit] = useState<EventWebhook | null>(
-    null,
-  );
-  const [eventWebhookForm, setEventWebhookForm] = useState(
-    defaultEventWebhookForm,
-  );
-
-  const [deleteTarget, setDeleteTarget] = useState<{
-    kind: 'catalog' | 'incoming' | 'eventWebhook' | 'action';
-    id: number;
-    parentId?: number;
-    name: string;
-  } | null>(null);
-
-  const { data: eventOptions = [], refetch: refetchEventOptions } = useQuery<
-    SelectOption[]
-  >({
-    queryKey: ['integration-event-catalog-options', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<SelectOption[]>({
-        url: '/integration-event-catalog/options',
-        method: 'GET',
-      });
-      return response.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const { data: mailProfiles = [] } = useQuery<SelectOption[]>({
-    queryKey: ['webhook-mail-profiles', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{ data: SelectOption[] }>({
-        url: '/mail-profile?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const { data: mailTemplates = [] } = useQuery<SelectOption[]>({
-    queryKey: ['webhook-mail-templates', currentLocaleCode],
-    queryFn: async () => {
-      const response = await request<{ data: SelectOption[] }>({
-        url: '/mail?pageSize=100',
-        method: 'GET',
-      });
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const stats = useMemo(
-    () => [
-      {
-        key: 'events',
-        title: t('statsEvents'),
-        value: catalog.totalItems,
-        icon: BookOpenText,
-        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
-      },
-      {
-        key: 'incoming',
-        title: t('statsIncoming'),
-        value: incoming.totalItems,
-        icon: Webhook,
-        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
-      },
-      {
-        key: 'eventWebhooks',
-        title: t('statsEventWebhooks'),
-        value: eventWebhooks.totalItems,
-        icon: Send,
-        accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
-      },
-    ],
-    [catalog.totalItems, incoming.totalItems, eventWebhooks.totalItems, t],
-  );
-  const allowedIpList = useMemo(
-    () => parseStringArrayText(incomingForm.allowed_ips),
-    [incomingForm.allowed_ips],
-  );
-
-  const openCatalogCreate = () => {
-    setCatalogEdit(null);
-    setCatalogForm(defaultCatalogForm);
-    setCatalogOpen(true);
-  };
-
-  const openCatalogEdit = (item: EventCatalog) => {
-    setCatalogEdit(item);
-    setCatalogForm({
-      slug: item.slug,
-      name: item.name,
-      module: item.module,
-      description: item.description || '',
-      status: item.status,
-    });
-    setCatalogOpen(true);
-  };
-
-  const saveCatalog = async () => {
-    try {
-      if (catalogEdit) {
-        await request({
-          url: `/integration-event-catalog/${catalogEdit.id}`,
-          method: 'PATCH',
-          data: catalogForm,
-        });
-        toast.success(t('updated'));
-      } else {
-        await request({
-          url: '/integration-event-catalog',
-          method: 'POST',
-          data: catalogForm,
-        });
-        toast.success(t('created'));
-      }
-      setCatalogOpen(false);
-      await Promise.all([catalog.refetch(), refetchEventOptions()]);
-    } catch (error) {
-      toast.error(t('saveError'));
-    }
-  };
-
-  const openIncomingCreate = () => {
-    setIncomingEdit(null);
-    setIncomingForm(defaultIncomingForm);
-    setOneTimeToken(null);
-    setAllowedIpDraft('');
-    setActionForm(defaultActionForm);
-    setIncomingOpen(true);
-  };
-
-  const openIncomingEdit = async (item: IncomingIntegration) => {
-    const response = await request<IncomingIntegration>({
-      url: `/webhook-integration/${item.id}`,
-      method: 'GET',
-    });
-    const data = response.data;
-    setIncomingEdit(data);
-    setIncomingForm({
-      slug: data.slug,
-      name: data.name,
-      description: data.description || '',
-      status: data.status,
-      require_token: data.require_token,
-      allowed_ips: stringifyJson(data.allowed_ips),
-      body_schema: stringifyJson(data.body_schema),
-    });
-    if (data.plainToken) {
-      setOneTimeToken(data.plainToken);
-    }
-    setAllowedIpDraft('');
-    setActionForm(defaultActionForm);
-    setIncomingOpen(true);
-  };
-
-  const setAllowedIpList = (items: string[]) => {
-    setIncomingForm((current) => ({
-      ...current,
-      allowed_ips: stringifyStringArray(items),
-    }));
-  };
-
-  const addAllowedIp = () => {
-    const nextIp = allowedIpDraft.trim();
-    if (!nextIp) return;
-    setAllowedIpList([...allowedIpList, nextIp]);
-    setAllowedIpDraft('');
-  };
-
-  const updateAllowedIp = (index: number, value: string) => {
-    const items = [...allowedIpList];
-    items[index] = value;
-    setAllowedIpList(items);
-  };
-
-  const removeAllowedIp = (index: number) => {
-    setAllowedIpList(
-      allowedIpList.filter((_, itemIndex) => itemIndex !== index),
-    );
-  };
-
-  const saveIncoming = async () => {
-    try {
-      const payload = {
-        ...incomingForm,
-        allowed_ips: parseJsonText(incomingForm.allowed_ips),
-        body_schema: parseJsonText(incomingForm.body_schema),
-      };
-
-      const response = incomingEdit
-        ? await request<IncomingIntegration>({
-            url: `/webhook-integration/${incomingEdit.id}`,
-            method: 'PATCH',
-            data: payload,
-          })
-        : await request<IncomingIntegration>({
-            url: '/webhook-integration',
-            method: 'POST',
-            data: payload,
-          });
-
-      if (response.data.plainToken) {
-        setOneTimeToken(response.data.plainToken);
-        toast.success(t('tokenGenerated'));
-      } else {
-        toast.success(incomingEdit ? t('updated') : t('created'));
-      }
-
-      if (!incomingEdit) {
-        await openIncomingEdit(response.data);
-      }
-
-      await incoming.refetch();
-    } catch (error) {
-      toast.error(t('saveError'));
-    }
-  };
-
-  const saveAction = async () => {
-    if (!incomingEdit) 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'));
-      setActionForm(defaultActionForm);
-      await openIncomingEdit(incomingEdit);
-      await incoming.refetch();
-    } catch (error) {
-      toast.error(t('saveError'));
-    }
-  };
-
-  const regenerateUuid = async () => {
-    if (!incomingEdit) return;
-    const response = await request<IncomingIntegration>({
-      url: `/webhook-integration/${incomingEdit.id}/regenerate-uuid`,
-      method: 'POST',
-    });
-    toast.success(t('uuidRegenerated'));
-    await openIncomingEdit(response.data);
-    await incoming.refetch();
-  };
-
-  const regenerateToken = async () => {
-    if (!incomingEdit) return;
-    const response = await request<IncomingIntegration>({
-      url: `/webhook-integration/${incomingEdit.id}/regenerate-token`,
-      method: 'POST',
-    });
-    toast.success(
-      response.data.plainToken ? t('tokenGenerated') : t('tokenGenerated'),
-    );
-    setOneTimeToken(response.data.plainToken || null);
-    await openIncomingEdit(response.data);
-    await incoming.refetch();
-  };
-
-  const openEventWebhookCreate = () => {
-    setEventWebhookEdit(null);
-    setEventWebhookForm(defaultEventWebhookForm);
-    setEventWebhookOpen(true);
-  };
-
-  const openEventWebhookEdit = async (item: EventWebhook) => {
-    const response = await request<EventWebhook>({
-      url: `/event-webhook/${item.id}`,
-      method: 'GET',
-    });
-    const data = response.data;
-    setEventWebhookEdit(data);
-    setEventWebhookForm({
-      slug: data.slug,
-      name: data.name,
-      description: data.description || '',
-      status: data.status,
-      priority: data.priority || 0,
-      url: data.url,
-      method: data.method || 'POST',
-      headers: stringifyJson(data.headers) || '{}',
-      query: stringifyJson(data.query) || '{}',
-      payload: stringifyJson(data.payload) || '{}',
-      timeout_ms: data.timeout_ms || 10000,
-      retry_count: data.retry_count || 0,
-      event_ids:
-        data.event_webhook_event?.map(
-          (row) => row.integration_event_catalog.id,
-        ) || [],
-    });
-    setEventWebhookOpen(true);
-  };
-
-  const saveEventWebhook = async () => {
-    try {
-      const payload = {
-        ...eventWebhookForm,
-        headers: parseJsonText(eventWebhookForm.headers),
-        query: parseJsonText(eventWebhookForm.query),
-        payload: parseJsonText(eventWebhookForm.payload),
-      };
-
-      if (eventWebhookEdit) {
-        await request({
-          url: `/event-webhook/${eventWebhookEdit.id}`,
-          method: 'PATCH',
-          data: payload,
-        });
-        toast.success(t('updated'));
-      } else {
-        await request({
-          url: '/event-webhook',
-          method: 'POST',
-          data: payload,
-        });
-        toast.success(t('created'));
-      }
-      setEventWebhookOpen(false);
-      await eventWebhooks.refetch();
-    } catch (error) {
-      toast.error(t('saveError'));
-    }
-  };
-
-  const confirmDelete = async () => {
-    if (!deleteTarget) return;
-
-    try {
-      if (deleteTarget.kind === 'catalog') {
-        await request({
-          url: '/integration-event-catalog',
-          method: 'DELETE',
-          data: { ids: [deleteTarget.id] },
-        });
-        await Promise.all([catalog.refetch(), refetchEventOptions()]);
-      }
-      if (deleteTarget.kind === 'incoming') {
-        await request({
-          url: '/webhook-integration',
-          method: 'DELETE',
-          data: { ids: [deleteTarget.id] },
-        });
-        await incoming.refetch();
-      }
-      if (deleteTarget.kind === 'eventWebhook') {
-        await request({
-          url: '/event-webhook',
-          method: 'DELETE',
-          data: { ids: [deleteTarget.id] },
-        });
-        await eventWebhooks.refetch();
-      }
-      if (deleteTarget.kind === 'action' && deleteTarget.parentId) {
-        await request({
-          url: `/webhook-integration/${deleteTarget.parentId}/action`,
-          method: 'DELETE',
-          data: { ids: [deleteTarget.id] },
-        });
-        if (incomingEdit) {
-          await openIncomingEdit(incomingEdit);
-        }
-        await incoming.refetch();
-      }
-      toast.success(t('deleted'));
-      setDeleteTarget(null);
-    } catch (error) {
-      toast.error(t('deleteError'));
-    }
-  };
-
-  const renderStatus = (status: Status) => (
-    <Badge variant="outline" className={statusClass[status]}>
-      {t(status)}
-    </Badge>
-  );
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: t('breadcrumbHome'), href: '/' },
-          { label: t('breadcrumbManagement'), href: '/core/management' },
-          { label: t('title') },
-        ]}
-        title={t('title')}
-        description={t('description')}
-        actions={[
-          activeTab === 'catalog'
-            ? {
-                label: t('newEvent'),
-                icon: <Plus className="h-4 w-4" />,
-                onClick: openCatalogCreate,
-              }
-            : activeTab === 'incoming'
-              ? {
-                  label: t('newIncoming'),
-                  icon: <Plus className="h-4 w-4" />,
-                  onClick: openIncomingCreate,
-                }
-              : {
-                  label: t('newEventWebhook'),
-                  icon: <Plus className="h-4 w-4" />,
-                  onClick: openEventWebhookCreate,
-                },
-        ]}
-      />
-
-      <KpiCardsGrid items={stats} />
-
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="catalog">
-            <BookOpenText className="h-4 w-4" />
-            {t('tabCatalog')}
-          </TabsTrigger>
-          <TabsTrigger value="incoming">
-            <Webhook className="h-4 w-4" />
-            {t('tabIncoming')}
-          </TabsTrigger>
-          <TabsTrigger value="eventWebhooks">
-            <Send className="h-4 w-4" />
-            {t('tabEventWebhooks')}
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="catalog" className="space-y-4">
-          <SearchBar
-            searchQuery={catalog.search}
-            onSearchChange={(value) => {
-              catalog.setSearch(value);
-              catalog.setPage(1);
-            }}
-            onSearch={() => catalog.setPage(1)}
-            placeholder={t('searchEvents')}
-          />
-
-          {catalog.items.length === 0 ? (
-            <EmptyState
-              icon={<BookOpenText className="h-12 w-12" />}
-              title={t('emptyEvents')}
-              description={t('emptyEventsDescription')}
-              actionLabel={t('newEvent')}
-              onAction={openCatalogCreate}
-            />
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('eventName')}</TableHead>
-                    <TableHead>{t('module')}</TableHead>
-                    <TableHead>{t('descriptionColumn')}</TableHead>
-                    <TableHead>{t('status')}</TableHead>
-                    <TableHead>{t('updatedAt')}</TableHead>
-                    <TableHead className="text-right">{t('actions')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {(catalog.items as EventCatalog[]).map((item) => (
-                    <TableRow
-                      key={item.id}
-                      className="cursor-pointer"
-                      onDoubleClick={() => openCatalogEdit(item)}
-                    >
-                      <TableCell>
-                        <div className="font-medium">{item.name}</div>
-                        <div className="font-mono text-xs text-muted-foreground">
-                          {item.slug}
-                        </div>
-                      </TableCell>
-                      <TableCell>{item.module}</TableCell>
-                      <TableCell className="max-w-md truncate">
-                        {item.description || '-'}
-                      </TableCell>
-                      <TableCell>{renderStatus(item.status)}</TableCell>
-                      <TableCell className="text-muted-foreground">
-                        {formatDate(
-                          item.updated_at,
-                          getSettingValue,
-                          currentLocaleCode,
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => openCatalogEdit(item)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() =>
-                            setDeleteTarget({
-                              kind: 'catalog',
-                              id: item.id,
-                              name: item.name,
-                            })
-                          }
-                        >
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-
-          <PaginationFooter
-            currentPage={catalog.page}
-            pageSize={catalog.pageSize}
-            totalItems={catalog.totalItems}
-            onPageChange={catalog.setPage}
-            onPageSizeChange={(size) => {
-              catalog.setPageSize(size);
-              catalog.setPage(1);
-            }}
-          />
-        </TabsContent>
-
-        <TabsContent value="incoming" className="space-y-4">
-          <SearchBar
-            searchQuery={incoming.search}
-            onSearchChange={(value) => {
-              incoming.setSearch(value);
-              incoming.setPage(1);
-            }}
-            onSearch={() => incoming.setPage(1)}
-            placeholder={t('searchIncoming')}
-          />
-
-          {incoming.items.length === 0 ? (
-            <EmptyState
-              icon={<Webhook className="h-12 w-12" />}
-              title={t('emptyIncoming')}
-              description={t('emptyIncomingDescription')}
-              actionLabel={t('newIncoming')}
-              onAction={openIncomingCreate}
-            />
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('name')}</TableHead>
-                    <TableHead>{t('publicUrl')}</TableHead>
-                    <TableHead>{t('security')}</TableHead>
-                    <TableHead>{t('actionsCount')}</TableHead>
-                    <TableHead>{t('status')}</TableHead>
-                    <TableHead className="text-right">{t('actions')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {(incoming.items as IncomingIntegration[]).map((item) => (
-                    <TableRow
-                      key={item.id}
-                      className="cursor-pointer"
-                      onDoubleClick={() => openIncomingEdit(item)}
-                    >
-                      <TableCell>
-                        <div className="font-medium">{item.name}</div>
-                        <div className="font-mono text-xs text-muted-foreground">
-                          {item.slug}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex max-w-md items-center gap-2">
-                          <span className="truncate font-mono text-xs">
-                            {getPublicWebhookUrl(
-                              item.public_uuid,
-                              item.public_url,
-                            )}
-                          </span>
-                          <CopyButton
-                            value={getPublicWebhookUrl(
-                              item.public_uuid,
-                              item.public_url,
-                            )}
-                          />
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        {item.require_token ? (
-                          <Badge variant="secondary">{t('token')}</Badge>
-                        ) : (
-                          <Badge variant="outline">UUID</Badge>
-                        )}
-                      </TableCell>
-                      <TableCell>{item.webhook_action?.length || 0}</TableCell>
-                      <TableCell>{renderStatus(item.status)}</TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => openIncomingEdit(item)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() =>
-                            setDeleteTarget({
-                              kind: 'incoming',
-                              id: item.id,
-                              name: item.name,
-                            })
-                          }
-                        >
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-
-          <PaginationFooter
-            currentPage={incoming.page}
-            pageSize={incoming.pageSize}
-            totalItems={incoming.totalItems}
-            onPageChange={incoming.setPage}
-            onPageSizeChange={(size) => {
-              incoming.setPageSize(size);
-              incoming.setPage(1);
-            }}
-          />
-        </TabsContent>
-
-        <TabsContent value="eventWebhooks" className="space-y-4">
-          <SearchBar
-            searchQuery={eventWebhooks.search}
-            onSearchChange={(value) => {
-              eventWebhooks.setSearch(value);
-              eventWebhooks.setPage(1);
-            }}
-            onSearch={() => eventWebhooks.setPage(1)}
-            placeholder={t('searchEventWebhooks')}
-          />
-
-          {eventWebhooks.items.length === 0 ? (
-            <EmptyState
-              icon={<Send className="h-12 w-12" />}
-              title={t('emptyEventWebhooks')}
-              description={t('emptyEventWebhooksDescription')}
-              actionLabel={t('newEventWebhook')}
-              onAction={openEventWebhookCreate}
-            />
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('name')}</TableHead>
-                    <TableHead>{t('events')}</TableHead>
-                    <TableHead>{t('httpTarget')}</TableHead>
-                    <TableHead>{t('retry')}</TableHead>
-                    <TableHead>{t('status')}</TableHead>
-                    <TableHead className="text-right">{t('actions')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {(eventWebhooks.items as EventWebhook[]).map((item) => (
-                    <TableRow
-                      key={item.id}
-                      className="cursor-pointer"
-                      onDoubleClick={() => openEventWebhookEdit(item)}
-                    >
-                      <TableCell>
-                        <div className="font-medium">{item.name}</div>
-                        <div className="font-mono text-xs text-muted-foreground">
-                          {item.slug}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex flex-wrap gap-1">
-                          {item.event_webhook_event?.map((row) => (
-                            <Badge
-                              key={row.integration_event_catalog.id}
-                              variant="secondary"
-                              className="font-mono text-xs"
-                            >
-                              {row.integration_event_catalog.slug}
-                            </Badge>
-                          ))}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline">{item.method}</Badge>
-                          <span className="max-w-md truncate font-mono text-xs">
-                            {item.url}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell>{item.retry_count}</TableCell>
-                      <TableCell>{renderStatus(item.status)}</TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => openEventWebhookEdit(item)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() =>
-                            setDeleteTarget({
-                              kind: 'eventWebhook',
-                              id: item.id,
-                              name: item.name,
-                            })
-                          }
-                        >
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-
-          <PaginationFooter
-            currentPage={eventWebhooks.page}
-            pageSize={eventWebhooks.pageSize}
-            totalItems={eventWebhooks.totalItems}
-            onPageChange={eventWebhooks.setPage}
-            onPageSizeChange={(size) => {
-              eventWebhooks.setPageSize(size);
-              eventWebhooks.setPage(1);
-            }}
-          />
-        </TabsContent>
-      </Tabs>
-
-      <Sheet open={catalogOpen} onOpenChange={setCatalogOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
-          <SheetHeader>
-            <SheetTitle>
-              {catalogEdit ? t('editEvent') : t('newEvent')}
-            </SheetTitle>
-            <SheetDescription>{t('eventFormDescription')}</SheetDescription>
-          </SheetHeader>
-          <div className="space-y-4 px-3 pb-8 sm:px-4">
-            <Field label={t('eventName')}>
-              <Input
-                value={catalogForm.name}
-                onChange={(event) =>
-                  setCatalogForm({ ...catalogForm, name: event.target.value })
-                }
-              />
-            </Field>
-            <Field label={t('technicalName')}>
-              <Input
-                value={catalogForm.slug}
-                onChange={(event) =>
-                  setCatalogForm({ ...catalogForm, slug: event.target.value })
-                }
-                placeholder="module.entity.changed"
-              />
-            </Field>
-            <Field label={t('module')}>
-              <Input
-                value={catalogForm.module}
-                onChange={(event) =>
-                  setCatalogForm({ ...catalogForm, module: event.target.value })
-                }
-              />
-            </Field>
-            <Field label={t('descriptionColumn')}>
-              <Textarea
-                value={catalogForm.description}
-                onChange={(event) =>
-                  setCatalogForm({
-                    ...catalogForm,
-                    description: event.target.value,
-                  })
-                }
-              />
-            </Field>
-            <StatusSelect
-              value={catalogForm.status}
-              onValueChange={(status) =>
-                setCatalogForm({ ...catalogForm, status })
-              }
-              t={t}
-            />
-            <SheetActions
-              onSave={saveCatalog}
-              onCancel={() => setCatalogOpen(false)}
-              t={t}
-            />
-          </div>
-        </SheetContent>
-      </Sheet>
-
-      <Sheet
-        open={incomingOpen}
-        onOpenChange={(open) => {
-          setIncomingOpen(open);
-          if (!open) {
-            setOneTimeToken(null);
-          }
-        }}
-      >
-        <SheetContent className="w-full overflow-y-auto sm:max-w-5xl">
-          <SheetHeader>
-            <SheetTitle>
-              {incomingEdit ? t('editIncoming') : t('newIncoming')}
-            </SheetTitle>
-            <SheetDescription>{t('incomingFormDescription')}</SheetDescription>
-          </SheetHeader>
-          <div className="space-y-6 px-3 pb-8 sm:px-4">
-            <div className="grid gap-4 md:grid-cols-2">
-              <Field label={t('name')}>
-                <Input
-                  value={incomingForm.name}
-                  onChange={(event) =>
-                    setIncomingForm({
-                      ...incomingForm,
-                      name: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-              <Field label={t('technicalName')}>
-                <Input
-                  value={incomingForm.slug}
-                  onChange={(event) =>
-                    setIncomingForm({
-                      ...incomingForm,
-                      slug: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-            </div>
-            <Field label={t('descriptionColumn')}>
-              <Textarea
-                value={incomingForm.description}
-                onChange={(event) =>
-                  setIncomingForm({
-                    ...incomingForm,
-                    description: event.target.value,
-                  })
-                }
-              />
-            </Field>
-            <div className="grid gap-4 md:grid-cols-3">
-              <StatusSelect
-                value={incomingForm.status}
-                onValueChange={(status) =>
-                  setIncomingForm({ ...incomingForm, status })
-                }
-                t={t}
-              />
-              <div className="flex items-center justify-between rounded-md border px-4 py-3 md:col-span-2">
-                <div>
-                  <p className="text-sm font-medium">{t('requireToken')}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {t('requireTokenHelp')}
-                  </p>
-                </div>
-                <Switch
-                  checked={incomingForm.require_token}
-                  onCheckedChange={(checked) =>
-                    setIncomingForm({
-                      ...incomingForm,
-                      require_token: checked,
-                    })
-                  }
-                />
-              </div>
-            </div>
-            {oneTimeToken ? (
-              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                  <div className="min-w-0 space-y-1">
-                    <Label>{t('oneTimeTokenTitle')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {t('oneTimeTokenDescription')}
-                    </p>
-                    <div className="mt-2 flex min-w-0 items-center gap-2 rounded-md border bg-background px-3 py-2">
-                      <code className="min-w-0 flex-1 truncate text-xs">
-                        {oneTimeToken}
-                      </code>
-                      <CopyButton value={oneTimeToken} className="h-7 w-7" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : incomingForm.require_token ? (
-              <div className="rounded-md border p-4">
-                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                  <div>
-                    <Label>{t('tokenConfiguredTitle')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {incomingEdit
-                        ? t('tokenConfiguredDescription')
-                        : t('tokenWillBeCreatedDescription')}
-                    </p>
-                  </div>
-                  {incomingEdit ? (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={regenerateToken}
-                    >
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      {t('regenerateToken')}
-                    </Button>
-                  ) : null}
-                </div>
-              </div>
-            ) : null}
-            <div className="grid gap-4 md:grid-cols-2">
-              <Field label={t('allowedIps')}>
-                <div className="space-y-3">
-                  <div className="rounded-md border">
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>{t('ipAddress')}</TableHead>
-                          <TableHead className="w-[72px] text-right">
-                            {t('actions')}
-                          </TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {allowedIpList.length === 0 ? (
-                          <TableRow>
-                            <TableCell
-                              colSpan={2}
-                              className="h-16 text-center text-sm text-muted-foreground"
-                            >
-                              {t('emptyAllowedIps')}
-                            </TableCell>
-                          </TableRow>
-                        ) : (
-                          allowedIpList.map((ip, index) => (
-                            <TableRow key={`${ip}-${index}`}>
-                              <TableCell>
-                                <Input
-                                  value={ip}
-                                  onChange={(event) =>
-                                    updateAllowedIp(index, event.target.value)
-                                  }
-                                  placeholder="127.0.0.1"
-                                />
-                              </TableCell>
-                              <TableCell className="text-right">
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={() => removeAllowedIp(index)}
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                </Button>
-                              </TableCell>
-                            </TableRow>
-                          ))
-                        )}
-                      </TableBody>
-                    </Table>
-                  </div>
-                  <div className="flex gap-2">
-                    <Input
-                      value={allowedIpDraft}
-                      onChange={(event) =>
-                        setAllowedIpDraft(event.target.value)
-                      }
-                      onKeyDown={(event) => {
-                        if (event.key === 'Enter') {
-                          event.preventDefault();
-                          addAllowedIp();
-                        }
-                      }}
-                      placeholder="127.0.0.1"
-                    />
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={addAllowedIp}
-                    >
-                      <Plus className="mr-2 h-4 w-4" />
-                      {t('addIp')}
-                    </Button>
-                  </div>
-                </div>
-              </Field>
-              <Field label={t('bodySchema')}>
-                <Textarea
-                  value={incomingForm.body_schema}
-                  onChange={(event) =>
-                    setIncomingForm({
-                      ...incomingForm,
-                      body_schema: event.target.value,
-                    })
-                  }
-                  placeholder='{"type":"object"}'
-                />
-              </Field>
-            </div>
-            {incomingEdit && (
-              <div className="rounded-md border p-4">
-                <div className="mb-3 flex items-center justify-between gap-3">
-                  <div className="min-w-0">
-                    <Label>{t('publicUrl')}</Label>
-                    <div className="mt-1 flex items-center gap-2">
-                      <span className="truncate font-mono text-xs">
-                        {getPublicWebhookUrl(
-                          incomingEdit.public_uuid,
-                          incomingEdit.public_url,
-                        )}
-                      </span>
-                      <CopyButton
-                        value={getPublicWebhookUrl(
-                          incomingEdit.public_uuid,
-                          incomingEdit.public_url,
-                        )}
-                      />
-                    </div>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={regenerateUuid}
-                    >
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      {t('regenerateUuid')}
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            )}
-            <SheetActions
-              onSave={saveIncoming}
-              onCancel={() => setIncomingOpen(false)}
-              t={t}
-            />
-
-            {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">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>{t('name')}</TableHead>
-                        <TableHead>{t('actionType')}</TableHead>
-                        <TableHead>{t('order')}</TableHead>
-                        <TableHead className="text-right">
-                          {t('actions')}
-                        </TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {incomingEdit.webhook_action?.map((action) => (
-                        <TableRow key={action.id}>
-                          <TableCell>{action.name}</TableCell>
-                          <TableCell>
-                            <Badge variant="secondary">{action.type}</Badge>
-                          </TableCell>
-                          <TableCell>{action.order}</TableCell>
-                          <TableCell className="text-right">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() =>
-                                setDeleteTarget({
-                                  kind: 'action',
-                                  id: action.id,
-                                  parentId: incomingEdit.id,
-                                  name: action.name,
-                                })
-                              }
-                            >
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                            </Button>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-              </div>
-            )}
-          </div>
-        </SheetContent>
-      </Sheet>
-
-      <Sheet open={eventWebhookOpen} onOpenChange={setEventWebhookOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-5xl">
-          <SheetHeader>
-            <SheetTitle>
-              {eventWebhookEdit ? t('editEventWebhook') : t('newEventWebhook')}
-            </SheetTitle>
-            <SheetDescription>
-              {t('eventWebhookFormDescription')}
-            </SheetDescription>
-          </SheetHeader>
-          <div className="space-y-5 px-3 pb-8 sm:px-4">
-            <div className="grid gap-4 md:grid-cols-2">
-              <Field label={t('name')}>
-                <Input
-                  value={eventWebhookForm.name}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      name: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-              <Field label={t('technicalName')}>
-                <Input
-                  value={eventWebhookForm.slug}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      slug: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-            </div>
-            <Field label={t('events')}>
-              <div className="grid max-h-52 gap-2 overflow-y-auto rounded-md border p-3 md:grid-cols-2">
-                {eventOptions.map((event) => {
-                  const checked = eventWebhookForm.event_ids.includes(event.id);
-                  return (
-                    <label
-                      key={event.id}
-                      className="flex cursor-pointer items-start gap-2 rounded-md p-2 hover:bg-muted"
-                    >
-                      <Checkbox
-                        checked={checked}
-                        onCheckedChange={(nextChecked) => {
-                          setEventWebhookForm({
-                            ...eventWebhookForm,
-                            event_ids: nextChecked
-                              ? [...eventWebhookForm.event_ids, event.id]
-                              : eventWebhookForm.event_ids.filter(
-                                  (id) => id !== event.id,
-                                ),
-                          });
-                        }}
-                      />
-                      <span>
-                        <span className="block font-mono text-xs">
-                          {event.slug}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                          {event.module}
-                        </span>
-                      </span>
-                    </label>
-                  );
-                })}
-              </div>
-            </Field>
-            <div className="grid gap-4 md:grid-cols-[160px_1fr]">
-              <Field label={t('method')}>
-                <Select
-                  value={eventWebhookForm.method}
-                  onValueChange={(method) =>
-                    setEventWebhookForm({ ...eventWebhookForm, method })
-                  }
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((method) => (
-                      <SelectItem key={method} value={method}>
-                        {method}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field label={t('url')}>
-                <Input
-                  value={eventWebhookForm.url}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      url: event.target.value,
-                    })
-                  }
-                  placeholder="https://api.example.com/webhook"
-                />
-              </Field>
-            </div>
-            <div className="grid gap-4 md:grid-cols-3">
-              <StatusSelect
-                value={eventWebhookForm.status}
-                onValueChange={(status) =>
-                  setEventWebhookForm({ ...eventWebhookForm, status })
-                }
-                t={t}
-              />
-              <Field label={t('timeout')}>
-                <Input
-                  type="number"
-                  value={eventWebhookForm.timeout_ms}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      timeout_ms: Number(event.target.value),
-                    })
-                  }
-                />
-              </Field>
-              <Field label={t('retry')}>
-                <Input
-                  type="number"
-                  value={eventWebhookForm.retry_count}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      retry_count: Number(event.target.value),
-                    })
-                  }
-                />
-              </Field>
-            </div>
-            <div className="grid gap-4 md:grid-cols-3">
-              <Field label={t('headers')}>
-                <Textarea
-                  className="min-h-48 font-mono text-xs"
-                  value={eventWebhookForm.headers}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      headers: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-              <Field label={t('query')}>
-                <Textarea
-                  className="min-h-48 font-mono text-xs"
-                  value={eventWebhookForm.query}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      query: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-              <Field label={t('payload')}>
-                <Textarea
-                  className="min-h-48 font-mono text-xs"
-                  value={eventWebhookForm.payload}
-                  onChange={(event) =>
-                    setEventWebhookForm({
-                      ...eventWebhookForm,
-                      payload: event.target.value,
-                    })
-                  }
-                />
-              </Field>
-            </div>
-            <SheetActions
-              onSave={saveEventWebhook}
-              onCancel={() => setEventWebhookOpen(false)}
-              t={t}
-            />
-          </div>
-        </SheetContent>
-      </Sheet>
-
-      <AlertDialog
-        open={Boolean(deleteTarget)}
-        onOpenChange={(open) => !open && setDeleteTarget(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('deleteDescription', { name: deleteTarget?.name || '' })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {t('delete')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Page>
-  );
-}
-
-function Field({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <div className="space-y-2">
-      <Label>{label}</Label>
-      {children}
-    </div>
-  );
-}
-
-function StatusSelect({
-  value,
-  onValueChange,
-  t,
-}: {
-  value: Status;
-  onValueChange: (value: Status) => void;
-  t: (key: string) => string;
-}) {
-  return (
-    <Field label={t('status')}>
-      <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger className="w-full">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="active">{t('active')}</SelectItem>
-          <SelectItem value="inactive">{t('inactive')}</SelectItem>
-        </SelectContent>
-      </Select>
-    </Field>
-  );
-}
-
-function SheetActions({
-  onSave,
-  onCancel,
-  t,
-}: {
-  onSave: () => void;
-  onCancel: () => void;
-  t: (key: string) => string;
-}) {
-  return (
-    <div className="flex justify-end gap-3 border-t pt-4">
-      <Button variant="outline" onClick={onCancel}>
-        {t('cancel')}
-      </Button>
-      <Button onClick={onSave}>{t('save')}</Button>
-    </div>
-  );
-}
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Activity,
+  BookOpenText,
+  Clock3,
+  Pencil,
+  Plus,
+  RotateCcw,
+  Send,
+  Trash2,
+  Webhook,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type Status = 'active' | 'inactive';
+
+type EventCatalog = {
+  id: number;
+  slug: string;
+  name: string;
+  module: string;
+  description?: string | null;
+  status: Status;
+  updated_at: string;
+};
+
+type IncomingAction = {
+  id: number;
+  type: 'email' | 'whatsapp_evolution';
+  name: string;
+  order: number;
+  status: Status;
+  mail_profile_id?: number | null;
+  mail_id?: number | null;
+  email_to?: string | null;
+  email_cc?: string | null;
+  email_bcc?: string | null;
+  whatsapp_target_type?: 'phone' | 'group' | null;
+  whatsapp_target?: string | null;
+  whatsapp_template?: string | null;
+  whatsapp_instance?: string | null;
+  whatsapp_base_url?: string | null;
+  whatsapp_token?: string | null;
+};
+
+type IncomingIntegration = {
+  id: number;
+  slug: string;
+  name: string;
+  description?: string | null;
+  public_uuid: string;
+  public_url?: string | null;
+  status: Status;
+  require_token: boolean;
+  allowed_ips?: unknown;
+  body_schema?: unknown;
+  webhook_action?: IncomingAction[];
+  updated_at: string;
+  plainToken?: string | null;
+};
+
+type IncomingActionLog = {
+  id: number;
+  action_name: string;
+  action_type: IncomingAction['type'];
+  status: 'success' | 'failed';
+  duration_ms: number;
+  request_payload?: unknown;
+  response_payload?: unknown;
+  error_message?: string | null;
+  created_at: string;
+};
+
+type IncomingCallLog = {
+  id: number;
+  public_uuid: string;
+  status: 'success' | 'failed';
+  remote_ip?: string | null;
+  duration_ms: number;
+  error_message?: string | null;
+  payload_summary?: unknown;
+  response_summary?: unknown;
+  created_at: string;
+  webhook_action_log?: IncomingActionLog[];
+};
+
+type EventWebhook = {
+  id: number;
+  slug: string;
+  name: string;
+  description?: string | null;
+  status: Status;
+  priority: number;
+  url: string;
+  method: string;
+  headers?: unknown;
+  query?: unknown;
+  payload?: unknown;
+  timeout_ms: number;
+  retry_count: number;
+  event_webhook_event?: Array<{
+    integration_event_catalog: EventCatalog;
+  }>;
+  updated_at: string;
+};
+
+type SelectOption = {
+  id: number;
+  slug: string;
+  name?: string;
+  subject?: string;
+  provider?: string;
+  module?: string;
+};
+
+type PaginatedResponse<T> = {
+  data: T[];
+  totalItems: number;
+  currentPage: number;
+  pageSize: number;
+};
+
+const statusClass = {
+  active: 'border-green-500/20 bg-green-500/10 text-green-600',
+  inactive: 'border-slate-500/20 bg-slate-500/10 text-slate-600',
+};
+
+const defaultCatalogForm = {
+  slug: '',
+  name: '',
+  module: '',
+  description: '',
+  status: 'active' as Status,
+};
+
+const defaultIncomingForm = {
+  slug: '',
+  name: '',
+  description: '',
+  status: 'active' as Status,
+  require_token: false,
+  allowed_ips: '',
+  body_schema: '',
+};
+
+const defaultActionForm = {
+  type: 'email' as IncomingAction['type'],
+  name: '',
+  order: 0,
+  status: 'active' as Status,
+  mail_profile_id: '',
+  mail_id: '',
+  email_to: '',
+  email_cc: '',
+  email_bcc: '',
+  whatsapp_target_type: 'phone',
+  whatsapp_target: '',
+  whatsapp_template: '',
+  whatsapp_instance: '',
+  whatsapp_base_url: '',
+  whatsapp_token: '',
+};
+
+const defaultEventWebhookForm = {
+  slug: '',
+  name: '',
+  description: '',
+  status: 'active' as Status,
+  priority: 0,
+  url: '',
+  method: 'POST',
+  headers: '{\n  "Content-Type": "application/json"\n}',
+  query: '{}',
+  payload:
+    '{\n  "eventName": "{{eventName}}",\n  "aggregateId": "{{aggregateId}}",\n  "sourceModule": "{{sourceModule}}"\n}',
+  timeout_ms: 10000,
+  retry_count: 0,
+  event_ids: [] as number[],
+};
+
+function stringifyJson(value: unknown) {
+  if (!value) return '';
+  if (typeof value === 'string') return value;
+  return JSON.stringify(value, null, 2);
+}
+
+function parseJsonText(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  return JSON.parse(trimmed);
+}
+
+function parseStringArrayText(value: string) {
+  try {
+    const parsed = parseJsonText(value);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((item): item is string => typeof item === 'string');
+  } catch {
+    return [];
+  }
+}
+
+function stringifyStringArray(values: string[]) {
+  const filtered = values.map((value) => value.trim()).filter(Boolean);
+  return filtered.length ? JSON.stringify(filtered, null, 2) : '';
+}
+
+function getPublicWebhookUrl(uuid: string, publicUrl?: string | null) {
+  if (publicUrl) return publicUrl;
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || '';
+  return `${baseUrl.replace(/\/+$/, '')}/webhook/${uuid}`;
+}
+
+export default function IntegrationsWebhooksPage() {
+  const t = useTranslations('core.IntegrationsWebhooksPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const pageSizeOptions = [6, 12, 24, 48] as const;
+
+  const catalog = usePagination({
+    url: '/integration-event-catalog',
+    paginationOptions: { pageSizeOptions },
+  });
+  const incoming = usePagination({
+    url: '/webhook-integration',
+    paginationOptions: { pageSizeOptions },
+  });
+  const eventWebhooks = usePagination({
+    url: '/event-webhook',
+    paginationOptions: { pageSizeOptions },
+  });
+
+  const [activeTab, setActiveTab] = useState('incoming');
+  const [catalogOpen, setCatalogOpen] = useState(false);
+  const [catalogEdit, setCatalogEdit] = useState<EventCatalog | null>(null);
+  const [catalogForm, setCatalogForm] = useState(defaultCatalogForm);
+
+  const [incomingOpen, setIncomingOpen] = useState(false);
+  const [incomingEdit, setIncomingEdit] = useState<IncomingIntegration | null>(
+    null
+  );
+  const [incomingForm, setIncomingForm] = useState(defaultIncomingForm);
+  const [incomingSheetTab, setIncomingSheetTab] = useState('settings');
+  const [oneTimeToken, setOneTimeToken] = useState<string | null>(null);
+  const [allowedIpDraft, setAllowedIpDraft] = useState('');
+  const [actionForm, setActionForm] = useState(defaultActionForm);
+  const [incomingLogsPage, setIncomingLogsPage] = useState(1);
+  const [incomingLogsPageSize, setIncomingLogsPageSize] = useState(12);
+
+  const [eventWebhookOpen, setEventWebhookOpen] = useState(false);
+  const [eventWebhookEdit, setEventWebhookEdit] = useState<EventWebhook | null>(
+    null
+  );
+  const [eventWebhookForm, setEventWebhookForm] = useState(
+    defaultEventWebhookForm
+  );
+
+  const [deleteTarget, setDeleteTarget] = useState<{
+    kind: 'catalog' | 'incoming' | 'eventWebhook' | 'action';
+    id: number;
+    parentId?: number;
+    name: string;
+  } | null>(null);
+
+  const { data: eventOptions = [], refetch: refetchEventOptions } = useQuery<
+    SelectOption[]
+  >({
+    queryKey: ['integration-event-catalog-options', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<SelectOption[]>({
+        url: '/integration-event-catalog/options',
+        method: 'GET',
+      });
+      return response.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: mailProfiles = [] } = useQuery<SelectOption[]>({
+    queryKey: ['webhook-mail-profiles', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: SelectOption[] }>({
+        url: '/mail-profile?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: mailTemplates = [] } = useQuery<SelectOption[]>({
+    queryKey: ['webhook-mail-templates', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: SelectOption[] }>({
+        url: '/mail?pageSize=100',
+        method: 'GET',
+      });
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: incomingLogsResult, isFetching: isFetchingIncomingLogs } =
+    useQuery<PaginatedResponse<IncomingCallLog>>({
+      queryKey: [
+        'incoming-webhook-logs',
+        incomingEdit?.id,
+        incomingLogsPage,
+        incomingLogsPageSize,
+      ],
+      queryFn: async () => {
+        if (!incomingEdit?.id) {
+          return {
+            data: [],
+            totalItems: 0,
+            currentPage: 1,
+            pageSize: incomingLogsPageSize,
+          };
+        }
+
+        const response = await request<PaginatedResponse<IncomingCallLog>>({
+          url: `/webhook-integration/${incomingEdit.id}/log?page=${incomingLogsPage}&pageSize=${incomingLogsPageSize}`,
+          method: 'GET',
+        });
+
+        return (
+          response.data || {
+            data: [],
+            totalItems: 0,
+            currentPage: 1,
+            pageSize: incomingLogsPageSize,
+          }
+        );
+      },
+      placeholderData: (previous) =>
+        previous || {
+          data: [],
+          totalItems: 0,
+          currentPage: 1,
+          pageSize: incomingLogsPageSize,
+        },
+    });
+
+  const stats = useMemo(
+    () => [
+      {
+        key: 'events',
+        title: t('statsEvents'),
+        value: catalog.totalItems,
+        icon: BookOpenText,
+        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      },
+      {
+        key: 'incoming',
+        title: t('statsIncoming'),
+        value: incoming.totalItems,
+        icon: Webhook,
+        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+      },
+      {
+        key: 'eventWebhooks',
+        title: t('statsEventWebhooks'),
+        value: eventWebhooks.totalItems,
+        icon: Send,
+        accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+      },
+    ],
+    [catalog.totalItems, incoming.totalItems, eventWebhooks.totalItems, t]
+  );
+  const allowedIpList = useMemo(
+    () => parseStringArrayText(incomingForm.allowed_ips),
+    [incomingForm.allowed_ips]
+  );
+  const incomingLogItems = incomingLogsResult?.data || [];
+  const incomingLogsTotalItems = incomingLogsResult?.totalItems || 0;
+
+  const openCatalogCreate = () => {
+    setCatalogEdit(null);
+    setCatalogForm(defaultCatalogForm);
+    setCatalogOpen(true);
+  };
+
+  const openCatalogEdit = (item: EventCatalog) => {
+    setCatalogEdit(item);
+    setCatalogForm({
+      slug: item.slug,
+      name: item.name,
+      module: item.module,
+      description: item.description || '',
+      status: item.status,
+    });
+    setCatalogOpen(true);
+  };
+
+  const saveCatalog = async () => {
+    try {
+      if (catalogEdit) {
+        await request({
+          url: `/integration-event-catalog/${catalogEdit.id}`,
+          method: 'PATCH',
+          data: catalogForm,
+        });
+        toast.success(t('updated'));
+      } else {
+        await request({
+          url: '/integration-event-catalog',
+          method: 'POST',
+          data: catalogForm,
+        });
+        toast.success(t('created'));
+      }
+      setCatalogOpen(false);
+      await Promise.all([catalog.refetch(), refetchEventOptions()]);
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
+  const openIncomingCreate = () => {
+    setIncomingEdit(null);
+    setIncomingSheetTab('settings');
+    setIncomingLogsPage(1);
+    setIncomingForm(defaultIncomingForm);
+    setOneTimeToken(null);
+    setAllowedIpDraft('');
+    setActionForm(defaultActionForm);
+    setIncomingOpen(true);
+  };
+
+  const openIncomingEdit = async (item: IncomingIntegration) => {
+    const response = await request<IncomingIntegration>({
+      url: `/webhook-integration/${item.id}`,
+      method: 'GET',
+    });
+    const data = response.data;
+    setIncomingEdit(data);
+    setIncomingForm({
+      slug: data.slug,
+      name: data.name,
+      description: data.description || '',
+      status: data.status,
+      require_token: data.require_token,
+      allowed_ips: stringifyJson(data.allowed_ips),
+      body_schema: stringifyJson(data.body_schema),
+    });
+    if (data.plainToken) {
+      setOneTimeToken(data.plainToken);
+    }
+    setAllowedIpDraft('');
+    setActionForm(defaultActionForm);
+    setIncomingSheetTab('settings');
+    setIncomingLogsPage(1);
+    setIncomingOpen(true);
+  };
+
+  const setAllowedIpList = (items: string[]) => {
+    setIncomingForm((current) => ({
+      ...current,
+      allowed_ips: stringifyStringArray(items),
+    }));
+  };
+
+  const addAllowedIp = () => {
+    const nextIp = allowedIpDraft.trim();
+    if (!nextIp) return;
+    setAllowedIpList([...allowedIpList, nextIp]);
+    setAllowedIpDraft('');
+  };
+
+  const updateAllowedIp = (index: number, value: string) => {
+    const items = [...allowedIpList];
+    items[index] = value;
+    setAllowedIpList(items);
+  };
+
+  const removeAllowedIp = (index: number) => {
+    setAllowedIpList(
+      allowedIpList.filter((_, itemIndex) => itemIndex !== index)
+    );
+  };
+
+  const saveIncoming = async () => {
+    try {
+      const payload = {
+        ...incomingForm,
+        allowed_ips: parseJsonText(incomingForm.allowed_ips),
+        body_schema: parseJsonText(incomingForm.body_schema),
+      };
+
+      const response = incomingEdit
+        ? await request<IncomingIntegration>({
+            url: `/webhook-integration/${incomingEdit.id}`,
+            method: 'PATCH',
+            data: payload,
+          })
+        : await request<IncomingIntegration>({
+            url: '/webhook-integration',
+            method: 'POST',
+            data: payload,
+          });
+
+      if (response.data.plainToken) {
+        setOneTimeToken(response.data.plainToken);
+        toast.success(t('tokenGenerated'));
+      } else {
+        toast.success(incomingEdit ? t('updated') : t('created'));
+      }
+
+      if (!incomingEdit) {
+        await openIncomingEdit(response.data);
+      }
+
+      await incoming.refetch();
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
+  const saveAction = async () => {
+    if (!incomingEdit) 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'));
+      setActionForm(defaultActionForm);
+      await openIncomingEdit(incomingEdit);
+      await incoming.refetch();
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
+  const regenerateUuid = async () => {
+    if (!incomingEdit) return;
+    const response = await request<IncomingIntegration>({
+      url: `/webhook-integration/${incomingEdit.id}/regenerate-uuid`,
+      method: 'POST',
+    });
+    toast.success(t('uuidRegenerated'));
+    await openIncomingEdit(response.data);
+    await incoming.refetch();
+  };
+
+  const regenerateToken = async () => {
+    if (!incomingEdit) return;
+    const response = await request<IncomingIntegration>({
+      url: `/webhook-integration/${incomingEdit.id}/regenerate-token`,
+      method: 'POST',
+    });
+    toast.success(
+      response.data.plainToken ? t('tokenGenerated') : t('tokenGenerated')
+    );
+    setOneTimeToken(response.data.plainToken || null);
+    await openIncomingEdit(response.data);
+    await incoming.refetch();
+  };
+
+  const openEventWebhookCreate = () => {
+    setEventWebhookEdit(null);
+    setEventWebhookForm(defaultEventWebhookForm);
+    setEventWebhookOpen(true);
+  };
+
+  const openEventWebhookEdit = async (item: EventWebhook) => {
+    const response = await request<EventWebhook>({
+      url: `/event-webhook/${item.id}`,
+      method: 'GET',
+    });
+    const data = response.data;
+    setEventWebhookEdit(data);
+    setEventWebhookForm({
+      slug: data.slug,
+      name: data.name,
+      description: data.description || '',
+      status: data.status,
+      priority: data.priority || 0,
+      url: data.url,
+      method: data.method || 'POST',
+      headers: stringifyJson(data.headers) || '{}',
+      query: stringifyJson(data.query) || '{}',
+      payload: stringifyJson(data.payload) || '{}',
+      timeout_ms: data.timeout_ms || 10000,
+      retry_count: data.retry_count || 0,
+      event_ids:
+        data.event_webhook_event?.map(
+          (row) => row.integration_event_catalog.id
+        ) || [],
+    });
+    setEventWebhookOpen(true);
+  };
+
+  const saveEventWebhook = async () => {
+    try {
+      const payload = {
+        ...eventWebhookForm,
+        headers: parseJsonText(eventWebhookForm.headers),
+        query: parseJsonText(eventWebhookForm.query),
+        payload: parseJsonText(eventWebhookForm.payload),
+      };
+
+      if (eventWebhookEdit) {
+        await request({
+          url: `/event-webhook/${eventWebhookEdit.id}`,
+          method: 'PATCH',
+          data: payload,
+        });
+        toast.success(t('updated'));
+      } else {
+        await request({
+          url: '/event-webhook',
+          method: 'POST',
+          data: payload,
+        });
+        toast.success(t('created'));
+      }
+      setEventWebhookOpen(false);
+      await eventWebhooks.refetch();
+    } catch {
+      toast.error(t('saveError'));
+    }
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteTarget) return;
+
+    try {
+      if (deleteTarget.kind === 'catalog') {
+        await request({
+          url: '/integration-event-catalog',
+          method: 'DELETE',
+          data: { ids: [deleteTarget.id] },
+        });
+        await Promise.all([catalog.refetch(), refetchEventOptions()]);
+      }
+      if (deleteTarget.kind === 'incoming') {
+        await request({
+          url: '/webhook-integration',
+          method: 'DELETE',
+          data: { ids: [deleteTarget.id] },
+        });
+        await incoming.refetch();
+      }
+      if (deleteTarget.kind === 'eventWebhook') {
+        await request({
+          url: '/event-webhook',
+          method: 'DELETE',
+          data: { ids: [deleteTarget.id] },
+        });
+        await eventWebhooks.refetch();
+      }
+      if (deleteTarget.kind === 'action' && deleteTarget.parentId) {
+        await request({
+          url: `/webhook-integration/${deleteTarget.parentId}/action`,
+          method: 'DELETE',
+          data: { ids: [deleteTarget.id] },
+        });
+        if (incomingEdit) {
+          await openIncomingEdit(incomingEdit);
+        }
+        await incoming.refetch();
+      }
+      toast.success(t('deleted'));
+      setDeleteTarget(null);
+    } catch {
+      toast.error(t('deleteError'));
+    }
+  };
+
+  const renderStatus = (status: Status) => (
+    <Badge variant="outline" className={statusClass[status]}>
+      {t(status)}
+    </Badge>
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbHome'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          activeTab === 'catalog'
+            ? {
+                label: t('newEvent'),
+                icon: <Plus className="h-4 w-4" />,
+                onClick: openCatalogCreate,
+              }
+            : activeTab === 'incoming'
+              ? {
+                  label: t('newIncoming'),
+                  icon: <Plus className="h-4 w-4" />,
+                  onClick: openIncomingCreate,
+                }
+              : {
+                  label: t('newEventWebhook'),
+                  icon: <Plus className="h-4 w-4" />,
+                  onClick: openEventWebhookCreate,
+                },
+        ]}
+      />
+
+      <KpiCardsGrid items={stats} />
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="incoming">
+            <Webhook className="h-4 w-4" />
+            {t('tabIncoming')}
+          </TabsTrigger>
+          <TabsTrigger value="eventWebhooks">
+            <Send className="h-4 w-4" />
+            {t('tabEventWebhooks')}
+          </TabsTrigger>
+          <TabsTrigger value="catalog">
+            <BookOpenText className="h-4 w-4" />
+            {t('tabCatalog')}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="catalog" className="space-y-4">
+          <SearchBar
+            searchQuery={catalog.search}
+            onSearchChange={(value) => {
+              catalog.setSearch(value);
+              catalog.setPage(1);
+            }}
+            onSearch={() => catalog.setPage(1)}
+            placeholder={t('searchEvents')}
+          />
+
+          {catalog.items.length === 0 ? (
+            <EmptyState
+              icon={<BookOpenText className="h-12 w-12" />}
+              title={t('emptyEvents')}
+              description={t('emptyEventsDescription')}
+              actionLabel={t('newEvent')}
+              onAction={openCatalogCreate}
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('eventName')}</TableHead>
+                    <TableHead>{t('module')}</TableHead>
+                    <TableHead>{t('descriptionColumn')}</TableHead>
+                    <TableHead>{t('status')}</TableHead>
+                    <TableHead>{t('updatedAt')}</TableHead>
+                    <TableHead className="text-right">{t('actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(catalog.items as EventCatalog[]).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openCatalogEdit(item)}
+                    >
+                      <TableCell>
+                        <div className="font-medium">{item.name}</div>
+                        <div className="font-mono text-xs text-muted-foreground">
+                          {item.slug}
+                        </div>
+                      </TableCell>
+                      <TableCell>{item.module}</TableCell>
+                      <TableCell className="max-w-md truncate">
+                        {item.description || '-'}
+                      </TableCell>
+                      <TableCell>{renderStatus(item.status)}</TableCell>
+                      <TableCell className="text-muted-foreground">
+                        {formatDate(
+                          item.updated_at,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openCatalogEdit(item)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setDeleteTarget({
+                              kind: 'catalog',
+                              id: item.id,
+                              name: item.name,
+                            })
+                          }
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+
+          <PaginationFooter
+            currentPage={catalog.page}
+            pageSize={catalog.pageSize}
+            totalItems={catalog.totalItems}
+            onPageChange={catalog.setPage}
+            onPageSizeChange={(size) => {
+              catalog.setPageSize(size);
+              catalog.setPage(1);
+            }}
+          />
+        </TabsContent>
+
+        <TabsContent value="incoming" className="space-y-4">
+          <SearchBar
+            searchQuery={incoming.search}
+            onSearchChange={(value) => {
+              incoming.setSearch(value);
+              incoming.setPage(1);
+            }}
+            onSearch={() => incoming.setPage(1)}
+            placeholder={t('searchIncoming')}
+          />
+
+          {incoming.items.length === 0 ? (
+            <EmptyState
+              icon={<Webhook className="h-12 w-12" />}
+              title={t('emptyIncoming')}
+              description={t('emptyIncomingDescription')}
+              actionLabel={t('newIncoming')}
+              onAction={openIncomingCreate}
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('name')}</TableHead>
+                    <TableHead>{t('publicUrl')}</TableHead>
+                    <TableHead>{t('security')}</TableHead>
+                    <TableHead>{t('actionsCount')}</TableHead>
+                    <TableHead>{t('status')}</TableHead>
+                    <TableHead className="text-right">{t('actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(incoming.items as IncomingIntegration[]).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openIncomingEdit(item)}
+                    >
+                      <TableCell>
+                        <div className="font-medium">{item.name}</div>
+                        <div className="font-mono text-xs text-muted-foreground">
+                          {item.slug}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex max-w-md items-center gap-2">
+                          <span className="truncate font-mono text-xs">
+                            {getPublicWebhookUrl(
+                              item.public_uuid,
+                              item.public_url
+                            )}
+                          </span>
+                          <CopyButton
+                            value={getPublicWebhookUrl(
+                              item.public_uuid,
+                              item.public_url
+                            )}
+                          />
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {item.require_token ? (
+                          <Badge variant="secondary">{t('token')}</Badge>
+                        ) : (
+                          <Badge variant="outline">{t('uuid')}</Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>{item.webhook_action?.length || 0}</TableCell>
+                      <TableCell>{renderStatus(item.status)}</TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openIncomingEdit(item)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setDeleteTarget({
+                              kind: 'incoming',
+                              id: item.id,
+                              name: item.name,
+                            })
+                          }
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+
+          <PaginationFooter
+            currentPage={incoming.page}
+            pageSize={incoming.pageSize}
+            totalItems={incoming.totalItems}
+            onPageChange={incoming.setPage}
+            onPageSizeChange={(size) => {
+              incoming.setPageSize(size);
+              incoming.setPage(1);
+            }}
+          />
+        </TabsContent>
+
+        <TabsContent value="eventWebhooks" className="space-y-4">
+          <SearchBar
+            searchQuery={eventWebhooks.search}
+            onSearchChange={(value) => {
+              eventWebhooks.setSearch(value);
+              eventWebhooks.setPage(1);
+            }}
+            onSearch={() => eventWebhooks.setPage(1)}
+            placeholder={t('searchEventWebhooks')}
+          />
+
+          {eventWebhooks.items.length === 0 ? (
+            <EmptyState
+              icon={<Send className="h-12 w-12" />}
+              title={t('emptyEventWebhooks')}
+              description={t('emptyEventWebhooksDescription')}
+              actionLabel={t('newEventWebhook')}
+              onAction={openEventWebhookCreate}
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('name')}</TableHead>
+                    <TableHead>{t('events')}</TableHead>
+                    <TableHead>{t('httpTarget')}</TableHead>
+                    <TableHead>{t('retry')}</TableHead>
+                    <TableHead>{t('status')}</TableHead>
+                    <TableHead className="text-right">{t('actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {(eventWebhooks.items as EventWebhook[]).map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openEventWebhookEdit(item)}
+                    >
+                      <TableCell>
+                        <div className="font-medium">{item.name}</div>
+                        <div className="font-mono text-xs text-muted-foreground">
+                          {item.slug}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {item.event_webhook_event?.map((row) => (
+                            <Badge
+                              key={row.integration_event_catalog.id}
+                              variant="secondary"
+                              className="font-mono text-xs"
+                            >
+                              {row.integration_event_catalog.slug}
+                            </Badge>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline">{item.method}</Badge>
+                          <span className="max-w-md truncate font-mono text-xs">
+                            {item.url}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>{item.retry_count}</TableCell>
+                      <TableCell>{renderStatus(item.status)}</TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openEventWebhookEdit(item)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            setDeleteTarget({
+                              kind: 'eventWebhook',
+                              id: item.id,
+                              name: item.name,
+                            })
+                          }
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+
+          <PaginationFooter
+            currentPage={eventWebhooks.page}
+            pageSize={eventWebhooks.pageSize}
+            totalItems={eventWebhooks.totalItems}
+            onPageChange={eventWebhooks.setPage}
+            onPageSizeChange={(size) => {
+              eventWebhooks.setPageSize(size);
+              eventWebhooks.setPage(1);
+            }}
+          />
+        </TabsContent>
+      </Tabs>
+
+      <Sheet open={catalogOpen} onOpenChange={setCatalogOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle>
+              {catalogEdit ? t('editEvent') : t('newEvent')}
+            </SheetTitle>
+            <SheetDescription>{t('eventFormDescription')}</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-4 px-3 pb-8 sm:px-4">
+            <Field label={t('eventName')}>
+              <Input
+                value={catalogForm.name}
+                onChange={(event) =>
+                  setCatalogForm({ ...catalogForm, name: event.target.value })
+                }
+              />
+            </Field>
+            <Field label={t('technicalName')}>
+              <Input
+                value={catalogForm.slug}
+                onChange={(event) =>
+                  setCatalogForm({ ...catalogForm, slug: event.target.value })
+                }
+                placeholder="module.entity.changed"
+              />
+            </Field>
+            <Field label={t('module')}>
+              <Input
+                value={catalogForm.module}
+                onChange={(event) =>
+                  setCatalogForm({ ...catalogForm, module: event.target.value })
+                }
+              />
+            </Field>
+            <Field label={t('descriptionColumn')}>
+              <Textarea
+                value={catalogForm.description}
+                onChange={(event) =>
+                  setCatalogForm({
+                    ...catalogForm,
+                    description: event.target.value,
+                  })
+                }
+              />
+            </Field>
+            <StatusSelect
+              value={catalogForm.status}
+              onValueChange={(status) =>
+                setCatalogForm({ ...catalogForm, status })
+              }
+              t={t}
+            />
+            <SheetActions
+              onSave={saveCatalog}
+              onCancel={() => setCatalogOpen(false)}
+              t={t}
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={incomingOpen}
+        onOpenChange={(open) => {
+          setIncomingOpen(open);
+          if (!open) {
+            setOneTimeToken(null);
+            setIncomingSheetTab('settings');
+            setIncomingLogsPage(1);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-5xl">
+          <SheetHeader>
+            <SheetTitle>
+              {incomingEdit ? t('editIncoming') : t('newIncoming')}
+            </SheetTitle>
+            <SheetDescription>{t('incomingFormDescription')}</SheetDescription>
+          </SheetHeader>
+          <Tabs
+            value={incomingSheetTab}
+            onValueChange={setIncomingSheetTab}
+            className="mt-4"
+          >
+            <div className="px-3 sm:px-4">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="settings">
+                  <Webhook className="mr-2 h-4 w-4" />
+                  {t('incomingSheetTabSettings')}
+                </TabsTrigger>
+                <TabsTrigger value="logs" disabled={!incomingEdit}>
+                  <Clock3 className="mr-2 h-4 w-4" />
+                  {t('incomingSheetTabLogs')}
+                </TabsTrigger>
+              </TabsList>
+            </div>
+            <TabsContent value="settings" className="mt-0">
+              <div className="space-y-6 px-3 pb-8 sm:px-4">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field label={t('name')}>
+                    <Input
+                      value={incomingForm.name}
+                      onChange={(event) =>
+                        setIncomingForm({
+                          ...incomingForm,
+                          name: event.target.value,
+                        })
+                      }
+                    />
+                  </Field>
+                  <Field label={t('technicalName')}>
+                    <Input
+                      value={incomingForm.slug}
+                      onChange={(event) =>
+                        setIncomingForm({
+                          ...incomingForm,
+                          slug: event.target.value,
+                        })
+                      }
+                    />
+                  </Field>
+                </div>
+                <Field label={t('descriptionColumn')}>
+                  <Textarea
+                    value={incomingForm.description}
+                    onChange={(event) =>
+                      setIncomingForm({
+                        ...incomingForm,
+                        description: event.target.value,
+                      })
+                    }
+                  />
+                </Field>
+                <div className="grid gap-4 md:grid-cols-3">
+                  <StatusSelect
+                    value={incomingForm.status}
+                    onValueChange={(status) =>
+                      setIncomingForm({ ...incomingForm, status })
+                    }
+                    t={t}
+                  />
+                  <div className="flex items-center justify-between rounded-md border px-4 py-3 md:col-span-2">
+                    <div>
+                      <p className="text-sm font-medium">{t('requireToken')}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('requireTokenHelp')}
+                      </p>
+                    </div>
+                    <Switch
+                      checked={incomingForm.require_token}
+                      onCheckedChange={(checked) =>
+                        setIncomingForm({
+                          ...incomingForm,
+                          require_token: checked,
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+                {oneTimeToken ? (
+                  <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-4">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="min-w-0 space-y-1">
+                        <Label>{t('oneTimeTokenTitle')}</Label>
+                        <p className="text-xs text-muted-foreground">
+                          {t('oneTimeTokenDescription')}
+                        </p>
+                        <div className="mt-2 flex min-w-0 items-center gap-2 rounded-md border bg-background px-3 py-2">
+                          <code className="min-w-0 flex-1 truncate text-xs">
+                            {oneTimeToken}
+                          </code>
+                          <CopyButton
+                            value={oneTimeToken}
+                            className="h-7 w-7"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : incomingForm.require_token ? (
+                  <div className="rounded-md border p-4">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <div>
+                        <Label>{t('tokenConfiguredTitle')}</Label>
+                        <p className="text-xs text-muted-foreground">
+                          {incomingEdit
+                            ? t('tokenConfiguredDescription')
+                            : t('tokenWillBeCreatedDescription')}
+                        </p>
+                      </div>
+                      {incomingEdit ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={regenerateToken}
+                        >
+                          <RotateCcw className="mr-2 h-4 w-4" />
+                          {t('regenerateToken')}
+                        </Button>
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field label={t('allowedIps')}>
+                    <div className="space-y-3">
+                      <div className="rounded-md border">
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead>{t('ipAddress')}</TableHead>
+                              <TableHead className="w-18 text-right">
+                                {t('actions')}
+                              </TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {allowedIpList.length === 0 ? (
+                              <TableRow>
+                                <TableCell
+                                  colSpan={2}
+                                  className="h-16 text-center text-sm text-muted-foreground"
+                                >
+                                  {t('emptyAllowedIps')}
+                                </TableCell>
+                              </TableRow>
+                            ) : (
+                              allowedIpList.map((ip, index) => (
+                                <TableRow key={`${ip}-${index}`}>
+                                  <TableCell>
+                                    <Input
+                                      value={ip}
+                                      onChange={(event) =>
+                                        updateAllowedIp(
+                                          index,
+                                          event.target.value
+                                        )
+                                      }
+                                      placeholder="127.0.0.1"
+                                    />
+                                  </TableCell>
+                                  <TableCell className="text-right">
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      onClick={() => removeAllowedIp(index)}
+                                    >
+                                      <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                  </TableCell>
+                                </TableRow>
+                              ))
+                            )}
+                          </TableBody>
+                        </Table>
+                      </div>
+                      <div className="flex gap-2">
+                        <Input
+                          value={allowedIpDraft}
+                          onChange={(event) =>
+                            setAllowedIpDraft(event.target.value)
+                          }
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              addAllowedIp();
+                            }
+                          }}
+                          placeholder="127.0.0.1"
+                        />
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={addAllowedIp}
+                        >
+                          <Plus className="mr-2 h-4 w-4" />
+                          {t('addIp')}
+                        </Button>
+                      </div>
+                    </div>
+                  </Field>
+                  <Field label={t('bodySchema')}>
+                    <Textarea
+                      value={incomingForm.body_schema}
+                      onChange={(event) =>
+                        setIncomingForm({
+                          ...incomingForm,
+                          body_schema: event.target.value,
+                        })
+                      }
+                      placeholder='{"type":"object"}'
+                    />
+                  </Field>
+                </div>
+                {incomingEdit && (
+                  <div className="rounded-md border p-4">
+                    <div className="mb-3 flex items-center justify-between gap-3">
+                      <div className="min-w-0">
+                        <Label>{t('publicUrl')}</Label>
+                        <div className="mt-1 flex items-center gap-2">
+                          <span className="truncate font-mono text-xs">
+                            {getPublicWebhookUrl(
+                              incomingEdit.public_uuid,
+                              incomingEdit.public_url
+                            )}
+                          </span>
+                          <CopyButton
+                            value={getPublicWebhookUrl(
+                              incomingEdit.public_uuid,
+                              incomingEdit.public_url
+                            )}
+                          />
+                        </div>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={regenerateUuid}
+                        >
+                          <RotateCcw className="mr-2 h-4 w-4" />
+                          {t('regenerateUuid')}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                <SheetActions
+                  onSave={saveIncoming}
+                  onCancel={() => setIncomingOpen(false)}
+                  t={t}
+                />
+
+                {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">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>{t('name')}</TableHead>
+                            <TableHead>{t('actionType')}</TableHead>
+                            <TableHead>{t('order')}</TableHead>
+                            <TableHead className="text-right">
+                              {t('actions')}
+                            </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={() =>
+                                    setDeleteTarget({
+                                      kind: 'action',
+                                      id: action.id,
+                                      parentId: incomingEdit.id,
+                                      name: action.name,
+                                    })
+                                  }
+                                >
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent
+              value="logs"
+              className="mt-0 space-y-4 px-3 pb-8 sm:px-4"
+            >
+              {!incomingEdit ? (
+                <EmptyState
+                  icon={<Clock3 className="h-12 w-12" />}
+                  title={t('emptyIncomingLogs')}
+                  description={t('emptyIncomingLogsDescription')}
+                />
+              ) : incomingLogItems.length === 0 ? (
+                <EmptyState
+                  icon={<Clock3 className="h-12 w-12" />}
+                  title={t('emptyIncomingLogs')}
+                  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}
+
+                      {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>
+              )}
+
+              <PaginationFooter
+                currentPage={incomingLogsPage}
+                pageSize={incomingLogsPageSize}
+                totalItems={incomingLogsTotalItems}
+                onPageChange={setIncomingLogsPage}
+                onPageSizeChange={(size) => {
+                  setIncomingLogsPageSize(size);
+                  setIncomingLogsPage(1);
+                }}
+              />
+
+              {isFetchingIncomingLogs ? (
+                <p className="text-xs text-muted-foreground">
+                  {t('incomingLogsLoading')}
+                </p>
+              ) : null}
+            </TabsContent>
+          </Tabs>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={eventWebhookOpen} onOpenChange={setEventWebhookOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-5xl">
+          <SheetHeader>
+            <SheetTitle>
+              {eventWebhookEdit ? t('editEventWebhook') : t('newEventWebhook')}
+            </SheetTitle>
+            <SheetDescription>
+              {t('eventWebhookFormDescription')}
+            </SheetDescription>
+          </SheetHeader>
+          <div className="space-y-5 px-3 pb-8 sm:px-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <Field label={t('name')}>
+                <Input
+                  value={eventWebhookForm.name}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      name: event.target.value,
+                    })
+                  }
+                />
+              </Field>
+              <Field label={t('technicalName')}>
+                <Input
+                  value={eventWebhookForm.slug}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      slug: event.target.value,
+                    })
+                  }
+                />
+              </Field>
+            </div>
+            <Field label={t('events')}>
+              <div className="grid max-h-52 gap-2 overflow-y-auto rounded-md border p-3 md:grid-cols-2">
+                {eventOptions.map((event) => {
+                  const checked = eventWebhookForm.event_ids.includes(event.id);
+                  return (
+                    <label
+                      key={event.id}
+                      className="flex cursor-pointer items-start gap-2 rounded-md p-2 hover:bg-muted"
+                    >
+                      <Checkbox
+                        checked={checked}
+                        onCheckedChange={(nextChecked) => {
+                          setEventWebhookForm({
+                            ...eventWebhookForm,
+                            event_ids: nextChecked
+                              ? [...eventWebhookForm.event_ids, event.id]
+                              : eventWebhookForm.event_ids.filter(
+                                  (id) => id !== event.id
+                                ),
+                          });
+                        }}
+                      />
+                      <span>
+                        <span className="block font-mono text-xs">
+                          {event.slug}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {event.module}
+                        </span>
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            </Field>
+            <div className="grid gap-4 md:grid-cols-[160px_1fr]">
+              <Field label={t('method')}>
+                <Select
+                  value={eventWebhookForm.method}
+                  onValueChange={(method) =>
+                    setEventWebhookForm({ ...eventWebhookForm, method })
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map((method) => (
+                      <SelectItem key={method} value={method}>
+                        {method}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t('url')}>
+                <Input
+                  value={eventWebhookForm.url}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      url: event.target.value,
+                    })
+                  }
+                  placeholder="https://api.example.com/webhook"
+                />
+              </Field>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              <StatusSelect
+                value={eventWebhookForm.status}
+                onValueChange={(status) =>
+                  setEventWebhookForm({ ...eventWebhookForm, status })
+                }
+                t={t}
+              />
+              <Field label={t('timeout')}>
+                <Input
+                  type="number"
+                  value={eventWebhookForm.timeout_ms}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      timeout_ms: Number(event.target.value),
+                    })
+                  }
+                />
+              </Field>
+              <Field label={t('retry')}>
+                <Input
+                  type="number"
+                  value={eventWebhookForm.retry_count}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      retry_count: Number(event.target.value),
+                    })
+                  }
+                />
+              </Field>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              <Field label={t('headers')}>
+                <Textarea
+                  className="min-h-48 font-mono text-xs"
+                  value={eventWebhookForm.headers}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      headers: event.target.value,
+                    })
+                  }
+                />
+              </Field>
+              <Field label={t('query')}>
+                <Textarea
+                  className="min-h-48 font-mono text-xs"
+                  value={eventWebhookForm.query}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      query: event.target.value,
+                    })
+                  }
+                />
+              </Field>
+              <Field label={t('payload')}>
+                <Textarea
+                  className="min-h-48 font-mono text-xs"
+                  value={eventWebhookForm.payload}
+                  onChange={(event) =>
+                    setEventWebhookForm({
+                      ...eventWebhookForm,
+                      payload: event.target.value,
+                    })
+                  }
+                />
+              </Field>
+            </div>
+            <SheetActions
+              onSave={saveEventWebhook}
+              onCancel={() => setEventWebhookOpen(false)}
+              t={t}
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={Boolean(deleteTarget)}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDescription', { name: deleteTarget?.name || '' })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <Label>{label}</Label>
+      {children}
+    </div>
+  );
+}
+
+function StatusSelect({
+  value,
+  onValueChange,
+  t,
+}: {
+  value: Status;
+  onValueChange: (value: Status) => void;
+  t: (key: string) => string;
+}) {
+  return (
+    <Field label={t('status')}>
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="active">{t('active')}</SelectItem>
+          <SelectItem value="inactive">{t('inactive')}</SelectItem>
+        </SelectContent>
+      </Select>
+    </Field>
+  );
+}
+
+function SheetActions({
+  onSave,
+  onCancel,
+  t,
+}: {
+  onSave: () => void;
+  onCancel: () => void;
+  t: (key: string) => string;
+}) {
+  return (
+    <div className="flex justify-end gap-3 border-t pt-4">
+      <Button variant="outline" onClick={onCancel}>
+        {t('cancel')}
+      </Button>
+      <Button onClick={onSave}>{t('save')}</Button>
+    </div>
+  );
+}