diff --git a/apps/web/src/app/(dashboard)/emails/email-details.tsx b/apps/web/src/app/(dashboard)/emails/email-details.tsx
index 1fc45e8a..f5bbedbf 100644
--- a/apps/web/src/app/(dashboard)/emails/email-details.tsx
+++ b/apps/web/src/app/(dashboard)/emails/email-details.tsx
@@ -19,7 +19,7 @@ import {
BOUNCE_ERROR_MESSAGES,
COMPLAINT_ERROR_MESSAGES,
DELIVERY_DELAY_ERRORS,
-} from "~/lib/constants/ses-errors";
+} from "@usesend/lib/src/constants/ses-errors";
import CancelEmail from "./cancel-email";
import { useEffect } from "react";
import { useState } from "react";
@@ -75,7 +75,7 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
diff --git a/apps/web/src/app/(dashboard)/webhooks/[webhookId]/page.tsx b/apps/web/src/app/(dashboard)/webhooks/[webhookId]/page.tsx
new file mode 100644
index 00000000..4d588dd5
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/webhooks/[webhookId]/page.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import { use, useState, useEffect } from "react";
+import Link from "next/link";
+import { api } from "~/trpc/react";
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from "@usesend/ui/src/breadcrumb";
+import { Button } from "@usesend/ui/src/button";
+import {
+ Edit3,
+ Key,
+ MoreVertical,
+ Pause,
+ Play,
+ TestTube,
+ CircleEllipsis,
+} from "lucide-react";
+import { toast } from "@usesend/ui/src/toaster";
+import { WebhookInfo } from "./webhook-info";
+import { WebhookCallsTable } from "./webhook-calls-table";
+import { WebhookCallDetails } from "./webhook-call-details";
+import { DeleteWebhook } from "../delete-webhook";
+import { EditWebhookDialog } from "../webhook-update-dialog";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@usesend/ui/src/popover";
+import { type Webhook } from "@prisma/client";
+
+function WebhookDetailActions({
+ webhook,
+ onTest,
+ onEdit,
+ onToggleStatus,
+ onRotateSecret,
+ isTestPending,
+ isToggling,
+ isRotating,
+}: {
+ webhook: Webhook;
+ onTest: () => void;
+ onEdit: () => void;
+ onToggleStatus: () => void;
+ onRotateSecret: () => void;
+ isTestPending: boolean;
+ isToggling: boolean;
+ isRotating: boolean;
+}) {
+ const [open, setOpen] = useState(false);
+ const isPaused = webhook.status === "PAUSED";
+ const isAutoDisabled = webhook.status === "AUTO_DISABLED";
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function WebhookDetailPage({
+ params,
+}: {
+ params: Promise<{ webhookId: string }>;
+}) {
+ const { webhookId } = use(params);
+ const [selectedCallId, setSelectedCallId] = useState
(null);
+ const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+ const webhookQuery = api.webhook.getById.useQuery({ id: webhookId });
+ const testWebhook = api.webhook.test.useMutation();
+ const setStatusMutation = api.webhook.setStatus.useMutation();
+ const updateWebhook = api.webhook.update.useMutation();
+ const callsQuery = api.webhook.listCalls.useQuery({
+ webhookId,
+ limit: 50,
+ });
+ const utils = api.useUtils();
+
+ const webhook = webhookQuery.data;
+
+ useEffect(() => {
+ if (!selectedCallId && callsQuery.data?.items.length) {
+ setSelectedCallId(callsQuery.data.items[0]!.id);
+ }
+ }, [callsQuery.data, selectedCallId]);
+
+ const handleTest = () => {
+ testWebhook.mutate(
+ { id: webhookId },
+ {
+ onSuccess: async () => {
+ await utils.webhook.listCalls.invalidate();
+ toast.success("Test webhook enqueued");
+ },
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ },
+ );
+ };
+
+ const handleToggleStatus = (currentStatus: string) => {
+ const newStatus = currentStatus === "ACTIVE" ? "PAUSED" : "ACTIVE";
+ setStatusMutation.mutate(
+ { id: webhookId, status: newStatus },
+ {
+ onSuccess: async () => {
+ await utils.webhook.getById.invalidate();
+ toast.success(
+ `Webhook ${newStatus === "ACTIVE" ? "resumed" : "paused"}`,
+ );
+ },
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ },
+ );
+ };
+
+ const handleRotateSecret = () => {
+ updateWebhook.mutate(
+ { id: webhookId, rotateSecret: true },
+ {
+ onSuccess: async () => {
+ await utils.webhook.getById.invalidate();
+ toast.success("Secret rotated successfully");
+ },
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ },
+ );
+ };
+
+ if (webhookQuery.isLoading) {
+ return (
+
+ );
+ }
+
+ if (!webhook) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ Webhooks
+
+
+
+
+
+
+ {webhook.url}
+
+
+
+
+
+ setIsEditDialogOpen(true)}
+ onToggleStatus={() => handleToggleStatus(webhook.status)}
+ onRotateSecret={handleRotateSecret}
+ isTestPending={testWebhook.isPending}
+ isToggling={setStatusMutation.isPending}
+ isRotating={updateWebhook.isPending}
+ />
+
+
+
+
+
+
+
+
+
+
+ {selectedCallId ? (
+
+ ) : (
+
+ Select a webhook call to view details
+
+ )}
+
+
+
+ {isEditDialogOpen && (
+
+ )}
+
+
+
Call Details
+
+
+
+ Loading call details...
+
+
+
+
+
Call Details
+ {call.status === "FAILED" && (
+
+ )}
+
+
+
+
+
+
+
+ Event Type
+
+ {call.type}
+
+
+
+
+ Timestamp
+
+
+ {formatDate(call.createdAt, "MMM dd, yyyy HH:mm:ss")}
+
+
+
+
+
+ Attempt
+
+ {call.attempt}
+
+
+ {call.responseStatus && (
+
+
+ Response Status
+
+ {call.responseStatus}
+
+ )}
+
+ {call.responseTimeMs != null && (
+
+
+ Duration
+
+ {call.responseTimeMs}ms
+
+ )}
+
+
+ {call.lastError && (
+
+
+ Error
+
+
+ {call.lastError}
+
+
+ )}
+
+
+
Request Payload
+
+
+
+ {call.responseText && (
+ <>
+
+
Response Body
+
+
+
+ )}
+
+
+
+
Delivery Logs
+
+
+
+
+
+
+ Status
+ Event Type
+ Time
+
+
+
+
+
+
+ {callsQuery.isLoading ? (
+
+
+
+
+
+ ) : calls.length === 0 ? (
+
+
+
+ No webhook calls yet
+
+
+
+ ) : (
+ calls.map((call) => (
+ onSelectCall(call.id)}
+ >
+
+
+
+
+
+
+ {call.type}
+
+
+ {formatDistanceToNow(call.createdAt, {
+ addSuffix: true,
+ })}
+
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+
+
+
Events
+
+ {webhook.eventTypes.length === 0 ? (
+ All events
+ ) : (
+ <>
+ {webhook.eventTypes.slice(0, 2).map((event) => (
+
+ {event}
+
+ ))}
+ {webhook.eventTypes.length > 2 && (
+
+ +{webhook.eventTypes.length - 2} more
+
+ )}
+
+ )}
+
+
+
+
+
+ Created
+
+ {formatDistanceToNow(webhook.createdAt, { addSuffix: true })}
+
+
+
+
+
+
Signing Secret
+
+
+
+
+
+
+ {showSecret ? webhook.secret : "whsec_••••••••••••••••••••••••"}
+
+
+
+
{title}
+
+
+ {displayContent}
+
+
+
+ {label}
+
+ );
+}
diff --git a/apps/web/src/app/(dashboard)/webhooks/webhook-list.tsx b/apps/web/src/app/(dashboard)/webhooks/webhook-list.tsx
new file mode 100644
index 00000000..11c6ab2d
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/webhooks/webhook-list.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@usesend/ui/src/table";
+import Spinner from "@usesend/ui/src/spinner";
+import { api } from "~/trpc/react";
+import { formatDistanceToNow } from "date-fns";
+import { Edit3, MoreVertical, Pause, Play } from "lucide-react";
+import { Button } from "@usesend/ui/src/button";
+import { toast } from "@usesend/ui/src/toaster";
+import { DeleteWebhook } from "./delete-webhook";
+import { useState } from "react";
+import { EditWebhookDialog } from "./webhook-update-dialog";
+import { useRouter } from "next/navigation";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@usesend/ui/src/popover";
+import { type Webhook } from "@prisma/client";
+import { WebhookStatusBadge } from "./webhook-status-badge";
+
+export function WebhookList() {
+ const webhooksQuery = api.webhook.list.useQuery();
+ const testWebhook = api.webhook.test.useMutation();
+ const setStatusMutation = api.webhook.setStatus.useMutation();
+ const utils = api.useUtils();
+ const router = useRouter();
+ const [editingId, setEditingId] = useState(null);
+
+ const webhooks = webhooksQuery.data ?? [];
+
+ async function handleToggleStatus(webhookId: string, currentStatus: string) {
+ const newStatus = currentStatus === "ACTIVE" ? "PAUSED" : "ACTIVE";
+ setStatusMutation.mutate(
+ { id: webhookId, status: newStatus },
+ {
+ onSuccess: async () => {
+ await utils.webhook.list.invalidate();
+ toast.success(
+ `Webhook ${newStatus === "ACTIVE" ? "resumed" : "paused"}`,
+ );
+ },
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ },
+ );
+ }
+
+ return (
+
+
+
+
+
+ URL
+ Status
+ Last success
+ Last failure
+
+ Actions
+
+
+
+
+ {webhooksQuery.isLoading ? (
+
+
+
+
+
+ ) : webhooks.length === 0 ? (
+
+
+ No webhooks configured
+
+
+ ) : (
+ webhooks.map((webhook) => (
+ router.push(`/webhooks/${webhook.id}`)}
+ >
+
+ {webhook.url}
+
+
+
+
+
+ {webhook.lastSuccessAt
+ ? formatDistanceToNow(webhook.lastSuccessAt, {
+ addSuffix: true,
+ })
+ : "Never"}
+
+
+ {webhook.lastFailureAt
+ ? formatDistanceToNow(webhook.lastFailureAt, {
+ addSuffix: true,
+ })
+ : "Never"}
+
+
+ e.stopPropagation()}
+ >
+ setEditingId(webhook.id)}
+ onToggleStatus={() =>
+ handleToggleStatus(webhook.id, webhook.status)
+ }
+ isToggling={setStatusMutation.isPending}
+ />
+
+ {editingId === webhook.id ? (
+
+ setEditingId(open ? webhook.id : null)
+ }
+ />
+ ) : null}
+
+
+ ))
+ )}
+
+
+
+
+
+
+
+
+ {label}
+
+ );
+}
diff --git a/apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx b/apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx
new file mode 100644
index 00000000..1705107c
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/webhooks/webhook-update-dialog.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@usesend/ui/src/dialog";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@usesend/ui/src/form";
+import { Input } from "@usesend/ui/src/input";
+import { Button } from "@usesend/ui/src/button";
+import { ChevronDown } from "lucide-react";
+import { api } from "~/trpc/react";
+import {
+ ContactEvents,
+ DomainEvents,
+ EmailEvents,
+ WebhookEvents,
+ type WebhookEventType,
+} from "@usesend/lib/src/webhook/webhook-events";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@usesend/ui/src/dropdown-menu";
+import { toast } from "@usesend/ui/src/toaster";
+import type { Webhook } from "@prisma/client";
+
+const EVENT_TYPES_ENUM = z.enum(WebhookEvents);
+
+const editWebhookSchema = z.object({
+ url: z
+ .string({ required_error: "URL is required" })
+ .url("Please enter a valid URL"),
+ eventTypes: z.array(EVENT_TYPES_ENUM, {
+ required_error: "Select at least one event",
+ }),
+});
+
+type EditWebhookFormValues = z.infer;
+
+const eventGroups: {
+ label: string;
+ events: readonly WebhookEventType[];
+}[] = [
+ { label: "Contact events", events: ContactEvents },
+ { label: "Domain events", events: DomainEvents },
+ { label: "Email events", events: EmailEvents },
+];
+
+export function EditWebhookDialog({
+ webhook,
+ open,
+ onOpenChange,
+}: {
+ webhook: Webhook;
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}) {
+ const updateWebhook = api.webhook.update.useMutation();
+ const utils = api.useUtils();
+ const initialHasAllEvents =
+ (webhook.eventTypes as WebhookEventType[]).length === 0;
+ const [allEventsSelected, setAllEventsSelected] =
+ useState(initialHasAllEvents);
+
+ const form = useForm({
+ resolver: zodResolver(editWebhookSchema),
+ defaultValues: {
+ url: webhook.url,
+ eventTypes: initialHasAllEvents
+ ? []
+ : (webhook.eventTypes as WebhookEventType[]),
+ },
+ });
+
+ useEffect(() => {
+ if (open) {
+ const hasAllEvents =
+ (webhook.eventTypes as WebhookEventType[]).length === 0;
+ form.reset({
+ url: webhook.url,
+ eventTypes: hasAllEvents
+ ? []
+ : (webhook.eventTypes as WebhookEventType[]),
+ });
+ setAllEventsSelected(hasAllEvents);
+ }
+ }, [open, webhook, form]);
+
+ function handleSubmit(values: EditWebhookFormValues) {
+ const selectedEvents = values.eventTypes ?? [];
+
+ if (!allEventsSelected && selectedEvents.length === 0) {
+ toast.error("Select at least one event or all events");
+ return;
+ }
+
+ updateWebhook.mutate(
+ {
+ id: webhook.id,
+ url: values.url,
+ eventTypes: allEventsSelected ? [] : selectedEvents,
+ },
+ {
+ onSuccess: async () => {
+ await utils.webhook.list.invalidate();
+ await utils.webhook.getById.invalidate({ id: webhook.id });
+ toast.success("Webhook updated");
+ onOpenChange(false);
+ },
+ onError: (error) => {
+ toast.error(error.message);
+ },
+ },
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/components/AppSideBar.tsx b/apps/web/src/components/AppSideBar.tsx
index 47bf9f8e..751d6693 100644
--- a/apps/web/src/components/AppSideBar.tsx
+++ b/apps/web/src/components/AppSideBar.tsx
@@ -17,6 +17,7 @@ import {
UsersIcon,
GaugeIcon,
UserRoundX,
+ Webhook,
} from "lucide-react";
import { signOut } from "next-auth/react";
@@ -98,6 +99,11 @@ const settingsItems = [
url: "/domains",
icon: Globe,
},
+ {
+ title: "Webhooks",
+ url: "/webhooks",
+ icon: Webhook,
+ },
{
title: "Developer settings",
url: "/dev-settings",
diff --git a/apps/web/src/components/code-display.tsx b/apps/web/src/components/code-display.tsx
new file mode 100644
index 00000000..d9b1c509
--- /dev/null
+++ b/apps/web/src/components/code-display.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BundledLanguage, codeToHtml } from "shiki";
+import { Check, Copy } from "lucide-react";
+import { Button } from "@usesend/ui/src/button";
+
+interface CodeDisplayProps {
+ code: string;
+ language?: BundledLanguage;
+ className?: string;
+ maxHeight?: string;
+}
+
+export function CodeDisplay({
+ code,
+ language = "json",
+ className = "",
+ maxHeight = "300px",
+}: CodeDisplayProps) {
+ const [html, setHtml] = useState("");
+ const [isLoading, setIsLoading] = useState(true);
+ const [copied, setCopied] = useState(false);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ async function highlight() {
+ try {
+ const highlighted = await codeToHtml(code, {
+ lang: language,
+ themes: {
+ dark: "catppuccin-mocha",
+ light: "catppuccin-latte",
+ },
+ decorations: [],
+ cssVariablePrefix: "--shiki-",
+ });
+
+ if (isMounted) {
+ setHtml(highlighted);
+ setIsLoading(false);
+ }
+ } catch (error) {
+ console.error("Failed to highlight code:", error);
+ if (isMounted) {
+ setIsLoading(false);
+ }
+ }
+ }
+
+ highlight();
+
+ return () => {
+ isMounted = false;
+ };
+ }, [code, language]);
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ console.error("Failed to copy to clipboard:", error);
+ }
+ };
+
+ if (isLoading) {
+ return (
+
+
+
+ {code}
+
+