-
+
+
+
+
-
-
{title}
-
{message}
+
+
- {/* Actions */}
-
+
-
);
-}
\ No newline at end of file
+}
diff --git a/src/features/Webhooks/v1/Webhook.types.ts b/src/features/Webhooks/v1/Webhook.types.ts
new file mode 100644
index 0000000..2abf034
--- /dev/null
+++ b/src/features/Webhooks/v1/Webhook.types.ts
@@ -0,0 +1,75 @@
+export type WebhookEvent =
+ | "member.created"
+ | "member.activated"
+ | "event.created"
+ | "hackathon.created"
+ | "github.push"
+ | "github.pr.opened";
+
+export type WebhookStatus = "active" | "inactive";
+
+export interface Webhook {
+ id: string;
+ name: string;
+ url: string;
+ events: WebhookEvent[];
+ status: WebhookStatus;
+ secret: string; // Typically masked like ********abcd
+ permissions?: string[];
+ lastDeliveryStatus?: "success" | "failed" | "pending";
+ lastTestedAt?: string;
+ lastTestStatus?: "success" | "failed";
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface WebhookLog {
+ id: string;
+ webhookId: string;
+ event: WebhookEvent;
+ status: "success" | "failed";
+ timestamp: string;
+ responseCode: number;
+ requestPayload: unknown;
+ responsePayload: unknown;
+}
+
+export interface CreateWebhookPayload {
+ name: string;
+ url: string;
+ events: WebhookEvent[];
+ secret?: string;
+ permissions?: string[];
+}
+
+export interface UpdateWebhookPayload {
+ name?: string;
+ url?: string;
+ events?: WebhookEvent[];
+ status?: WebhookStatus;
+ secret?: string;
+}
+
+export interface WebhookFilters {
+ status: WebhookStatus | "all";
+ search: string;
+ page: number;
+}
+
+export interface PaginatedWebhooks {
+ data: Webhook[];
+ total: number;
+ totalPages: number;
+}
+
+export interface WebhookLogFilters {
+ status: "all" | "success" | "failed";
+ event: WebhookEvent | "all";
+ page: number;
+}
+
+export interface PaginatedWebhookLogs {
+ data: WebhookLog[];
+ total: number;
+ totalPages: number;
+}
diff --git a/src/features/Webhooks/v1/components/common/MaskedSecret.tsx b/src/features/Webhooks/v1/components/common/MaskedSecret.tsx
new file mode 100644
index 0000000..572b620
--- /dev/null
+++ b/src/features/Webhooks/v1/components/common/MaskedSecret.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Eye, EyeOff, Copy, Check } from "lucide-react";
+
+export default function MaskedSecret({ secret }: { secret: string }) {
+ const [show, setShow] = useState(false);
+ const [copied, setCopied] = useState(false);
+
+ const displaySecret = show ? secret : secret.replace(/./g, "•");
+
+ const copyToClipboard = () => {
+ navigator.clipboard.writeText(secret);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+
+ {displaySecret}
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/Webhooks/v1/components/common/StatusBadge.tsx b/src/features/Webhooks/v1/components/common/StatusBadge.tsx
new file mode 100644
index 0000000..b69430b
--- /dev/null
+++ b/src/features/Webhooks/v1/components/common/StatusBadge.tsx
@@ -0,0 +1,18 @@
+import { WebhookStatus } from "../../Webhook.types";
+
+export default function StatusBadge({ status, className = "" }: { status: WebhookStatus; className?: string }) {
+ const isAct = status === "active";
+ return (
+
+
+ {isAct ? "Active" : "Inactive"}
+
+ );
+}
diff --git a/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
new file mode 100644
index 0000000..baf3e47
--- /dev/null
+++ b/src/features/Webhooks/v1/components/form/WebhookForm.test.tsx
@@ -0,0 +1,73 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import WebhookForm from "./WebhookForm";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// Mock the hooks
+vi.mock("../../hooks/useWebhooks", () => ({
+ useCreateWebhook: () => ({ mutateAsync: vi.fn().mockResolvedValue({}), isPending: false }),
+ useUpdateWebhook: () => ({ mutateAsync: vi.fn().mockResolvedValue({}), isPending: false }),
+}));
+
+vi.mock("@/features/Tasks/v1/components/common/ToastNotification", () => ({
+ useToast: () => ({ addToast: vi.fn() }),
+}));
+
+const queryClient = new QueryClient();
+
+const renderWithProviders = (ui: React.ReactElement) => {
+ return render(
+
+ {ui}
+
+ );
+};
+
+describe("WebhookForm Component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders correctly in create mode", () => {
+ renderWithProviders(
);
+ expect(screen.getByText("Endpoint Details")).toBeInTheDocument();
+ expect(screen.getByPlaceholderText("e.g. Production Slack Alerts")).toBeInTheDocument();
+ });
+
+ it("validates empty form submission", async () => {
+ renderWithProviders(
);
+
+ const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(screen.getByText("Name must be at least 2 characters")).toBeInTheDocument();
+ expect(screen.getByText("Must be a valid URL")).toBeInTheDocument();
+ expect(screen.getByText("Please select at least one event")).toBeInTheDocument();
+ });
+ });
+
+ it("validates HTTPS URL requirement", async () => {
+ renderWithProviders(
);
+
+ const urlInput = screen.getByPlaceholderText("https://your-domain.com/webhooks/commdesk");
+ fireEvent.change(urlInput, { target: { value: "http://insecure-domain.com" } });
+
+ const submitButton = screen.getByRole("button", { name: /Create Webhook/i });
+ fireEvent.click(submitButton);
+
+ await waitFor(() => {
+ expect(screen.getByText("URL must use HTTPS")).toBeInTheDocument();
+ });
+ });
+
+ it("allows selecting events", async () => {
+ renderWithProviders(
);
+
+ const eventOption = screen.getByText("Member Created");
+ fireEvent.click(eventOption);
+
+ expect(screen.getByText("1 Selected")).toBeInTheDocument();
+ });
+});
diff --git a/src/features/Webhooks/v1/components/form/WebhookForm.tsx b/src/features/Webhooks/v1/components/form/WebhookForm.tsx
new file mode 100644
index 0000000..be8a0eb
--- /dev/null
+++ b/src/features/Webhooks/v1/components/form/WebhookForm.tsx
@@ -0,0 +1,299 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { useNavigate } from "react-router-dom";
+import { Check, Loader2, Link2, Shield, Eye, EyeOff, RefreshCw } from "lucide-react";
+import { WEBHOOK_EVENTS } from "../../constants/webhook.constants";
+import type { WebhookEvent, CreateWebhookPayload, UpdateWebhookPayload } from "../../Webhook.types";
+import { useCreateWebhook, useUpdateWebhook } from "../../hooks/useWebhooks";
+import { useToast } from "@/features/Tasks/v1/components/common/ToastNotification";
+import { Telemetry } from "@/utils/telemetry";
+
+const webhookSchema = z.object({
+ name: z.string().min(2, "Name must be at least 2 characters").max(50, "Name is too long"),
+ url: z.string().url("Must be a valid URL").refine(val => {
+ try {
+ const url = new URL(val);
+ const isLocal = url.hostname === "localhost" || url.hostname === "127.0.0.1";
+ if (isLocal) return true;
+ return val.startsWith("https://");
+ } catch {
+ return false;
+ }
+ }, "URL must use HTTPS (except for localhost)"),
+ events: z.array(z.string()).min(1, "Please select at least one event"),
+ secret: z.string().optional(),
+ permissions: z.string().optional(),
+});
+
+
+type FormData = z.infer
;
+
+interface Props {
+ mode: "create" | "edit";
+ initialData?: any;
+}
+
+export default function WebhookForm({ mode, initialData }: Props) {
+ const navigate = useNavigate();
+ const { addToast } = useToast();
+
+ const createWebhook = useCreateWebhook();
+ const updateWebhook = useUpdateWebhook();
+ const isSubmitting = createWebhook.isPending || updateWebhook.isPending;
+
+ const [showSecret, setShowSecret] = useState(false);
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ setValue,
+ formState: { errors },
+ } = useForm({
+ resolver: zodResolver(webhookSchema),
+ defaultValues: {
+ name: initialData?.name || "",
+ url: initialData?.url || "",
+ events: initialData?.events || [],
+ secret: "", // Masked initially in edit mode, empty string means unchanged
+ permissions: initialData?.permissions?.join(", ") || "",
+ },
+
+ });
+
+ const selectedEvents = watch("events");
+
+ const toggleEvent = (eventId: string) => {
+ Telemetry.trackAction("webhook_form_toggle_event", { eventId });
+ const current = selectedEvents || [];
+ if (current.includes(eventId)) {
+ setValue("events", current.filter(id => id !== eventId), { shouldValidate: true });
+ } else {
+ setValue("events", [...current, eventId], { shouldValidate: true });
+ }
+ };
+
+ const handleRegenerateSecret = () => {
+ const randomSecret = Array.from(crypto.getRandomValues(new Uint8Array(24)))
+ .map(b => b.toString(16).padStart(2, '0'))
+ .join('');
+ setValue("secret", randomSecret, { shouldDirty: true });
+ setShowSecret(true);
+ Telemetry.trackAction("webhook_secret_regenerated");
+ addToast("info", "Secret Generated", "A new secure secret has been generated.");
+ };
+
+ const onSubmit = async (data: FormData) => {
+ try {
+ const parsedPermissions = data.permissions
+ ? data.permissions.split(",").map(p => p.trim()).filter(Boolean)
+ : undefined;
+
+ if (mode === "create") {
+ await createWebhook.mutateAsync({
+ ...data,
+ permissions: parsedPermissions,
+ } as CreateWebhookPayload);
+ Telemetry.trackAction("webhook_created", { eventsCount: data.events.length });
+ addToast("success", "Webhook created", "Your new webhook has been set up successfully.");
+ navigate("/org/dashboard/webhooks");
+ } else {
+ const payload: UpdateWebhookPayload = { name: data.name, url: data.url, events: data.events as WebhookEvent[] };
+ if (data.secret) payload.secret = data.secret; // only update if provided
+ if (parsedPermissions) payload.permissions = parsedPermissions;
+ await updateWebhook.mutateAsync({ id: initialData.id, payload });
+ Telemetry.trackAction("webhook_updated", { id: initialData.id });
+ addToast("success", "Webhook updated", "Changes saved successfully.");
+ navigate("/org/dashboard/webhooks");
+ }
+ } catch (err) {
+ Telemetry.trackError("webhook_save_failed", err);
+ addToast("error", "Error saving webhook", "Please try again later.");
+ }
+ };
+
+ const onError = (errors: any) => {
+ Telemetry.trackFormError("WebhookForm", errors);
+ };
+
+ return (
+
+ );
+}
+
+
diff --git a/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx b/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx
new file mode 100644
index 0000000..fbc6adf
--- /dev/null
+++ b/src/features/Webhooks/v1/components/layout/BulkActionBar.tsx
@@ -0,0 +1,59 @@
+import { Trash2, ShieldCheck, ShieldAlert, X } from "lucide-react";
+
+interface Props {
+ selectedCount: number;
+ onClear: () => void;
+ onAction: (action: "delete" | "enable" | "disable") => void;
+}
+
+export default function BulkActionBar({ selectedCount, onClear, onAction }: Props) {
+ if (selectedCount === 0) return null;
+
+ return (
+
+
+
+
+ {selectedCount} Selected
+
+
+
+
+
+
+
+
+
+ {children}
+
,
+ document.body
+ );
+}
+
+export function PillDropdown({ label: pillLabel, value, options, onChange, dotMap, styleMap }: {
+ label: string;
+ value: T;
+ options: { value: T; label: string }[];
+ onChange: (v: T) => void;
+ dotMap: Record;
+ styleMap: Record;
+}) {
+ const { open, setOpen, btnRef, panelRef } = useDropdown();
+ const isActive = value !== options[0].value;
+ const current = options.find((o) => o.value === value)?.label ?? pillLabel;
+ const activeStyle = styleMap[value] ?? { bg: "var(--cd-primary)", color: "#fff", border: "var(--cd-primary)" };
+
+ return (
+
+
+
+
+ {options.map((opt) => (
+
+ ))}
+
+
+ );
+}
+
+export default function WebhookFiltersBar({ filters, onChange, filteredCount, totalCount }: Props) {
+ const [localSearch, setLocalSearch] = useState(filters.search);
+ const onChangeRef = useRef(onChange);
+
+ useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+
+ useEffect(() => {
+ if (localSearch === filters.search) return;
+ const timer = setTimeout(() => {
+ onChangeRef.current({ ...filters, search: localSearch });
+ }, 300);
+ return () => clearTimeout(timer);
+ }, [localSearch, filters]);
+
+ const hasActive = filters.status !== "all" || filters.search !== "";
+
+ const resetAll = () => {
+ setLocalSearch("");
+ onChange({ status: "all", search: "" });
+ };
+
+ return (
+
+
+
+
+ {/* Status Dropdown */}
+
+ label="Status"
+ value={filters.status}
+ dotMap={STATUS_DOTS}
+ styleMap={STATUS_STYLES}
+ onChange={(v) => onChange({ ...filters, status: v })}
+ options={[
+ { value: "all", label: "All Status" },
+ { value: "active", label: "Active" },
+ { value: "inactive", label: "Inactive" },
+ ]}
+ />
+
+ {/* Search */}
+
+
+
+ setLocalSearch(e.target.value)}
+ placeholder="Search webhooks by name or URL..."
+ className="flex-1 text-xs bg-transparent outline-none min-w-0"
+ style={{ color: "var(--cd-text)" }}
+ />
+ {localSearch && (
+
+ )}
+
+
+
+
+
+ {hasActive ? (
+
+
+ Showing {filteredCount} results
+
+ ) : (
+ `Total webhooks: ${totalCount}`
+ )}
+
+
+
+
+
+
+
+
+
+
+ Webhooks
+
+
+ Manage integrations and real-time events ({activeCount} active of {totalCount})
+
+
+
+
+
+
+
+
+
+
{title}
+
+
+
+
+
+ {JSON.stringify(payload, null, 2)}
+
+
+
+
+ {logs.map((log) => {
+ const isSuccess = log.status === "success";
+ return (
+
+
+
+ {isSuccess ? (
+
+ ) : (
+
+ )}
+
+ {log.status}
+
+
+
= 200 && log.responseCode < 300 ? "var(--cd-success-subtle)" : "var(--cd-danger-subtle)",
+ color: log.responseCode >= 200 && log.responseCode < 300 ? "var(--cd-success)" : "var(--cd-danger)"
+ }}
+ >
+ {log.responseCode}
+
+
+
+
+
+
+
+
+
+
Delivery Time
+
+ {format(new Date(log.timestamp), "MMM d, HH:mm:ss")}
+
+
+
+
+
+
+
+
Trigger Event
+
+ {log.event}
+
+
+
+
+
+
+
+
+ {!isSuccess && (
+
+ )}
+
+
+ );
+ })}
+
Loading delivery logs...
;
+ }
+
+ if (logs.length === 0) {
+ return (
+
+
No deliveries found.
+
Deliveries will appear here when an event triggers this webhook.
+
+
+
+
+ | Status |
+ Timestamp |
+ Event |
+ Code |
+ Payloads |
+
+
+
+ {logs.map((log) => {
+ const isSuccess = log.status === "success";
+ return (
+
+ |
+
+ |
+
+ {format(new Date(log.timestamp), "MMM d, HH:mm:ss")}
+ |
+
+
+ {log.event}
+
+ |
+
+
+ {log.responseCode}
+
+ |
+
+
+
+
+ {!isSuccess && (
+
+ )}
+
+ |
+
+ );
+ })}
+
+
+
+ Loading webhooks...
+
+ );
+ }
+
+ if (webhooks.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {webhooks.map((w) => (
+
+
+ onToggleSelect(w.id)}
+ className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
+ />
+
+
+
navigate(`/org/dashboard/webhooks/${w.id}`)}>
+
+
+
+
+
{w.name}
+
+ {w.url.replace(/^https?:\/\//, '')}
+
+
+
+
+
+
+
+
+ {w.events.length} Events
+
+
+
+
+
+ Last:
+
+ {w.lastDeliveryStatus ? w.lastDeliveryStatus.charAt(0).toUpperCase() + w.lastDeliveryStatus.slice(1) : "None"}
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ Loading webhooks...
+
+ );
+ }
+
+ if (webhooks.length === 0) {
+ return null; // Handled by EmptyState in the parent
+ }
+
+ return (
+
+
+
+
+ |
+ onSelectAll(allSelected ? [] : webhooks.map(w => w.id))}
+ className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
+ />
+ |
+ Name |
+ URL |
+ Status |
+ Last Delivery |
+ Actions |
+
+
+
+ {webhooks.map((w) => {
+ const isSuccess = w.lastDeliveryStatus === "success";
+ const isFailed = w.lastDeliveryStatus === "failed";
+
+ return (
+
+ |
+ onToggleSelect(w.id)}
+ className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer accent-indigo-600"
+ />
+ |
+
+ navigate(`/org/dashboard/webhooks/${w.id}`)}>
+
+
+
+
+ {w.name}
+
+ {w.events.length} event{w.events.length !== 1 ? "s" : ""}
+
+
+ |
+
+
+
+
+ {w.url.replace(/^https?:\/\//, '')}
+
+ |
+
+
+
+ |
+
+
+
+ {w.lastDeliveryStatus ? (
+ <>
+
+
+ {w.lastDeliveryStatus}
+
+
+ ) : (
+ Never
+ )}
+ |
+
+
+
+
+
+
+
+ {/* Mobile fallback for ellipsis menu if needed, but opacity-0 works fine for desktop hover */}
+ |
+
+ );
+ })}
+
+
+
+ {/* Header */}
+
+
+
+
+
+ Create Webhook
+
+
+
+
+ {/* Form content */}
+
+
+
+
+
{}} />
+ Loading webhook details...
;
+ }
+
+ if (isError || !webhook) {
+ return Webhook not found or failed to load.
;
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
+ Edit Webhook
+
+
+
+
+ {/* Form content */}
+
+
+
+
+
{}} />
+ Loading webhook...
;
+ if (isError || !webhook) return Webhook not found.
;
+
+ const handleCopy = () => {
+ navigator.clipboard.writeText(webhook.url);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ addToast("success", "URL Copied", "Webhook URL added to clipboard");
+ };
+
+ const handleTest = async () => {
+ try {
+ const res = await testWebhook.mutateAsync(webhook.id);
+ setTestResult({ success: res.success, message: res.message, timestamp: new Date() });
+ if (res.success) {
+ addToast("success", "Ping Sent", "Endpoint returned 200 OK");
+ } else {
+ addToast("error", "Test Failed", res.message);
+ }
+ } catch {
+ setTestResult({ success: false, message: "Unable to reach endpoint. Check your URL.", timestamp: new Date() });
+ addToast("error", "Test Failed", "Connection timeout.");
+ }
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ {webhook.name}
+
+
+
+ {webhook.url}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Unified Dash Stats */}
+
+ {[
+ { label: "Reliability", val: "99.8%", icon: Zap, color: "var(--cd-success)" },
+ { label: "Avg Latency", val: "142ms", icon: Clock, color: "var(--cd-primary)" },
+ { label: "Volume (24h)", val: "1.2k", icon: Activity, color: "var(--cd-text)" },
+ { label: "Status", val: webhook.status, icon: Signal, color: webhook.status === 'active' ? "var(--cd-success)" : "var(--cd-text-muted)" },
+ ].map((stat, i) => (
+
+
{stat.label}
+
+
+ {stat.val}
+
+
+ ))}
+
+
+ {/* Test Result Banner (Conditional) */}
+ {testResult && (
+
+
+
+ {testResult.success ?
:
}
+
+
+
+ {testResult.success ? "Connection Successful" : "Connection Failed"}
+
+
+ {testResult.message} • {format(testResult.timestamp, "HH:mm:ss")}
+
+
+
+
+
+ )}
+
+
+
+ {/* Left Column: Activity & Docs */}
+
+
+ {/* Recent Deliveries */}
+
+
+
+
+
+
+
Recent Deliveries
+
+
Full History
+
+
+ {logsLoading ? (
+
+ Loading Activity...
+
+ ) : (
+
{}} />
+ )}
+
+
{/* Payload Example */}
+
+
+
+
Payload Structure
+
+
+
+
JSON
+
+ {"{"}{"\n"}
+ {" "}"id": "evt_12345",{"\n"}
+ {" "}"type": "{webhook.events[0] || "member.created"}",{"\n"}
+ {" "}"created": {Date.now()},{"\n"}
+ {" "}"data": {"{"}{"\n"}
+ {" "}"object": "member",{"\n"}
+ {" "}"id": "mem_98765",{"\n"}
+ {" "}"status": "active"{"\n"}
+ {" "}{"}"}{"\n"}
+ {"}"}
+
+
+
+ Note: Requests are POSTed with an X-CommDesk-Signature header for verification.
+
+
+
+
+
+
+ {/* Right Column: Configuration */}
+
+
+ {/* Security Sidebar Card */}
+
+
+
+ Security Config
+
+
+
+
+
+
+ Subscriptions
+
+
+ {webhook.events.map(ev => (
+
+ {ev.replace('.', ' ')}
+
+ ))}
+
+
+
+ {webhook.permissions && webhook.permissions.length > 0 && (
+
+
+ Scopes
+
+
+ {webhook.permissions.map(perm => (
+
+ {perm}
+
+ ))}
+
+
+ )}
+
+
+
+
+ Created
+ {format(new Date(webhook.createdAt), "MMM d, yyyy")}
+
+
+ Internal ID
+ {webhook.id}
+
+
+
+
+
+
+
+
+
+
+
+
+ {isError ? (
+
+ void refetch()} className="cd-btn cd-btn-secondary px-6 py-2.5 rounded-xl border">
+ Retry
+
+ }
+ />
+
+ ) : totalCount === 0 && !isLoading ? (
+
+
navigate("/org/dashboard/webhooks/create")}
+ className="cd-btn cd-btn-primary flex items-center gap-2 px-8 py-3 rounded-2xl shadow-xl shadow-[var(--cd-primary-subtle)] hover:scale-105 transition-all"
+ >
+ Create Webhook
+
+ }
+ />
+
+ ) : (
+
+
setFilters({ ...newFilters, page: 1 })}
+ totalCount={totalCount}
+ filteredCount={paginatedData?.total || 0}
+ />
+
+
+ {/* Desktop View */}
+
+
+
+ {webhooks.length === 0 && !isLoading && (
+
+ setFilters(DEFAULT_WEBHOOK_FILTERS)}
+ className="cd-btn cd-btn-secondary px-6 py-2 rounded-xl border text-sm font-medium"
+ >
+ Clear All Filters
+
+ }
+ />
+
+ )}
+
+
+
+
+
+ {/* Pagination UI */}
+ {totalPages > 1 && (
+
+
+ Showing page {filters.page} of {totalPages}
+
+
+
+
+
+
+ )}
+
+
+
void handleDelete()}
+ onCancel={() => setWebhookToDelete(null)}
+ isLoading={deleteWebhook.isPending}
+ danger
+ />
+
+ void handleBulkAction()}
+ onCancel={() => setBulkActionToConfirm(null)}
+ isLoading={bulkAction.isPending}
+ danger
+ />
+
+ setSelectedIds([])}
+ onAction={(action) => {
+ if (action === "delete") {
+ setBulkActionToConfirm("delete");
+ } else {
+ handleBulkAction(action);
+ }
+ }}
+ />
+
+
+
+ {/* Header */}
+
+
+ Webhooks
+ /
+ {webhook?.name || 'Loading...'}
+ /
+ Logs
+
+
+
+
+
+
+
+ {/* Filter Bar */}
+
+
+ label="Status"
+ value={filters.status}
+ dotMap={LOG_STATUS_DOTS}
+ styleMap={LOG_STATUS_STYLES}
+ onChange={(v) => setFilters(f => ({ ...f, status: v, page: 1 }))}
+ options={[
+ { value: "all", label: "All Statuses" },
+ { value: "success", label: "Success" },
+ { value: "failed", label: "Failed" },
+ ]}
+ />
+
+ label="Event"
+ value={filters.event}
+ dotMap={{ all: "bg-gray-400" }}
+ styleMap={{}}
+ onChange={(v) => setFilters(f => ({ ...f, event: v, page: 1 }))}
+ options={[
+ { value: "all", label: "All Events" },
+ ...(webhook?.events.map(ev => ({ value: ev, label: ev })) || []),
+ ]}
+ />
+
+
+
+ {/* Desktop View */}
+
+
+ {/* Mobile View */}
+
+
+
+
+ {/* Pagination UI */}
+ {totalPages > 1 && (
+
+
+ Showing page {filters.page} of {totalPages}
+
+
+
+
+
+
+ )}
+
+
+
+
-
+
+
);
};
diff --git a/src/utils/telemetry.ts b/src/utils/telemetry.ts
new file mode 100644
index 0000000..f95bdd5
--- /dev/null
+++ b/src/utils/telemetry.ts
@@ -0,0 +1,20 @@
+/**
+ * Simple Telemetry/Observability utility for frontend tracking.
+ * In a real-world scenario, this would wrap PostHog, Sentry, Datadog, etc.
+ */
+
+export const Telemetry = {
+ trackAction: (actionName: string, metadata?: Record