[V0_FILE]typescriptreact:file="webhook-dashboard.tsx" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Plus, Settings, Trash2, Edit, MoreHorizontal, CheckCircle, XCircle, Clock, Search, RefreshCw, Copy, Eye, } from "lucide-react" // Mock data const mockWebhooks = [ { id: "1", name: "Payment Notifications", url: "https://api.example.com/webhooks/payments", events: ["payment.completed", "payment.failed"], status: "active", lastTriggered: "2 minutes ago", successRate: 98.5, }, { id: "2", name: "User Events", url: "https://api.example.com/webhooks/users", events: ["user.created", "user.updated"], status: "active", lastTriggered: "1 hour ago", successRate: 100, }, { id: "3", name: "Order Updates", url: "https://api.example.com/webhooks/orders", events: ["order.created", "order.shipped"], status: "inactive", lastTriggered: "3 days ago", successRate: 85.2, }, ] const mockRequests = [ { id: "req_1", webhookId: "1", webhookName: "Payment Notifications", event: "payment.completed", status: "success", statusCode: 200, timestamp: "2024-01-15T10:30:00Z", duration: 245, payload: { id: "pay_123", amount: 2500, currency: "USD", status: "completed", }, headers: { "Content-Type": "application/json", "X-Webhook-Signature": "sha256=abc123...", }, }, { id: "req_2", webhookId: "1", webhookName: "Payment Notifications", event: "payment.failed", status: "failed", statusCode: 500, timestamp: "2024-01-15T10:25:00Z", duration: 5000, payload: { id: "pay_124", amount: 1500, currency: "USD", status: "failed", error: "Insufficient funds", }, headers: { "Content-Type": "application/json", "X-Webhook-Signature": "sha256=def456...", }, }, { id: "req_3", webhookId: "2", webhookName: "User Events", event: "user.created", status: "success", statusCode: 201, timestamp: "2024-01-15T09:15:00Z", duration: 180, payload: { id: "user_789", email: "john@example.com", name: "John Doe", }, headers: { "Content-Type": "application/json", "X-Webhook-Signature": "sha256=ghi789...", }, }, ] export default function WebhookDashboard() { const [webhooks, setWebhooks] = useState(mockWebhooks) const [requests, setRequests] = useState(mockRequests) const [selectedRequest, setSelectedRequest] = useState(null) const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("all") const filteredRequests = requests.filter((request) => { const matchesSearch = request.webhookName.toLowerCase().includes(searchTerm.toLowerCase()) || request.event.toLowerCase().includes(searchTerm.toLowerCase()) const matchesStatus = statusFilter === "all" || request.status === statusFilter return matchesSearch && matchesStatus }) const getStatusIcon = (status: string) => { switch (status) { case "success": return case "failed": return default: return } } const formatTimestamp = (timestamp: string) => { return new Date(timestamp).toLocaleString() } return (

Webhook Management

Configure and monitor your webhooks