@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/WebhookManager.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { apiGet, apiPost, apiPatch, apiDelete } from "../lib/api";
-import { formatDate } from "../lib/date-utils";
+import { useResourceManager } from "../lib/useResourceManager";
+
 import {
   Webhook,
   Plus,
@@ -16,8 +17,12 @@ import {
   ExternalLink,
   Zap,
   Shield,
-} from "lucide-react";
-import { ConfirmModal, Modal, ModalContent, ModalActions } from "./ui/Modal";
+} from "./ui/icons";
+import { useUIStore, toast } from "../lib/stores";
+import { Modal, ModalContent, ModalActions } from "./ui/Modal";
+import { Badge } from "./ui/Badge";
+import { PageHeader } from "./ui/PageHeader";
+
 
 interface WebhookItem {
   id: string;
@@ -31,17 +36,25 @@ interface WebhookItem {
 }
 
 export function WebhookManager() {
-  const [webhooks, setWebhooks] = useState<WebhookItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const {
+    items: webhooks,
+    loading,
+    create,
+    remove,
+    update,
+    isCreateModalOpen: showCreateModal,
+    setIsCreateModalOpen: setShowCreateModal,
+  } = useResourceManager<WebhookItem>({
+    endpoint: "/api/webhooks",
+  });
+
+  const { alert } = useUIStore();
   const [showTestModal, setShowTestModal] = useState(false);
   const [showHelpModal, setShowHelpModal] = useState(false);
   const [testResult, setTestResult] = useState<{
     success: boolean;
     message: string;
   } | null>(null);
-  const [deleteId, setDeleteId] = useState<string | null>(null);
   const [testId, setTestId] = useState<string | null>(null);
   const [formData, setFormData] = useState({
     name: "",
@@ -51,22 +64,6 @@ export function WebhookManager() {
   });
   const [createError, setCreateError] = useState("");
 
-  const loadWebhooks = async () => {
-    setLoading(true);
-    try {
-      const data = await apiGet("/api/webhooks");
-      setWebhooks(data);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadWebhooks();
-  }, []);
-
   const handleCreate = async () => {
     if (!formData.name.trim() || !formData.url.trim()) {
       setCreateError("Name and URL are required");
@@ -74,45 +71,26 @@ export function WebhookManager() {
     }
 
     try {
-      await apiPost("/api/webhooks", formData);
-      setShowCreateModal(false);
+      await create(formData);
       setFormData({ name: "", url: "", events: [], secret: "" });
-      loadWebhooks();
+      toast.success(`Webhook established: ${formData.name}`);
     } catch (e) {
-      console.error(e);
       setCreateError("Failed to create webhook");
     }
   };
 
-  const handleDelete = async (id: string) => {
-    setDeleteId(id);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDelete = async () => {
-    if (!deleteId) return;
-
-    try {
-      await apiDelete(`/api/webhooks/${deleteId}`);
-      loadWebhooks();
-    } catch (e) {
-      console.error(e);
-    }
-    setShowDeleteModal(false);
-    setDeleteId(null);
-  };
 
   const handleTest = async (id: string) => {
     setTestId(id);
     setTestResult(null);
     setShowTestModal(true);
-
     try {
-      const data = await apiPost(`/api/webhooks/${id}/test`);
+      const data = await apiPost<any>(`/api/webhooks/${id}/test`);
       setTestResult({
         success: true,
         message: data.message || "Webhook triggered successfully",
       });
+      toast.success("Dispatch verified: Remote endpoint responded");
     } catch (e) {
       setTestResult({ success: false, message: "Failed to trigger webhook" });
     }
@@ -120,10 +98,11 @@ export function WebhookManager() {
 
   const toggleStatus = async (id: string, currentStatus: string) => {
     try {
-      await apiPatch(`/api/webhooks/${id}`, {
-        status: currentStatus === "active" ? "paused" : "active",
+      const newStatus = currentStatus === "active" ? "paused" : "active";
+      await update(id, {
+        status: newStatus,
       });
-      loadWebhooks();
+      toast.success(newStatus === "active" ? "Signals resumed" : "Dispatcher paused");
     } catch (e) {
       console.error(e);
     }
@@ -149,61 +128,59 @@ export function WebhookManager() {
   ];
 
   return (
-    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
-      {/* Header */}
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
-        <div>
-          <div className="flex items-center gap-3">
-            <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
-              Web<span className="text-[var(--kyro-primary)]">hooks</span>
-            </h1>
-            <button
-              type="button"
-              onClick={() => setShowHelpModal(true)}
-              className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
-              title="Learn how webhooks work"
-            >
-              <Info className="w-5 h-5" />
-            </button>
-          </div>
-          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-70">
-            Receive real-time notifications when events occur in your CMS.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => {
-            setFormData({ name: "", url: "", events: [], secret: "" });
-            setCreateError("");
-            setShowCreateModal(true);
-          }}
-          className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm shadow-xl hover:opacity-90 active:scale-95 transition-all"
-        >
-          <Plus className="w-4 h-4" />
-          Add Webhook
-        </button>
-      </div>
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
+      <PageHeader
+        title="Webhooks"
+        description="Receive real-time notifications when your content changes."
+        icon={Webhook}
+        actions={[
+          {
+            label: "Create Webhook",
+            onClick: () => {
+              setFormData({
+                name: "",
+                url: "",
+                events: ["collection.create", "collection.update", "collection.delete"],
+                secret: "",
+              });
+              setCreateError("");
+              setShowCreateModal(true);
+            },
+            icon: Plus,
+          },
+          {
+            label: "Guide",
+            onClick: () => setShowHelpModal(true),
+            icon: Info,
+            variant: "outline"
+          }
+        ]}
+      />
 
-      {/* Info Banner */}
-      <div className="surface-tile p-6 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)]">
-        <div className="flex items-start gap-4">
-          <div className="p-3 bg-[var(--kyro-primary)]/10 rounded-xl">
-            <Zap className="w-6 h-6 text-[var(--kyro-primary)]" />
+      {/* Info Banner - Modernized */}
+      <div className="relative overflow-hidden rounded-[2rem] border border-[var(--kyro-border)] bg-gradient-to-br from-[var(--kyro-surface)] to-[var(--kyro-surface-accent)] p-8">
+        <div className="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none">
+          <Zap className="w-64 h-64 rotate-12" />
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-8 relative z-10">
+          <div className="p-5 bg-gradient-to-br from-[var(--kyro-primary)] to-[var(--kyro-primary)]/50 rounded-[1.5rem] shadow-xl shadow-[var(--kyro-primary)]/20">
+            <Zap className="w-8 h-8 text-white" />
           </div>
-          <div className="flex-1">
-            <h3 className="text-lg font-black mb-1">What are webhooks?</h3>
-            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 mb-3">
-              Webhooks allow your application to receive real-time HTTP
-              notifications when events happen in your CMS. Instead of polling
-              the API, your endpoint gets notified immediately.
+          <div className="flex-1 text-center md:text-left">
+            <h3 className="text-xl font-bold mb-2">Real-time Event Synchronization</h3>
+            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 max-w-2xl leading-relaxed">
+              Webhooks allow your application to receive instant HTTP notifications when events happen in your CMS.
+              Eliminate polling and build responsive, event-driven architectures with ease.
             </p>
-            <div className="grid grid-cols-2 gap-3 text-xs">
-              {eventOptions.map((opt) => (
-                <div key={opt.value} className="flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-[var(--kyro-primary)]" />
-                  <span className="font-medium">{opt.label}</span>
-                </div>
-              ))}
+          </div>
+          <div className="flex gap-4">
+            <div className="flex flex-col items-center px-4 py-2 bg-[var(--kyro-surface)]/50 border border-[var(--kyro-border)] rounded-2xl">
+              <span className="text-[10px] font-bold opacity-40 uppercase tracking-tighter">Collections</span>
+              <span className="text-sm font-bold text-[var(--kyro-primary)]">Triggered</span>
+            </div>
+            <div className="flex flex-col items-center px-4 py-2 bg-[var(--kyro-surface)]/50 border border-[var(--kyro-border)] rounded-2xl">
+              <span className="text-[10px] font-bold opacity-40 uppercase tracking-tighter">Latency</span>
+              <span className="text-sm font-bold text-[var(--kyro-primary)]">&lt;200ms</span>
             </div>
           </div>
         </div>
@@ -211,31 +188,36 @@ export function WebhookManager() {
 
       {/* Webhooks List */}
       <section className="space-y-6">
-        <div className="flex items-center gap-2 px-2">
-          <Webhook className="w-4 h-4 text-[var(--kyro-primary)] opacity-40" />
-          <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
-            Configured Webhooks
-          </span>
+        <div className="flex items-center justify-between px-2">
+          <div className="flex items-center gap-2">
+            <div className="w-1 h-4 bg-[var(--kyro-primary)] rounded-full" />
+            <h2 className="text-sm font-medium tracking-[0.2em] opacity-40">ACTIVE ENDPOINTS</h2>
+          </div>
+          <div className="text-[10px] font-bold opacity-40 uppercase">
+            {webhooks.length} Hook{webhooks.length !== 1 && "s"}
+          </div>
         </div>
 
         {loading ? (
-          <div className="surface-tile p-8 text-center">Loading...</div>
+          <div className="flex items-center justify-center p-20 surface-tile rounded-3xl opacity-50 italic">
+            Connecting to dispatcher...
+          </div>
         ) : webhooks.length === 0 ? (
-          <div className="surface-tile p-12 text-center border-2 border-dashed border-[var(--kyro-border)]">
-            <div className="w-16 h-16 mx-auto mb-6 bg-[var(--kyro-surface-accent)] rounded-2xl flex items-center justify-center">
-              <Webhook className="w-8 h-8 text-[var(--kyro-text-secondary)] opacity-20" />
+          <div className="p-16 text-center rounded-[3rem] border-2 border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30">
+            <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-tr from-[var(--kyro-surface)] to-[var(--kyro-surface-accent)] rounded-3xl flex items-center justify-center shadow-xl border border-[var(--kyro-border)]">
+              <Webhook className="w-10 h-10 text-[var(--kyro-primary)]" />
             </div>
-            <h3 className="text-lg font-black mb-2">No Webhooks Configured</h3>
-            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
-              Add your first webhook to start receiving event notifications.
+            <h3 className="text-2xl font-bold mb-3">No Webhooks Found</h3>
+            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-8 max-w-sm mx-auto">
+              Your CMS is currently silent. Create a webhook to start broadcasting events to your external services.
             </p>
             <button
               type="button"
               onClick={() => setShowCreateModal(true)}
-              className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
+              className="inline-flex items-center gap-3 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
             >
-              <Plus className="w-4 h-4 inline mr-2" />
-              Create Your First Webhook
+              <Plus className="w-5 h-5" />
+              Configure Webhook
             </button>
           </div>
         ) : (
@@ -243,98 +225,86 @@ export function WebhookManager() {
             {webhooks.map((webhook) => (
               <div
                 key={webhook.id}
-                className="surface-tile p-6 group hover:border-[var(--kyro-primary)] transition-all"
+                className="group relative overflow-hidden bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-3xl p-6 hover:border-[var(--kyro-primary)]/50 transition-all duration-300"
               >
-                <div className="flex items-start justify-between gap-6">
+                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 relative z-10">
                   <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-3">
-                      <h3 className="text-lg font-black">{webhook.name}</h3>
-                      <span
-                        className={`px-2 py-0.5 rounded-full text-[8px] font-black uppercase ${
-                          webhook.status === "active"
-                            ? "bg-green-500/10 text-green-500"
-                            : "bg-amber-500/10 text-amber-500"
-                        }`}
-                      >
-                        {webhook.status}
-                      </span>
-                    </div>
-                    <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 font-mono mb-4 break-all">
-                      {webhook.url}
-                    </p>
-                    <div className="flex items-center gap-2 flex-wrap mb-4">
-                      {webhook.events?.map((event) => (
-                        <span
-                          key={event}
-                          className="px-3 py-1 bg-[var(--kyro-surface-accent)] rounded-lg text-[10px] font-black uppercase opacity-60"
-                        >
-                          {event}
-                        </span>
-                      ))}
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="p-2.5 bg-[var(--kyro-surface-accent)] rounded-xl group-hover:bg-[var(--kyro-primary)]/10 transition-colors">
+                        <Webhook className="w-5 h-5 text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-primary)] transition-colors" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-bold group-hover:text-[var(--kyro-primary)] transition-colors">{webhook.name}</h3>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className={`w-2 h-2 rounded-full ${webhook.status === "active" ? "bg-green-500 animate-pulse" : "bg-amber-500"}`} />
+                          <span className={`text-[10px] font-bold uppercase tracking-wider ${webhook.status === "active" ? "text-green-500" : "text-amber-500"}`}>
+                            {webhook.status}
+                          </span>
+                        </div>
+                      </div>
                     </div>
-                    <div className="flex items-center gap-6 text-[10px] font-black uppercase opacity-40">
-                      <div className="flex items-center gap-2">
-                        <RefreshCw className="w-3 h-3" />
-                        {webhook.lastTriggered
-                          ? `Last triggered: ${new Date(webhook.lastTriggered).toLocaleDateString()}`
-                          : "Never triggered"}
+
+                    <div className="grid sm:grid-cols-3 gap-6 pt-2">
+                      <div className="space-y-1">
+                        <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Destination</span>
+                        <div className="font-mono text-xs opacity-60 truncate max-w-[200px]" title={webhook.url}>
+                          {webhook.url}
+                        </div>
                       </div>
-                      <div className="flex items-center gap-2">
-                        <Clock className="w-3 h-3" />
-                        Created:{" "}
-                        {new Date(webhook.createdAt).toLocaleDateString()}
+                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                        <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Events</span>
+                        <div className="flex flex-wrap gap-1">
+                          {webhook.events.slice(0, 2).map((event) => (
+                            <Badge key={event} variant="outline" className="text-[8px] font-bold px-1.5 opacity-60">
+                              {event}
+                            </Badge>
+                          ))}
+                          {webhook.events.length > 2 && (
+                            <span className="text-[8px] font-bold opacity-30">+{webhook.events.length - 2} more</span>
+                          )}
+                        </div>
+                      </div>
+                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                        <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Activity</span>
+                        <div className="text-[10px] font-bold opacity-60 flex items-center gap-1.5">
+                          <Clock className="w-3 h-3" />
+                          {webhook.lastTriggered
+                            ? `Last triggered: ${new Date(webhook.lastTriggered).toLocaleDateString()}`
+                            : "Never triggered"}
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div className="flex items-center gap-2 flex-shrink-0">
+
+                  <div className="flex items-center gap-2 lg:bg-[var(--kyro-surface-accent)]/50 lg:p-2 lg:rounded-2xl lg:opacity-0 group-hover:opacity-100 transition-all duration-300 lg:translate-x-4 group-hover:translate-x-0">
                     <button
                       type="button"
                       onClick={() => handleTest(webhook.id)}
-                      className="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface)] flex items-center gap-2"
+                      className="flex-1 lg:flex-none p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all flex items-center justify-center gap-2"
                       title="Send test request"
                     >
                       <Send className="w-4 h-4" />
-                      <span className="text-xs font-medium hidden lg:inline">
-                        Test
-                      </span>
+                      <span className="text-xs font-bold">Test</span>
                     </button>
+
+                    <div className="w-px h-6 bg-[var(--kyro-border)] mx-1 hidden lg:block" />
+
                     <button
                       type="button"
                       onClick={() => toggleStatus(webhook.id, webhook.status)}
-                      className={`p-3 rounded-xl flex items-center gap-2 ${
-                        webhook.status === "active"
-                          ? "text-amber-500 bg-amber-500/10 hover:bg-amber-500/20"
-                          : "text-green-500 bg-green-500/10 hover:bg-green-500/20"
-                      }`}
-                      title={
-                        webhook.status === "active"
-                          ? "Pause webhook"
-                          : "Activate webhook"
-                      }
+                      className={`p-3 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl hover:border-[var(--kyro-primary)] transition-all group/toggle ${webhook.status === "active" ? "text-amber-500/50 hover:text-amber-500" : "text-green-500/50 hover:text-green-500"}`}
+                      title={webhook.status === "active" ? "Pause webhook" : "Activate webhook"}
                     >
-                      {webhook.status === "active" ? (
-                        <>
-                          <Pause className="w-4 h-4" />
-                          <span className="text-xs font-medium hidden lg:inline">
-                            Pause
-                          </span>
-                        </>
-                      ) : (
-                        <>
-                          <Play className="w-4 h-4" />
-                          <span className="text-xs font-medium hidden lg:inline">
-                            Activate
-                          </span>
-                        </>
-                      )}
+                      {webhook.status === "active" ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
                     </button>
+
                     <button
                       type="button"
-                      onClick={() => handleDelete(webhook.id)}
-                      className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
+                      onClick={() => remove(webhook.id, "Webhook")}
+                      className="p-3 bg-red-500/5 border border-red-500/10 rounded-xl hover:bg-red-500/10 hover:border-red-500/30 transition-all group/delete"
                       title="Delete webhook"
                     >
-                      <Trash2 className="w-4 h-4" />
+                      <Trash2 className="w-4 h-4 text-red-500/50 group-hover/delete:text-red-500" />
                     </button>
                   </div>
                 </div>
@@ -348,89 +318,87 @@ export function WebhookManager() {
       <Modal
         open={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        title="Add New Webhook"
+        title="Register Webhook"
+        size="lg"
       >
         <ModalContent>
-          <div className="space-y-5">
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Name <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={(e) =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="e.g., Slack Notifications, Email Parser"
-                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Endpoint URL <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="url"
-                value={formData.url}
-                onChange={(e) =>
-                  setFormData({ ...formData, url: e.target.value })
-                }
-                placeholder="https://your-server.com/webhook"
-                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
-              />
-              <p className="text-xs text-[var(--kyro-text-secondary)] mt-1 opacity-60">
-                The URL that will receive the POST request when events occur.
-              </p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Events to trigger on
-              </label>
-              <div className="grid grid-cols-2 gap-3">
-                {eventOptions.map((opt) => (
-                  <button
-                    type="button"
-                    key={opt.value}
-                    onClick={() => {
-                      const events = formData.events.includes(opt.value)
-                        ? formData.events.filter((e) => e !== opt.value)
-                        : [...formData.events, opt.value];
-                      setFormData({ ...formData, events });
-                    }}
-                    className={`p-3 rounded-xl text-left transition-all ${
-                      formData.events.includes(opt.value)
-                        ? "bg-[var(--kyro-primary)]/10 border border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
-                        : "bg-[var(--kyro-surface-accent)] border border-transparent"
-                    }`}
-                  >
-                    <div className="font-medium text-sm">{opt.label}</div>
-                    <div className="text-[10px] opacity-60">
-                      {opt.description}
-                    </div>
-                  </button>
-                ))}
+          <div className="space-y-6">
+            <div className="flex flex-col gap-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Webhook Name</label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) =>
+                      setFormData({ ...formData, name: e.target.value })
+                    }
+                    placeholder="e.g., Slack Notifications"
+                    className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Payload URL</label>
+                  <input
+                    type="url"
+                    value={formData.url}
+                    onChange={(e) =>
+                      setFormData({ ...formData, url: e.target.value })
+                    }
+                    placeholder="https://your-server.com/webhook"
+                    className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Signing Secret</label>
+                  <input
+                    type="text"
+                    value={formData.secret}
+                    onChange={(e) =>
+                      setFormData({ ...formData, secret: e.target.value })
+                    }
+                    placeholder="Optional secret for verification"
+                    className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Subscribed Events</label>
+                <div className="grid grid-cols-2 gap-4">
+                  {eventOptions.map((opt) => (
+                    <button
+                      type="button"
+                      key={opt.value}
+                      onClick={() => {
+                        const events = formData.events.includes(opt.value)
+                          ? formData.events.filter((e) => e !== opt.value)
+                          : [...formData.events, opt.value];
+                        setFormData({ ...formData, events });
+                      }}
+                      className={`flex items-center gap-3 p-3 rounded-lg border transition-all text-left ${formData.events.includes(opt.value)
+                        ? "bg-[var(--kyro-primary)]/5 border-[var(--kyro-primary)]/30 text-[var(--kyro-primary)]"
+                        : "bg-[var(--kyro-surface-accent)]/50 border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/30"
+                        }`}
+                    >
+                      <div className={`w-4 h-4 rounded flex items-center justify-center border transition-all ${formData.events.includes(opt.value) ? "bg-[var(--kyro-primary)] border-[var(--kyro-primary)]" : "border-[var(--kyro-border)]"}`}>
+                        {formData.events.includes(opt.value) && <CheckCircle2 className="w-3 h-3 text-white" />}
+                      </div>
+                      <div>
+                        <div className="text-xs font-bold">{opt.label}</div>
+                        <div className="text-[10px] opacity-50">{opt.description}</div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
               </div>
             </div>
-            <div>
-              <label className="block text-sm font-medium mb-2">
-                Signing Secret (optional)
-              </label>
-              <input
-                type="text"
-                value={formData.secret}
-                onChange={(e) =>
-                  setFormData({ ...formData, secret: e.target.value })
-                }
-                placeholder="Your webhook signing secret"
-                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
-              />
-              <p className="text-xs text-[var(--kyro-text-secondary)] mt-1 opacity-60">
-                Used to verify that requests came from Kyro CMS.
-              </p>
-            </div>
+
             {createError && (
-              <p className="text-sm text-red-500">{createError}</p>
+              <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-2 text-red-500 text-xs font-bold">
+                <AlertTriangle className="w-4 h-4" />
+                {createError}
+              </div>
             )}
           </div>
         </ModalContent>
@@ -438,95 +406,58 @@ export function WebhookManager() {
           <button
             type="button"
             onClick={() => setShowCreateModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+            className="px-6 py-2.5 rounded-xl font-bold text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             Cancel
           </button>
           <button
             type="button"
             onClick={handleCreate}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+            className="px-6 py-2.5 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10"
           >
             Create Webhook
           </button>
         </ModalActions>
       </Modal>
 
-      {/* Delete Modal */}
-      <Modal
-        open={showDeleteModal}
-        onClose={() => setShowDeleteModal(false)}
-        title="Delete Webhook"
-        variant="danger"
-      >
-        <ModalContent>
-          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
-            Are you sure you want to delete this webhook? This action cannot be
-            undone.
-          </p>
-          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
-            <p className="text-sm font-medium text-red-500">
-              This endpoint will stop receiving notifications immediately.
-            </p>
-          </div>
-        </ModalContent>
-        <ModalActions>
-          <button
-            type="button"
-            onClick={() => setShowDeleteModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-          >
-            Keep Webhook
-          </button>
-          <button
-            type="button"
-            onClick={confirmDelete}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600"
-          >
-            Delete Permanently
-          </button>
-        </ModalActions>
-      </Modal>
-
       {/* Test Webhook Modal */}
       <Modal
         open={showTestModal}
         onClose={() => setShowTestModal(false)}
-        title="Test Webhook"
+        title="Webhook Test Dispatcher"
       >
         <ModalContent>
-          {testResult ? (
-            <div
-              className={`flex items-center gap-3 ${testResult.success ? "text-green-500" : "text-red-500"}`}
-            >
-              {testResult.success ? (
-                <CheckCircle2 className="w-6 h-6" />
-              ) : (
-                <AlertTriangle className="w-6 h-6" />
-              )}
-              <div>
-                <p className="font-bold">
-                  {testResult.success ? "Success!" : "Failed"}
-                </p>
-                <p className="text-sm text-[var(--kyro-text-secondary)]">
-                  {testResult.message}
-                </p>
+          <div className="p-8 rounded-[2rem] bg-[var(--kyro-surface-accent)]/30 border border-[var(--kyro-border)] text-center">
+            {testResult ? (
+              <div className="space-y-6">
+                <div className={`w-16 h-16 mx-auto rounded-2xl flex items-center justify-center shadow-xl ${testResult.success ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
+                  {testResult.success ? <CheckCircle2 className="w-8 h-8" /> : <AlertTriangle className="w-8 h-8" />}
+                </div>
+                <div>
+                  <h4 className="text-xl font-bold mb-2">{testResult.success ? "Dispatch Successful" : "Dispatch Failed"}</h4>
+                  <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70">
+                    {testResult.message}
+                  </p>
+                </div>
               </div>
-            </div>
-          ) : (
-            <div className="flex items-center gap-3">
-              <RefreshCw className="w-5 h-5 animate-spin" />
-              <p>Sending test request...</p>
-            </div>
-          )}
+            ) : (
+              <div className="space-y-6 py-4">
+                <RefreshCw className="w-12 h-12 text-[var(--kyro-primary)] animate-spin mx-auto opacity-50" />
+                <div>
+                  <h4 className="text-xl font-bold mb-1">Synthesizing Payload</h4>
+                  <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 italic">Dispatching to remote endpoint...</p>
+                </div>
+              </div>
+            )}
+          </div>
         </ModalContent>
         <ModalActions>
           <button
             type="button"
             onClick={() => setShowTestModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+            className="w-full py-3 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all"
           >
-            Close
+            Acknowledge
           </button>
         </ModalActions>
       </Modal>
@@ -535,58 +466,65 @@ export function WebhookManager() {
       <Modal
         open={showHelpModal}
         onClose={() => setShowHelpModal(false)}
-        title="How Webhooks Work"
+        title="Webhook Integration Guide"
+        size="lg"
       >
         <ModalContent>
-          <div className="space-y-6">
-            <div>
-              <h4 className="font-bold mb-2">What is a webhook?</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)]">
-                A webhook is an HTTP POST request sent to your endpoint when an
-                event occurs in your CMS. Unlike API polling (continuously
-                checking for changes), webhooks give you instant notifications.
-              </p>
-            </div>
-            <div>
-              <h4 className="font-bold mb-2">Request format</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)] mb-3">
-                When an event triggers, Kyro sends a POST request with:
-              </p>
-              <div className="bg-[var(--kyro-bg)] rounded-lg p-4 font-mono text-sm space-y-2">
-                <div className="text-[var(--kyro-text-secondary)]">{"{"}</div>
-                <div className="pl-4">"event": "create",</div>
-                <div className="pl-4">"collection": "posts",</div>
-                <div className="pl-4">"documentId": "xxx",</div>
-                <div className="pl-4">"timestamp": "2024-..."</div>
-                <div className="text-[var(--kyro-text-secondary)]">{"}"}</div>
+          <div className="space-y-8">
+            <div className="grid grid-cols-1 gap-6">
+              <div className="p-6 rounded-3xl bg-[var(--kyro-surface-accent)]/50 border border-[var(--kyro-border)]">
+                <h4 className="font-bold mb-3 flex items-center gap-2">
+                  <ExternalLink className="w-4 h-4 text-[var(--kyro-primary)]" />
+                  Request Context
+                </h4>
+                <p className="text-sm text-[var(--kyro-text-secondary)] leading-relaxed">
+                  When an event triggers, Kyro sends a standard <span className="font-bold text-[var(--kyro-text-primary)]">POST</span> request
+                  to your endpoint with a JSON payload containing document metadata and operation details.
+                </p>
               </div>
-            </div>
-            <div>
-              <h4 className="font-bold mb-2">Verifying requests</h4>
-              <p className="text-sm text-[var(--kyro-text-secondary)]">
-                If you provide a signing secret, the request will include an
-                X-Kyro-Signature header that you can use to verify the request
-                came from Kyro CMS.
-              </p>
-            </div>
-            <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4">
-              <div className="flex items-start gap-2">
-                <Shield className="w-5 h-5 text-amber-500 flex-shrink-0" />
-                <p className="text-sm text-[var(--kyro-text-secondary)]">
-                  Always verify webhook signatures in production to ensure
-                  requests are authentic.
+              <div className="p-6 rounded-3xl bg-[var(--kyro-surface-accent)]/50 border border-[var(--kyro-border)]">
+                <h4 className="font-bold mb-3 flex items-center gap-2">
+                  <Shield className="w-4 h-4 text-[var(--kyro-primary)]" />
+                  Security Verification
+                </h4>
+                <p className="text-sm text-[var(--kyro-text-secondary)] leading-relaxed">
+                  If a secret is provided, each request includes an <span className="font-mono text-[var(--kyro-primary)]">X-Kyro-Signature</span> header.
+                  Always verify this signature in production environments.
                 </p>
               </div>
             </div>
+
+            <div className="space-y-3">
+              <h4 className="text-xs font-bold uppercase tracking-widest opacity-40 px-1">Payload Architecture</h4>
+              <div className="relative group">
+                <div className="absolute -inset-1 bg-gradient-to-r from-[var(--kyro-primary)]/20 to-transparent rounded-2xl blur opacity-25 group-hover:opacity-50 transition-all"></div>
+                <div className="relative bg-[var(--kyro-bg)] rounded-2xl border border-[var(--kyro-border)] p-6 font-mono text-sm overflow-hidden">
+                  <div className="flex items-center gap-2 mb-4 border-b border-[var(--kyro-border)] pb-4 opacity-30">
+                    <div className="w-2 h-2 rounded-full bg-red-500/50" />
+                    <div className="w-2 h-2 rounded-full bg-amber-500/50" />
+                    <div className="w-2 h-2 rounded-full bg-green-500/50" />
+                    <span className="text-[10px] ml-2 tracking-tighter">payload.json</span>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="text-[var(--kyro-text-secondary)]">{"{"}</div>
+                    <div className="pl-4"><span className="text-[var(--kyro-primary)]">"event"</span>: <span className="text-green-500">"collection.create"</span>,</div>
+                    <div className="pl-4"><span className="text-[var(--kyro-primary)]">"collection"</span>: <span className="text-green-500">"products"</span>,</div>
+                    <div className="pl-4"><span className="text-[var(--kyro-primary)]">"id"</span>: <span className="text-green-500">"prod_8273"</span>,</div>
+                    <div className="pl-4"><span className="text-[var(--kyro-primary)]">"timestamp"</span>: <span className="text-green-500">"2026-05-14T02:53:22Z"</span></div>
+                    <div className="text-[var(--kyro-text-secondary)]">{"}"}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </ModalContent>
         <ModalActions>
           <button
             type="button"
             onClick={() => setShowHelpModal(false)}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+            className="w-full py-3 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
           >
-            Got it
+            I Understand
           </button>
         </ModalActions>
       </Modal>