@hed-hog/core 0.0.325 → 0.0.326

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

@@ -0,0 +1,1835 @@
+'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>
+  );
+}