From be224f7508003265f3d913342d2dda6ee1da9431 Mon Sep 17 00:00:00 2001
From: Haqeem Solehan <93633646+julap99@users.noreply.github.com>
Date: Fri, 30 May 2025 15:32:19 +0800
Subject: [PATCH] Add notification delivery management pages, including
 Delivery Monitor, Provider Management, and Webhook Management. Implement
 real-time metrics, message tracking, and provider configuration features.
 Enhance UI with detailed statistics, performance tracking, and delivery logs
 for improved user experience.

---
 pages/notification/delivery/index.vue     | 952 +++++++++++++++++++++-
 pages/notification/delivery/monitor.vue   | 661 +++++++++++++++
 pages/notification/delivery/providers.vue | 817 +++++++++++++++++++
 pages/notification/delivery/webhooks.vue  | 822 +++++++++++++++++++
 4 files changed, 3250 insertions(+), 2 deletions(-)
 create mode 100644 pages/notification/delivery/monitor.vue
 create mode 100644 pages/notification/delivery/providers.vue
 create mode 100644 pages/notification/delivery/webhooks.vue

diff --git a/pages/notification/delivery/index.vue b/pages/notification/delivery/index.vue
index 677f24b..d8d4be9 100644
--- a/pages/notification/delivery/index.vue
+++ b/pages/notification/delivery/index.vue
@@ -1,7 +1,955 @@
 <template>
-  <div></div>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Page Info Card -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon class="mr-2 text-primary" name="ic:outline-send"></Icon>
+          <h1 class="text-xl font-bold text-primary">Notification Delivery Engine</h1>
+        </div>
+      </template>
+      <template #body>
+        <p class="text-gray-600">
+          The heart of the system responsible for reliably delivering notifications to
+          users across multiple channels. Features intelligent routing, fault-tolerance,
+          real-time tracking, and deep observability.
+        </p>
+      </template>
+    </rs-card>
+
+    <!-- Quick Stats -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
+      <rs-card
+        v-for="(stat, index) in deliveryStats"
+        :key="index"
+        class="transition-all duration-300 hover:shadow-lg"
+      >
+        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div
+            class="p-5 flex justify-center items-center bg-primary/20 rounded-2xl transition-all duration-300 hover:bg-primary/30"
+          >
+            <Icon class="text-primary text-3xl" :name="stat.icon"></Icon>
+          </div>
+          <div class="flex-1 truncate">
+            <span class="block font-bold text-2xl leading-tight text-primary">
+              {{ stat.value }}
+            </span>
+            <span class="text-sm font-medium text-gray-600">
+              {{ stat.title }}
+            </span>
+          </div>
+        </div>
+      </rs-card>
+    </div>
+
+    <!-- Main Features Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <!-- Multi-Channel Delivery -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-alt-route"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Multi-Channel Delivery</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showChannelModal = true"
+            >
+              Configure
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="channel in channels"
+              :key="channel.type"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2 text-primary" :name="channel.icon"></Icon>
+                  <span class="font-semibold">{{ channel.name }}</span>
+                </div>
+                <rs-badge
+                  :variant="channel.status === 'active' ? 'success' : 'secondary'"
+                >
+                  {{ channel.status }}
+                </rs-badge>
+              </div>
+              <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span class="text-gray-600">Provider:</span>
+                  <span class="ml-2 font-medium">{{ channel.provider }}</span>
+                </div>
+                <div>
+                  <span class="text-gray-600">Success Rate:</span>
+                  <span class="ml-2 font-medium">{{ channel.successRate }}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Real-time Status Tracking -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-track-changes"></Icon>
+              <h2 class="text-lg font-semibold text-primary">
+                Real-time Status Tracking
+              </h2>
+            </div>
+            <rs-button size="sm" variant="primary-outline" @click="refreshStatusData">
+              Refresh
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-3">
+            <div
+              v-for="status in deliveryStatuses"
+              :key="status.stage"
+              class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
+            >
+              <div class="flex items-center">
+                <Icon class="mr-2" :name="status.icon" :class="status.color"></Icon>
+                <span class="font-medium">{{ status.stage }}</span>
+              </div>
+              <div class="text-right">
+                <div class="font-bold text-lg">{{ status.count }}</div>
+                <div class="text-xs text-gray-500">{{ status.percentage }}%</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Fallback Mechanisms -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-route"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Fallback Mechanisms</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showFallbackModal = true"
+            >
+              Manage
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="fallback in fallbackRules"
+              :key="fallback.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <span class="font-semibold">{{ fallback.name }}</span>
+                <rs-badge :variant="fallback.enabled ? 'success' : 'secondary'">
+                  {{ fallback.enabled ? "Active" : "Disabled" }}
+                </rs-badge>
+              </div>
+              <div class="text-sm text-gray-600">
+                <div>Primary: {{ fallback.primary }}</div>
+                <div>Fallback: {{ fallback.fallback }}</div>
+                <div>Trigger: {{ fallback.trigger }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Delivery Optimization -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-tune"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Delivery Optimization</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showOptimizationModal = true"
+            >
+              Settings
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div class="border border-gray-200 rounded-lg p-4">
+              <h4 class="font-semibold mb-2">Smart Routing</h4>
+              <div class="text-sm text-gray-600 space-y-1">
+                <div>Best performing provider per region</div>
+                <div>Dynamic route selection based on success rates</div>
+                <div>Geographic optimization enabled</div>
+              </div>
+            </div>
+            <div class="border border-gray-200 rounded-lg p-4">
+              <h4 class="font-semibold mb-2">Timing Optimization</h4>
+              <div class="text-sm text-gray-600 space-y-1">
+                <div>Off-peak scheduling for non-critical messages</div>
+                <div>Timezone-aware delivery</div>
+                <div>Quiet hours enforcement</div>
+              </div>
+            </div>
+            <div class="border border-gray-200 rounded-lg p-4">
+              <h4 class="font-semibold mb-2">Rate Limiting</h4>
+              <div class="text-sm text-gray-600 space-y-1">
+                <div>Bulk traffic throttling active</div>
+                <div>Provider quota management</div>
+                <div>Anti-blacklisting protection</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Bounce Handling & Recent Activity -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <!-- Bounce Handling -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-bounce-rate"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Bounce Handling</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showBounceModal = true"
+            >
+              View All
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <div class="text-center p-3 bg-red-50 rounded-lg">
+                <div class="font-bold text-2xl text-red-600">{{ bounceStats.hard }}</div>
+                <div class="text-sm text-red-600">Hard Bounces</div>
+              </div>
+              <div class="text-center p-3 bg-yellow-50 rounded-lg">
+                <div class="font-bold text-2xl text-yellow-600">
+                  {{ bounceStats.soft }}
+                </div>
+                <div class="text-sm text-yellow-600">Soft Bounces</div>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div
+                v-for="bounce in recentBounces"
+                :key="bounce.id"
+                class="flex items-center justify-between p-2 border border-gray-200 rounded"
+              >
+                <div class="flex items-center">
+                  <Icon
+                    class="mr-2"
+                    :name="
+                      bounce.type === 'hard' ? 'ic:outline-error' : 'ic:outline-warning'
+                    "
+                    :class="bounce.type === 'hard' ? 'text-red-500' : 'text-yellow-500'"
+                  ></Icon>
+                  <div>
+                    <div class="font-medium text-sm">{{ bounce.recipient }}</div>
+                    <div class="text-xs text-gray-500">{{ bounce.reason }}</div>
+                  </div>
+                </div>
+                <div class="text-xs text-gray-500">{{ bounce.time }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Recent Delivery Activity -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-history"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Recent Activity</h2>
+            </div>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-3">
+            <div
+              v-for="activity in recentActivity"
+              :key="activity.id"
+              class="flex items-center p-3 border border-gray-200 rounded-lg"
+            >
+              <Icon
+                class="mr-3"
+                :name="activity.icon"
+                :class="activity.statusColor"
+              ></Icon>
+              <div class="flex-1">
+                <div class="font-medium text-sm">{{ activity.message }}</div>
+                <div class="text-xs text-gray-500">
+                  {{ activity.channel }} • {{ activity.time }}
+                </div>
+              </div>
+              <rs-badge :variant="activity.badgeVariant" size="sm">
+                {{ activity.status }}
+              </rs-badge>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Third-Party Integrations & Webhooks -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <!-- Third-Party Integrations -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-extension"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Third-Party Integrations</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showIntegrationsModal = true"
+            >
+              Manage
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="integration in integrations"
+              :key="integration.id"
+              class="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
+            >
+              <div class="flex items-center">
+                <Icon class="mr-3 text-2xl" :name="integration.icon"></Icon>
+                <div>
+                  <div class="font-semibold">{{ integration.name }}</div>
+                  <div class="text-sm text-gray-600">{{ integration.description }}</div>
+                </div>
+              </div>
+              <div class="text-right">
+                <rs-badge
+                  :variant="integration.status === 'connected' ? 'success' : 'danger'"
+                  size="sm"
+                >
+                  {{ integration.status }}
+                </rs-badge>
+                <div class="text-xs text-gray-500 mt-1">{{ integration.lastSync }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Webhook Configuration -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-webhook"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Webhook Configuration</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showWebhookModal = true"
+            >
+              Add Webhook
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="webhook in webhooks"
+              :key="webhook.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <div class="font-semibold">{{ webhook.name }}</div>
+                <rs-badge :variant="webhook.enabled ? 'success' : 'secondary'" size="sm">
+                  {{ webhook.enabled ? "Active" : "Disabled" }}
+                </rs-badge>
+              </div>
+              <div class="text-sm text-gray-600 space-y-1">
+                <div>URL: {{ webhook.url }}</div>
+                <div>Events: {{ webhook.events.join(", ") }}</div>
+                <div>Last delivery: {{ webhook.lastDelivery }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Delivery Reports -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <Icon class="mr-2 text-primary" name="ic:outline-assessment"></Icon>
+            <h2 class="text-lg font-semibold text-primary">Delivery Reports</h2>
+          </div>
+          <div class="flex gap-2">
+            <rs-button size="sm" variant="primary-outline" @click="exportReports">
+              Export
+            </rs-button>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="showReportModal = true"
+            >
+              Generate Report
+            </rs-button>
+          </div>
+        </div>
+      </template>
+      <template #body>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div class="text-center p-4 bg-blue-50 rounded-lg">
+            <div class="font-bold text-3xl text-blue-600">{{ reports.totalSent }}</div>
+            <div class="text-blue-600 font-medium">Total Messages Sent</div>
+            <div class="text-sm text-gray-500 mt-1">Last 24 hours</div>
+          </div>
+          <div class="text-center p-4 bg-green-50 rounded-lg">
+            <div class="font-bold text-3xl text-green-600">
+              {{ reports.successRate }}%
+            </div>
+            <div class="text-green-600 font-medium">Overall Success Rate</div>
+            <div class="text-sm text-gray-500 mt-1">7-day average</div>
+          </div>
+          <div class="text-center p-4 bg-purple-50 rounded-lg">
+            <div class="font-bold text-3xl text-purple-600">
+              {{ reports.avgDeliveryTime }}s
+            </div>
+            <div class="text-purple-600 font-medium">Avg Delivery Time</div>
+            <div class="text-sm text-gray-500 mt-1">End-to-end</div>
+          </div>
+        </div>
+
+        <div class="mt-6">
+          <h4 class="font-semibold mb-4">Channel Performance</h4>
+          <div class="space-y-3">
+            <div
+              v-for="channelReport in channelReports"
+              :key="channelReport.channel"
+              class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"
+            >
+              <div class="flex items-center">
+                <Icon class="mr-3" :name="channelReport.icon"></Icon>
+                <span class="font-medium">{{ channelReport.channel }}</span>
+              </div>
+              <div class="flex gap-6 text-sm">
+                <div>
+                  <span class="text-gray-600">Sent:</span>
+                  <span class="ml-1 font-medium">{{ channelReport.sent }}</span>
+                </div>
+                <div>
+                  <span class="text-gray-600">Success:</span>
+                  <span class="ml-1 font-medium">{{ channelReport.successRate }}%</span>
+                </div>
+                <div>
+                  <span class="text-gray-600">Avg Time:</span>
+                  <span class="ml-1 font-medium">{{ channelReport.avgTime }}s</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Modals would go here - Channel Config, Fallback Rules, etc. -->
+    <!-- For brevity, showing one example modal -->
+
+    <!-- Channel Configuration Modal -->
+    <rs-modal v-model="showChannelModal" size="lg">
+      <template #header>
+        <h3 class="text-lg font-semibold">Channel Configuration</h3>
+      </template>
+      <template #body>
+        <div class="space-y-6">
+          <div
+            v-for="channel in channels"
+            :key="channel.type"
+            class="border border-gray-200 rounded-lg p-4"
+          >
+            <div class="flex items-center justify-between mb-4">
+              <div class="flex items-center">
+                <Icon class="mr-2" :name="channel.icon"></Icon>
+                <span class="font-semibold">{{ channel.name }}</span>
+              </div>
+              <FormKit type="toggle" v-model="channel.enabled" name="enabled" />
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <FormKit
+                  type="select"
+                  label="Primary Provider"
+                  :value="channel.provider"
+                  :options="channel.providerOptions"
+                />
+              </div>
+              <div>
+                <FormKit
+                  type="select"
+                  label="Fallback Provider"
+                  :value="channel.fallbackProvider"
+                  :options="channel.providerOptions"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <rs-button variant="outline" @click="showChannelModal = false"
+            >Cancel</rs-button
+          >
+          <rs-button variant="primary" @click="saveChannelConfig"
+            >Save Configuration</rs-button
+          >
+        </div>
+      </template>
+    </rs-modal>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+definePageMeta({
+  title: "Notification Delivery Engine",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "Dashboard",
+      path: "/dashboard",
+    },
+    {
+      name: "Notification",
+      path: "/notification",
+    },
+    {
+      name: "Delivery Engine",
+      path: "/notification/delivery",
+      type: "current",
+    },
+  ],
+});
+
+// Modal states
+const showChannelModal = ref(false);
+const showFallbackModal = ref(false);
+const showOptimizationModal = ref(false);
+const showBounceModal = ref(false);
+const showIntegrationsModal = ref(false);
+const showWebhookModal = ref(false);
+const showReportModal = ref(false);
+
+// Quick delivery stats
+const deliveryStats = ref([
+  {
+    title: "Messages/Hour",
+    value: "15.2K",
+    icon: "ic:outline-speed",
+  },
+  {
+    title: "Success Rate",
+    value: "98.7%",
+    icon: "ic:outline-check-circle",
+  },
+  {
+    title: "Active Channels",
+    value: "4",
+    icon: "ic:outline-alt-route",
+  },
+  {
+    title: "Avg Delivery Time",
+    value: "1.2s",
+    icon: "ic:outline-timer",
+  },
+]);
+
+// Multi-channel delivery data
+const channels = ref([
+  {
+    type: "email",
+    name: "Email",
+    icon: "ic:outline-email",
+    status: "active",
+    provider: "SendGrid",
+    fallbackProvider: "Mailgun",
+    successRate: 99.2,
+    enabled: true,
+    providerOptions: [
+      { label: "SendGrid", value: "sendgrid" },
+      { label: "Mailgun", value: "mailgun" },
+      { label: "AWS SES", value: "ses" },
+      { label: "Postmark", value: "postmark" },
+    ],
+  },
+  {
+    type: "sms",
+    name: "SMS",
+    icon: "ic:outline-sms",
+    status: "active",
+    provider: "Twilio",
+    fallbackProvider: "Nexmo",
+    successRate: 97.8,
+    enabled: true,
+    providerOptions: [
+      { label: "Twilio", value: "twilio" },
+      { label: "Nexmo", value: "nexmo" },
+      { label: "CM.com", value: "cm" },
+    ],
+  },
+  {
+    type: "push",
+    name: "Push Notifications",
+    icon: "ic:outline-notifications",
+    status: "active",
+    provider: "FCM",
+    fallbackProvider: "APNs",
+    successRate: 95.4,
+    enabled: true,
+    providerOptions: [
+      { label: "Firebase FCM", value: "fcm" },
+      { label: "Apple APNs", value: "apns" },
+      { label: "OneSignal", value: "onesignal" },
+    ],
+  },
+  {
+    type: "inapp",
+    name: "In-App",
+    icon: "ic:outline-app-registration",
+    status: "active",
+    provider: "WebSocket",
+    fallbackProvider: "Polling",
+    successRate: 99.9,
+    enabled: true,
+    providerOptions: [
+      { label: "WebSocket", value: "websocket" },
+      { label: "Server-Sent Events", value: "sse" },
+      { label: "Polling", value: "polling" },
+    ],
+  },
+]);
+
+// Real-time delivery status tracking
+const deliveryStatuses = ref([
+  {
+    stage: "Queued",
+    count: 1247,
+    percentage: 5.2,
+    icon: "ic:outline-queue",
+    color: "text-blue-500",
+  },
+  {
+    stage: "Sent",
+    count: 18563,
+    percentage: 77.8,
+    icon: "ic:outline-send",
+    color: "text-yellow-500",
+  },
+  {
+    stage: "Delivered",
+    count: 17821,
+    percentage: 74.7,
+    icon: "ic:outline-check-circle",
+    color: "text-green-500",
+  },
+  {
+    stage: "Opened",
+    count: 12456,
+    percentage: 52.2,
+    icon: "ic:outline-mark-email-read",
+    color: "text-purple-500",
+  },
+  {
+    stage: "Failed",
+    count: 324,
+    percentage: 1.4,
+    icon: "ic:outline-error",
+    color: "text-red-500",
+  },
+  {
+    stage: "Bounced",
+    count: 187,
+    percentage: 0.8,
+    icon: "ic:outline-reply",
+    color: "text-orange-500",
+  },
+]);
+
+// Fallback mechanism rules
+const fallbackRules = ref([
+  {
+    id: 1,
+    name: "Email to SMS Fallback",
+    primary: "Email (SendGrid)",
+    fallback: "SMS (Twilio)",
+    trigger: "Hard bounce or 30s timeout",
+    enabled: true,
+  },
+  {
+    id: 2,
+    name: "Provider Failover",
+    primary: "SendGrid",
+    fallback: "Mailgun",
+    trigger: "API error or rate limit",
+    enabled: true,
+  },
+  {
+    id: 3,
+    name: "Push to In-App",
+    primary: "Push Notification",
+    fallback: "In-App Notification",
+    trigger: "Device offline",
+    enabled: false,
+  },
+  {
+    id: 4,
+    name: "SMS Regional Failover",
+    primary: "Twilio",
+    fallback: "Local Carrier",
+    trigger: "Region-specific delivery failure",
+    enabled: true,
+  },
+]);
+
+// Bounce handling statistics
+const bounceStats = ref({
+  hard: 47,
+  soft: 128,
+});
+
+// Recent bounces
+const recentBounces = ref([
+  {
+    id: 1,
+    recipient: "user@invalid.com",
+    type: "hard",
+    reason: "Domain not found",
+    time: "2 min ago",
+  },
+  {
+    id: 2,
+    recipient: "+1234567890",
+    type: "soft",
+    reason: "Temporary network issue",
+    time: "5 min ago",
+  },
+  {
+    id: 3,
+    recipient: "blocked@example.com",
+    type: "hard",
+    reason: "Recipient blocked sender",
+    time: "8 min ago",
+  },
+]);
+
+// Recent delivery activity
+const recentActivity = ref([
+  {
+    id: 1,
+    message: "Bulk email campaign completed",
+    channel: "Email",
+    status: "Success",
+    badgeVariant: "success",
+    icon: "ic:outline-email",
+    statusColor: "text-green-500",
+    time: "1 min ago",
+  },
+  {
+    id: 2,
+    message: "SMS OTP batch processing",
+    channel: "SMS",
+    status: "Processing",
+    badgeVariant: "warning",
+    icon: "ic:outline-sms",
+    statusColor: "text-yellow-500",
+    time: "3 min ago",
+  },
+  {
+    id: 3,
+    message: "Push notification sent to 1.2K devices",
+    channel: "Push",
+    status: "Delivered",
+    badgeVariant: "success",
+    icon: "ic:outline-notifications",
+    statusColor: "text-green-500",
+    time: "5 min ago",
+  },
+  {
+    id: 4,
+    message: "Webhook delivery failed",
+    channel: "Webhook",
+    status: "Failed",
+    badgeVariant: "danger",
+    icon: "ic:outline-webhook",
+    statusColor: "text-red-500",
+    time: "7 min ago",
+  },
+]);
+
+// Third-party integrations
+const integrations = ref([
+  {
+    id: 1,
+    name: "SendGrid",
+    description: "Email delivery service",
+    status: "connected",
+    icon: "ic:outline-email",
+    lastSync: "2 min ago",
+  },
+  {
+    id: 2,
+    name: "Twilio",
+    description: "SMS & Voice API",
+    status: "connected",
+    icon: "ic:outline-sms",
+    lastSync: "5 min ago",
+  },
+  {
+    id: 3,
+    name: "Firebase FCM",
+    description: "Push notifications",
+    status: "connected",
+    icon: "ic:outline-notifications",
+    lastSync: "1 min ago",
+  },
+  {
+    id: 4,
+    name: "Slack",
+    description: "Team notifications",
+    status: "disconnected",
+    icon: "ic:outline-chat",
+    lastSync: "Never",
+  },
+]);
+
+// Webhook configurations
+const webhooks = ref([
+  {
+    id: 1,
+    name: "CRM Integration",
+    url: "https://api.crm.com/webhooks/delivery",
+    events: ["delivered", "opened", "bounced"],
+    enabled: true,
+    lastDelivery: "2 min ago",
+  },
+  {
+    id: 2,
+    name: "Analytics Platform",
+    url: "https://analytics.example.com/webhook",
+    events: ["sent", "delivered", "failed"],
+    enabled: true,
+    lastDelivery: "5 min ago",
+  },
+  {
+    id: 3,
+    name: "Support System",
+    url: "https://support.example.com/notify",
+    events: ["failed", "bounced"],
+    enabled: false,
+    lastDelivery: "1 hour ago",
+  },
+]);
+
+// Delivery reports
+const reports = ref({
+  totalSent: "245,678",
+  successRate: 98.7,
+  avgDeliveryTime: 1.2,
+});
+
+// Channel-specific reports
+const channelReports = ref([
+  {
+    channel: "Email",
+    icon: "ic:outline-email",
+    sent: "156,234",
+    successRate: 99.2,
+    avgTime: 0.8,
+  },
+  {
+    channel: "SMS",
+    icon: "ic:outline-sms",
+    sent: "45,678",
+    successRate: 97.8,
+    avgTime: 2.1,
+  },
+  {
+    channel: "Push",
+    icon: "ic:outline-notifications",
+    sent: "89,123",
+    successRate: 95.4,
+    avgTime: 0.3,
+  },
+  {
+    channel: "In-App",
+    icon: "ic:outline-app-registration",
+    sent: "34,567",
+    successRate: 99.9,
+    avgTime: 0.1,
+  },
+]);
+
+// Methods
+function refreshStatusData() {
+  // Simulate real-time data refresh
+  console.log("Refreshing delivery status data...");
+  // In real implementation, this would fetch latest data from API
+}
+
+function saveChannelConfig() {
+  // Save channel configuration
+  console.log("Saving channel configuration...", channels.value);
+  showChannelModal.value = false;
+  // Show success toast
+}
+
+function exportReports() {
+  // Export delivery reports
+  console.log("Exporting delivery reports...");
+  // In real implementation, this would generate and download reports
+}
+
+// Auto-refresh data every 30 seconds
+let refreshInterval;
+onMounted(() => {
+  refreshInterval = setInterval(refreshStatusData, 30000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+  }
+});
+</script>
 
 <style lang="scss" scoped></style>
diff --git a/pages/notification/delivery/monitor.vue b/pages/notification/delivery/monitor.vue
new file mode 100644
index 0000000..78e643c
--- /dev/null
+++ b/pages/notification/delivery/monitor.vue
@@ -0,0 +1,661 @@
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Page Info Card -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon class="mr-2 text-primary" name="ic:outline-monitor"></Icon>
+          <h1 class="text-xl font-bold text-primary">Delivery Monitor</h1>
+        </div>
+      </template>
+      <template #body>
+        <p class="text-gray-600">
+          Real-time monitoring of notification deliveries across all channels. Track individual messages, 
+          monitor batch progress, and analyze delivery performance with detailed metrics.
+        </p>
+      </template>
+    </rs-card>
+
+    <!-- Real-time Metrics -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
+      <rs-card
+        v-for="(metric, index) in realTimeMetrics"
+        :key="index"
+        class="transition-all duration-300 hover:shadow-lg"
+      >
+        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div
+            class="p-5 flex justify-center items-center rounded-2xl transition-all duration-300"
+            :class="metric.bgColor"
+          >
+            <Icon class="text-3xl" :name="metric.icon" :class="metric.iconColor"></Icon>
+          </div>
+          <div class="flex-1 truncate">
+            <span class="block font-bold text-2xl leading-tight" :class="metric.textColor">
+              {{ metric.value }}
+            </span>
+            <span class="text-sm font-medium text-gray-600">
+              {{ metric.title }}
+            </span>
+          </div>
+        </div>
+      </rs-card>
+    </div>
+
+    <!-- Message Search & Filter -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold text-primary">Message Tracking</h2>
+          <div class="flex gap-2">
+            <rs-button size="sm" variant="primary-outline" @click="refreshMessages">
+              <Icon class="mr-1" name="ic:outline-refresh"></Icon>
+              Refresh
+            </rs-button>
+            <rs-button size="sm" variant="primary-outline" @click="showFilters = !showFilters">
+              <Icon class="mr-1" name="ic:outline-filter-list"></Icon>
+              Filters
+            </rs-button>
+          </div>
+        </div>
+      </template>
+      <template #body>
+        <!-- Search and Filters -->
+        <div class="mb-6 space-y-4">
+          <div class="flex gap-4">
+            <div class="flex-1">
+              <FormKit
+                type="text"
+                v-model="searchQuery"
+                placeholder="Search by message ID, recipient, or content..."
+                prefix-icon="search"
+              />
+            </div>
+            <div class="w-48">
+              <FormKit
+                type="select"
+                v-model="selectedChannel"
+                :options="channelFilterOptions"
+                placeholder="All Channels"
+              />
+            </div>
+          </div>
+          
+          <!-- Advanced Filters -->
+          <div v-if="showFilters" class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4 bg-gray-50 rounded-lg">
+            <FormKit
+              type="select"
+              v-model="filters.status"
+              :options="statusFilterOptions"
+              label="Status"
+            />
+            <FormKit
+              type="select"
+              v-model="filters.priority"
+              :options="priorityFilterOptions"
+              label="Priority"
+            />
+            <FormKit
+              type="date"
+              v-model="filters.dateFrom"
+              label="From Date"
+            />
+            <FormKit
+              type="date"
+              v-model="filters.dateTo"
+              label="To Date"
+            />
+          </div>
+        </div>
+
+        <!-- Messages Table -->
+        <rs-table
+          :field="messageTableFields"
+          :data="filteredMessages"
+          :advanced="true"
+          :options="{ striped: true, hover: true }"
+          :optionsAdvanced="{
+            sortable: true,
+            filterable: true,
+            responsive: true,
+          }"
+          :pageSize="20"
+        >
+          <template #messageId="{ row }">
+            <button 
+              @click="viewMessageDetails(row)"
+              class="text-primary hover:underline font-mono text-sm"
+            >
+              {{ row.messageId }}
+            </button>
+          </template>
+
+          <template #status="{ row }">
+            <rs-badge :variant="getStatusVariant(row.status)" size="sm">
+              {{ row.status }}
+            </rs-badge>
+          </template>
+
+          <template #channel="{ row }">
+            <div class="flex items-center">
+              <Icon class="mr-2" :name="getChannelIcon(row.channel)"></Icon>
+              {{ row.channel }}
+            </div>
+          </template>
+
+          <template #priority="{ row }">
+            <rs-badge 
+              :variant="getPriorityVariant(row.priority)" 
+              size="sm"
+            >
+              {{ row.priority }}
+            </rs-badge>
+          </template>
+
+          <template #progress="{ row }">
+            <div class="w-full bg-gray-200 rounded-full h-2">
+              <div 
+                class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                :style="{ width: row.progress + '%' }"
+              ></div>
+            </div>
+            <div class="text-xs text-gray-500 mt-1">{{ row.progress }}%</div>
+          </template>
+
+          <template #actions="{ row }">
+            <div class="flex gap-2">
+              <rs-button 
+                size="sm" 
+                variant="primary-outline"
+                @click="viewMessageDetails(row)"
+              >
+                <Icon name="ic:outline-visibility"></Icon>
+              </rs-button>
+              <rs-button 
+                size="sm" 
+                variant="secondary-outline"
+                @click="retryMessage(row)"
+                v-if="row.status === 'failed'"
+              >
+                <Icon name="ic:outline-refresh"></Icon>
+              </rs-button>
+            </div>
+          </template>
+        </rs-table>
+      </template>
+    </rs-card>
+
+    <!-- Live Activity Feed -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      
+      <!-- Real-time Activity -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-live-tv"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Live Activity</h2>
+            </div>
+            <rs-badge variant="success" size="sm">Live</rs-badge>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-3 max-h-96 overflow-y-auto">
+            <div 
+              v-for="activity in liveActivities"
+              :key="activity.id"
+              class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg"
+            >
+              <Icon 
+                class="mt-1 flex-shrink-0"
+                :name="activity.icon"
+                :class="activity.iconColor"
+              ></Icon>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium text-sm">{{ activity.message }}</div>
+                <div class="text-xs text-gray-500">{{ activity.timestamp }}</div>
+                <div v-if="activity.details" class="text-xs text-gray-600 mt-1">
+                  {{ activity.details }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Channel Performance -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center">
+            <Icon class="mr-2 text-primary" name="ic:outline-speed"></Icon>
+            <h2 class="text-lg font-semibold text-primary">Channel Performance</h2>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div 
+              v-for="channel in channelPerformance"
+              :key="channel.name"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2" :name="channel.icon"></Icon>
+                  <span class="font-semibold">{{ channel.name }}</span>
+                </div>
+                <rs-badge :variant="channel.statusVariant" size="sm">
+                  {{ channel.status }}
+                </rs-badge>
+              </div>
+              
+              <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <div class="text-gray-600">Throughput</div>
+                  <div class="font-semibold">{{ channel.throughput }}/min</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Success Rate</div>
+                  <div class="font-semibold">{{ channel.successRate }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Avg Latency</div>
+                  <div class="font-semibold">{{ channel.avgLatency }}ms</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Queue Size</div>
+                  <div class="font-semibold">{{ channel.queueSize }}</div>
+                </div>
+              </div>
+              
+              <!-- Performance Chart -->
+              <div class="mt-3">
+                <div class="text-xs text-gray-500 mb-1">Performance Trend</div>
+                <div class="w-full bg-gray-200 rounded-full h-2">
+                  <div 
+                    class="h-2 rounded-full transition-all duration-300"
+                    :class="channel.performanceClass"
+                    :style="{ width: channel.performanceScore + '%' }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+    </div>
+
+    <!-- Message Details Modal -->
+    <rs-modal v-model="showMessageModal" size="lg">
+      <template #header>
+        <h3 class="text-lg font-semibold">Message Details</h3>
+      </template>
+      <template #body>
+        <div v-if="selectedMessage" class="space-y-6">
+          
+          <!-- Message Info -->
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Message ID</label>
+              <div class="font-mono text-sm">{{ selectedMessage.messageId }}</div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
+              <rs-badge :variant="getStatusVariant(selectedMessage.status)">
+                {{ selectedMessage.status }}
+              </rs-badge>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Channel</label>
+              <div class="flex items-center">
+                <Icon class="mr-2" :name="getChannelIcon(selectedMessage.channel)"></Icon>
+                {{ selectedMessage.channel }}
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Priority</label>
+              <rs-badge :variant="getPriorityVariant(selectedMessage.priority)">
+                {{ selectedMessage.priority }}
+              </rs-badge>
+            </div>
+          </div>
+
+          <!-- Delivery Timeline -->
+          <div>
+            <label class="block text-sm font-medium text-gray-500 mb-3">Delivery Timeline</label>
+            <div class="space-y-3">
+              <div 
+                v-for="event in selectedMessage.timeline"
+                :key="event.id"
+                class="flex items-center gap-3"
+              >
+                <div class="w-3 h-3 rounded-full" :class="event.statusColor"></div>
+                <div class="flex-1">
+                  <div class="font-medium text-sm">{{ event.status }}</div>
+                  <div class="text-xs text-gray-500">{{ event.timestamp }}</div>
+                  <div v-if="event.details" class="text-xs text-gray-600">{{ event.details }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Message Content -->
+          <div>
+            <label class="block text-sm font-medium text-gray-500 mb-1">Content</label>
+            <div class="bg-gray-50 rounded-lg p-3 text-sm">
+              <div><strong>To:</strong> {{ selectedMessage.recipient }}</div>
+              <div><strong>Subject:</strong> {{ selectedMessage.subject }}</div>
+              <div class="mt-2"><strong>Body:</strong></div>
+              <div class="mt-1">{{ selectedMessage.content }}</div>
+            </div>
+          </div>
+
+          <!-- Provider Response -->
+          <div v-if="selectedMessage.providerResponse">
+            <label class="block text-sm font-medium text-gray-500 mb-1">Provider Response</label>
+            <div class="bg-gray-50 rounded-lg p-3">
+              <pre class="text-xs">{{ JSON.stringify(selectedMessage.providerResponse, null, 2) }}</pre>
+            </div>
+          </div>
+
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <rs-button variant="outline" @click="showMessageModal = false">Close</rs-button>
+          <rs-button 
+            variant="primary" 
+            @click="retryMessage(selectedMessage)"
+            v-if="selectedMessage?.status === 'failed'"
+          >
+            Retry Message
+          </rs-button>
+        </div>
+      </template>
+    </rs-modal>
+
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  title: "Delivery Monitor",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "Dashboard",
+      path: "/dashboard",
+    },
+    {
+      name: "Notification",
+      path: "/notification",
+    },
+    {
+      name: "Delivery Engine",
+      path: "/notification/delivery",
+    },
+    {
+      name: "Monitor",
+      path: "/notification/delivery/monitor",
+      type: "current",
+    },
+  ],
+});
+
+import { ref, computed, onMounted, onUnmounted } from "vue";
+
+// State
+const showFilters = ref(false);
+const showMessageModal = ref(false);
+const selectedMessage = ref(null);
+const searchQuery = ref("");
+const selectedChannel = ref("");
+
+// Filters
+const filters = ref({
+  status: "",
+  priority: "",
+  dateFrom: "",
+  dateTo: "",
+});
+
+// Real-time metrics
+const realTimeMetrics = ref([
+  {
+    title: "Messages/Min",
+    value: "1,247",
+    icon: "ic:outline-speed",
+    bgColor: "bg-blue-100",
+    iconColor: "text-blue-600",
+    textColor: "text-blue-600",
+  },
+  {
+    title: "Success Rate",
+    value: "98.7%",
+    icon: "ic:outline-check-circle",
+    bgColor: "bg-green-100",
+    iconColor: "text-green-600",
+    textColor: "text-green-600",
+  },
+  {
+    title: "Failed/Retrying",
+    value: "23",
+    icon: "ic:outline-error",
+    bgColor: "bg-red-100",
+    iconColor: "text-red-600",
+    textColor: "text-red-600",
+  },
+  {
+    title: "Avg Latency",
+    value: "1.2s",
+    icon: "ic:outline-timer",
+    bgColor: "bg-purple-100",
+    iconColor: "text-purple-600",
+    textColor: "text-purple-600",
+  },
+]);
+
+// Filter options
+const channelFilterOptions = [
+  { label: "All Channels", value: "" },
+  { label: "Email", value: "email" },
+  { label: "SMS", value: "sms" },
+  { label: "Push", value: "push" },
+  { label: "In-App", value: "inapp" },
+];
+
+const statusFilterOptions = [
+  { label: "All Status", value: "" },
+  { label: "Queued", value: "queued" },
+  { label: "Sent", value: "sent" },
+  { label: "Delivered", value: "delivered" },
+  { label: "Opened", value: "opened" },
+  { label: "Failed", value: "failed" },
+  { label: "Bounced", value: "bounced" },
+];
+
+const priorityFilterOptions = [
+  { label: "All Priorities", value: "" },
+  { label: "Critical", value: "critical" },
+  { label: "High", value: "high" },
+  { label: "Medium", value: "medium" },
+  { label: "Low", value: "low" },
+];
+
+// Table configuration
+const messageTableFields = ref([
+  { key: "messageId", label: "Message ID", sortable: true },
+  { key: "recipient", label: "Recipient", sortable: true },
+  { key: "channel", label: "Channel", sortable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "priority", label: "Priority", sortable: true },
+  { key: "createdAt", label: "Created", sortable: true },
+  { key: "progress", label: "Progress", sortable: false },
+  { key: "actions", label: "Actions", sortable: false },
+]);
+
+// Sample messages data
+const messages = ref([
+  {
+    messageId: "msg_001",
+    recipient: "user@example.com",
+    channel: "Email",
+    status: "delivered",
+    priority: "high",
+    createdAt: "2024-01-15 10:30:00",
+    progress: 100,
+    subject: "Welcome to our platform",
+    content: "Thank you for joining us...",
+    timeline: [
+      { id: 1, status: "Queued", timestamp: "2024-01-15 10:30:00", statusColor: "bg-blue-500", details: "Message queued for processing" },
+      { id: 2, status: "Sent", timestamp: "2024-01-15 10:30:15", statusColor: "bg-yellow-500", details: "Sent via SendGrid" },
+      { id: 3, status: "Delivered", timestamp: "2024-01-15 10:30:18", statusColor: "bg-green-500", details: "Successfully delivered" },
+    ],
+    providerResponse: { messageId: "sg_abc123", status: "delivered" },
+  },
+  // Add more sample data...
+]);
+
+// Live activities
+const liveActivities = ref([
+  {
+    id: 1,
+    message: "Email batch completed",
+    timestamp: "Just now",
+    icon: "ic:outline-email",
+    iconColor: "text-green-500",
+    details: "1,250 emails sent successfully",
+  },
+  {
+    id: 2,
+    message: "SMS delivery in progress",
+    timestamp: "2 seconds ago",
+    icon: "ic:outline-sms",
+    iconColor: "text-blue-500",
+    details: "89/120 messages delivered",
+  },
+  // Add more activities...
+]);
+
+// Channel performance
+const channelPerformance = ref([
+  {
+    name: "Email",
+    icon: "ic:outline-email",
+    status: "Healthy",
+    statusVariant: "success",
+    throughput: "1,200",
+    successRate: 99.2,
+    avgLatency: 800,
+    queueSize: 45,
+    performanceScore: 95,
+    performanceClass: "bg-green-500",
+  },
+  {
+    name: "SMS",
+    icon: "ic:outline-sms",
+    status: "Warning",
+    statusVariant: "warning",
+    throughput: "450",
+    successRate: 97.8,
+    avgLatency: 2100,
+    queueSize: 123,
+    performanceScore: 78,
+    performanceClass: "bg-yellow-500",
+  },
+  // Add more channels...
+]);
+
+// Computed
+const filteredMessages = computed(() => {
+  let filtered = messages.value;
+  
+  if (searchQuery.value) {
+    filtered = filtered.filter(msg => 
+      msg.messageId.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      msg.recipient.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+  }
+  
+  if (selectedChannel.value) {
+    filtered = filtered.filter(msg => msg.channel.toLowerCase() === selectedChannel.value);
+  }
+  
+  if (filters.value.status) {
+    filtered = filtered.filter(msg => msg.status === filters.value.status);
+  }
+  
+  if (filters.value.priority) {
+    filtered = filtered.filter(msg => msg.priority === filters.value.priority);
+  }
+  
+  return filtered;
+});
+
+// Methods
+function getStatusVariant(status) {
+  const variants = {
+    queued: "info",
+    sent: "warning",
+    delivered: "success",
+    opened: "success",
+    failed: "danger",
+    bounced: "danger",
+  };
+  return variants[status] || "secondary";
+}
+
+function getChannelIcon(channel) {
+  const icons = {
+    Email: "ic:outline-email",
+    SMS: "ic:outline-sms",
+    Push: "ic:outline-notifications",
+    "In-App": "ic:outline-app-registration",
+  };
+  return icons[channel] || "ic:outline-help";
+}
+
+function getPriorityVariant(priority) {
+  const variants = {
+    critical: "danger",
+    high: "warning",
+    medium: "info",
+    low: "secondary",
+  };
+  return variants[priority] || "secondary";
+}
+
+function viewMessageDetails(message) {
+  selectedMessage.value = message;
+  showMessageModal.value = true;
+}
+
+function retryMessage(message) {
+  console.log("Retrying message:", message.messageId);
+  // Implementation for retrying failed messages
+}
+
+function refreshMessages() {
+  console.log("Refreshing messages...");
+  // Implementation for refreshing message list
+}
+
+// Auto-refresh every 10 seconds
+let refreshInterval;
+onMounted(() => {
+  refreshInterval = setInterval(() => {
+    refreshMessages();
+  }, 10000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style> 
\ No newline at end of file
diff --git a/pages/notification/delivery/providers.vue b/pages/notification/delivery/providers.vue
new file mode 100644
index 0000000..543d0d6
--- /dev/null
+++ b/pages/notification/delivery/providers.vue
@@ -0,0 +1,817 @@
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Page Info Card -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon class="mr-2 text-primary" name="ic:outline-extension"></Icon>
+          <h1 class="text-xl font-bold text-primary">Provider Management</h1>
+        </div>
+      </template>
+      <template #body>
+        <p class="text-gray-600">
+          Configure and manage third-party notification service providers. Set up
+          credentials, fallback rules, and monitor provider performance across all
+          channels.
+        </p>
+      </template>
+    </rs-card>
+
+    <!-- Provider Overview Stats -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
+      <rs-card
+        v-for="(stat, index) in providerStats"
+        :key="index"
+        class="transition-all duration-300 hover:shadow-lg"
+      >
+        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div
+            class="p-5 flex justify-center items-center rounded-2xl transition-all duration-300"
+            :class="stat.bgColor"
+          >
+            <Icon class="text-3xl" :name="stat.icon" :class="stat.iconColor"></Icon>
+          </div>
+          <div class="flex-1 truncate">
+            <span class="block font-bold text-2xl leading-tight" :class="stat.textColor">
+              {{ stat.value }}
+            </span>
+            <span class="text-sm font-medium text-gray-600">
+              {{ stat.title }}
+            </span>
+          </div>
+        </div>
+      </rs-card>
+    </div>
+
+    <!-- Providers by Channel -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <!-- Email Providers -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-email"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Email Providers</h2>
+            </div>
+            <rs-button size="sm" variant="primary-outline" @click="addProvider('email')">
+              <Icon class="mr-1" name="ic:outline-add"></Icon>
+              Add Provider
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="provider in emailProviders"
+              :key="provider.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2 text-2xl" :name="provider.icon"></Icon>
+                  <div>
+                    <div class="font-semibold">{{ provider.name }}</div>
+                    <div class="text-sm text-gray-600">{{ provider.description }}</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <rs-badge
+                    :variant="provider.status === 'active' ? 'success' : 'danger'"
+                    size="sm"
+                  >
+                    {{ provider.status }}
+                  </rs-badge>
+                  <rs-button
+                    size="sm"
+                    variant="secondary-outline"
+                    @click="configureProvider(provider)"
+                  >
+                    <Icon name="ic:outline-settings"></Icon>
+                  </rs-button>
+                </div>
+              </div>
+              <div class="grid grid-cols-3 gap-4 text-sm">
+                <div>
+                  <div class="text-gray-600">Success Rate</div>
+                  <div class="font-semibold">{{ provider.successRate }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Quota Used</div>
+                  <div class="font-semibold">{{ provider.quotaUsed }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Priority</div>
+                  <div class="font-semibold">{{ provider.priority }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- SMS Providers -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-sms"></Icon>
+              <h2 class="text-lg font-semibold text-primary">SMS Providers</h2>
+            </div>
+            <rs-button size="sm" variant="primary-outline" @click="addProvider('sms')">
+              <Icon class="mr-1" name="ic:outline-add"></Icon>
+              Add Provider
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="provider in smsProviders"
+              :key="provider.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2 text-2xl" :name="provider.icon"></Icon>
+                  <div>
+                    <div class="font-semibold">{{ provider.name }}</div>
+                    <div class="text-sm text-gray-600">{{ provider.description }}</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <rs-badge
+                    :variant="provider.status === 'active' ? 'success' : 'danger'"
+                    size="sm"
+                  >
+                    {{ provider.status }}
+                  </rs-badge>
+                  <rs-button
+                    size="sm"
+                    variant="secondary-outline"
+                    @click="configureProvider(provider)"
+                  >
+                    <Icon name="ic:outline-settings"></Icon>
+                  </rs-button>
+                </div>
+              </div>
+              <div class="grid grid-cols-3 gap-4 text-sm">
+                <div>
+                  <div class="text-gray-600">Success Rate</div>
+                  <div class="font-semibold">{{ provider.successRate }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Quota Used</div>
+                  <div class="font-semibold">{{ provider.quotaUsed }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Priority</div>
+                  <div class="font-semibold">{{ provider.priority }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Push Providers -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-notifications"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Push Providers</h2>
+            </div>
+            <rs-button size="sm" variant="primary-outline" @click="addProvider('push')">
+              <Icon class="mr-1" name="ic:outline-add"></Icon>
+              Add Provider
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="provider in pushProviders"
+              :key="provider.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2 text-2xl" :name="provider.icon"></Icon>
+                  <div>
+                    <div class="font-semibold">{{ provider.name }}</div>
+                    <div class="text-sm text-gray-600">{{ provider.description }}</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <rs-badge
+                    :variant="provider.status === 'active' ? 'success' : 'danger'"
+                    size="sm"
+                  >
+                    {{ provider.status }}
+                  </rs-badge>
+                  <rs-button
+                    size="sm"
+                    variant="secondary-outline"
+                    @click="configureProvider(provider)"
+                  >
+                    <Icon name="ic:outline-settings"></Icon>
+                  </rs-button>
+                </div>
+              </div>
+              <div class="grid grid-cols-3 gap-4 text-sm">
+                <div>
+                  <div class="text-gray-600">Success Rate</div>
+                  <div class="font-semibold">{{ provider.successRate }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Quota Used</div>
+                  <div class="font-semibold">{{ provider.quotaUsed }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Priority</div>
+                  <div class="font-semibold">{{ provider.priority }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+
+      <!-- Webhook Providers -->
+      <rs-card>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <Icon class="mr-2 text-primary" name="ic:outline-webhook"></Icon>
+              <h2 class="text-lg font-semibold text-primary">Webhook Endpoints</h2>
+            </div>
+            <rs-button
+              size="sm"
+              variant="primary-outline"
+              @click="addProvider('webhook')"
+            >
+              <Icon class="mr-1" name="ic:outline-add"></Icon>
+              Add Webhook
+            </rs-button>
+          </div>
+        </template>
+        <template #body>
+          <div class="space-y-4">
+            <div
+              v-for="provider in webhookProviders"
+              :key="provider.id"
+              class="border border-gray-200 rounded-lg p-4"
+            >
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center">
+                  <Icon class="mr-2 text-2xl" :name="provider.icon"></Icon>
+                  <div>
+                    <div class="font-semibold">{{ provider.name }}</div>
+                    <div class="text-sm text-gray-600 font-mono">{{ provider.url }}</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <rs-badge
+                    :variant="provider.status === 'active' ? 'success' : 'danger'"
+                    size="sm"
+                  >
+                    {{ provider.status }}
+                  </rs-badge>
+                  <rs-button
+                    size="sm"
+                    variant="secondary-outline"
+                    @click="configureProvider(provider)"
+                  >
+                    <Icon name="ic:outline-settings"></Icon>
+                  </rs-button>
+                </div>
+              </div>
+              <div class="grid grid-cols-3 gap-4 text-sm">
+                <div>
+                  <div class="text-gray-600">Success Rate</div>
+                  <div class="font-semibold">{{ provider.successRate }}%</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Avg Response</div>
+                  <div class="font-semibold">{{ provider.avgResponse }}ms</div>
+                </div>
+                <div>
+                  <div class="text-gray-600">Last Used</div>
+                  <div class="font-semibold">{{ provider.lastUsed }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Fallback Configuration -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <Icon class="mr-2 text-primary" name="ic:outline-alt-route"></Icon>
+            <h2 class="text-lg font-semibold text-primary">Fallback Configuration</h2>
+          </div>
+          <rs-button
+            size="sm"
+            variant="primary-outline"
+            @click="showFallbackModal = true"
+          >
+            <Icon class="mr-1" name="ic:outline-add"></Icon>
+            Add Rule
+          </rs-button>
+        </div>
+      </template>
+      <template #body>
+        <div class="space-y-4">
+          <div
+            v-for="rule in fallbackRules"
+            :key="rule.id"
+            class="border border-gray-200 rounded-lg p-4"
+          >
+            <div class="flex items-center justify-between mb-3">
+              <div>
+                <div class="font-semibold">{{ rule.name }}</div>
+                <div class="text-sm text-gray-600">{{ rule.description }}</div>
+              </div>
+              <div class="flex items-center gap-2">
+                <rs-badge :variant="rule.enabled ? 'success' : 'secondary'" size="sm">
+                  {{ rule.enabled ? "Active" : "Disabled" }}
+                </rs-badge>
+                <rs-button
+                  size="sm"
+                  variant="secondary-outline"
+                  @click="editFallbackRule(rule)"
+                >
+                  <Icon name="ic:outline-edit"></Icon>
+                </rs-button>
+              </div>
+            </div>
+            <div class="text-sm space-y-2">
+              <div class="flex items-center gap-2">
+                <span class="text-gray-600">Primary:</span>
+                <span class="font-medium">{{ rule.primary }}</span>
+                <Icon name="ic:outline-arrow-forward" class="text-gray-400"></Icon>
+                <span class="text-gray-600">Fallback:</span>
+                <span class="font-medium">{{ rule.fallback }}</span>
+              </div>
+              <div>
+                <span class="text-gray-600">Trigger:</span>
+                <span class="font-medium">{{ rule.trigger }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Provider Configuration Modal -->
+    <rs-modal v-model="showProviderModal" size="lg">
+      <template #header>
+        <h3 class="text-lg font-semibold">
+          {{ selectedProvider ? "Configure" : "Add" }} Provider
+        </h3>
+      </template>
+      <template #body>
+        <div v-if="selectedProvider" class="space-y-6">
+          <!-- Basic Info -->
+          <div class="grid grid-cols-2 gap-4">
+            <FormKit
+              type="text"
+              v-model="providerForm.name"
+              label="Provider Name"
+              placeholder="Enter provider name"
+            />
+            <FormKit
+              type="select"
+              v-model="providerForm.channel"
+              label="Channel"
+              :options="channelOptions"
+            />
+          </div>
+
+          <!-- Provider-specific Configuration -->
+          <div v-if="providerForm.channel === 'email'">
+            <h4 class="font-semibold mb-3">Email Configuration</h4>
+            <div class="grid grid-cols-2 gap-4">
+              <FormKit
+                type="select"
+                v-model="providerForm.provider"
+                label="Provider Type"
+                :options="emailProviderOptions"
+              />
+              <FormKit
+                type="password"
+                v-model="providerForm.apiKey"
+                label="API Key"
+                placeholder="Enter API key"
+              />
+              <FormKit
+                type="password"
+                v-model="providerForm.apiSecret"
+                label="API Secret"
+                placeholder="Enter API secret"
+              />
+              <FormKit
+                type="text"
+                v-model="providerForm.fromEmail"
+                label="From Email"
+                placeholder="noreply@example.com"
+              />
+            </div>
+          </div>
+
+          <div v-if="providerForm.channel === 'sms'">
+            <h4 class="font-semibold mb-3">SMS Configuration</h4>
+            <div class="grid grid-cols-2 gap-4">
+              <FormKit
+                type="select"
+                v-model="providerForm.provider"
+                label="Provider Type"
+                :options="smsProviderOptions"
+              />
+              <FormKit
+                type="text"
+                v-model="providerForm.accountSid"
+                label="Account SID"
+                placeholder="Enter account SID"
+              />
+              <FormKit
+                type="password"
+                v-model="providerForm.authToken"
+                label="Auth Token"
+                placeholder="Enter auth token"
+              />
+              <FormKit
+                type="text"
+                v-model="providerForm.fromNumber"
+                label="From Number"
+                placeholder="+1234567890"
+              />
+            </div>
+          </div>
+
+          <!-- Priority & Limits -->
+          <div>
+            <h4 class="font-semibold mb-3">Priority & Limits</h4>
+            <div class="grid grid-cols-3 gap-4">
+              <FormKit
+                type="number"
+                v-model="providerForm.priority"
+                label="Priority"
+                placeholder="1-10"
+                min="1"
+                max="10"
+              />
+              <FormKit
+                type="number"
+                v-model="providerForm.rateLimit"
+                label="Rate Limit (per minute)"
+                placeholder="100"
+              />
+              <FormKit
+                type="number"
+                v-model="providerForm.dailyQuota"
+                label="Daily Quota"
+                placeholder="10000"
+              />
+            </div>
+          </div>
+
+          <!-- Test Connection -->
+          <div class="border border-gray-200 rounded-lg p-4">
+            <h4 class="font-semibold mb-3">Test Connection</h4>
+            <div class="flex items-center gap-3">
+              <rs-button variant="secondary" @click="testProviderConnection">
+                <Icon class="mr-1" name="ic:outline-wifi-tethering"></Icon>
+                Test Connection
+              </rs-button>
+              <div v-if="connectionTestResult" class="flex items-center gap-2">
+                <Icon
+                  :name="
+                    connectionTestResult.success
+                      ? 'ic:outline-check-circle'
+                      : 'ic:outline-error'
+                  "
+                  :class="
+                    connectionTestResult.success ? 'text-green-500' : 'text-red-500'
+                  "
+                ></Icon>
+                <span
+                  :class="
+                    connectionTestResult.success ? 'text-green-600' : 'text-red-600'
+                  "
+                >
+                  {{ connectionTestResult.message }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <rs-button variant="outline" @click="showProviderModal = false"
+            >Cancel</rs-button
+          >
+          <rs-button variant="primary" @click="saveProvider">Save Provider</rs-button>
+        </div>
+      </template>
+    </rs-modal>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  title: "Provider Management",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "Dashboard",
+      path: "/dashboard",
+    },
+    {
+      name: "Notification",
+      path: "/notification",
+    },
+    {
+      name: "Delivery Engine",
+      path: "/notification/delivery",
+    },
+    {
+      name: "Providers",
+      path: "/notification/delivery/providers",
+      type: "current",
+    },
+  ],
+});
+
+import { ref, reactive } from "vue";
+
+// Modal states
+const showProviderModal = ref(false);
+const showFallbackModal = ref(false);
+const selectedProvider = ref(null);
+const connectionTestResult = ref(null);
+
+// Provider form
+const providerForm = reactive({
+  name: "",
+  channel: "",
+  provider: "",
+  apiKey: "",
+  apiSecret: "",
+  accountSid: "",
+  authToken: "",
+  fromEmail: "",
+  fromNumber: "",
+  priority: 5,
+  rateLimit: 100,
+  dailyQuota: 10000,
+});
+
+// Statistics
+const providerStats = ref([
+  {
+    title: "Active Providers",
+    value: "12",
+    icon: "ic:outline-verified",
+    bgColor: "bg-green-100",
+    iconColor: "text-green-600",
+    textColor: "text-green-600",
+  },
+  {
+    title: "Total Messages Today",
+    value: "28.5K",
+    icon: "ic:outline-send",
+    bgColor: "bg-blue-100",
+    iconColor: "text-blue-600",
+    textColor: "text-blue-600",
+  },
+  {
+    title: "Avg Success Rate",
+    value: "98.2%",
+    icon: "ic:outline-trending-up",
+    bgColor: "bg-purple-100",
+    iconColor: "text-purple-600",
+    textColor: "text-purple-600",
+  },
+  {
+    title: "Failed Providers",
+    value: "1",
+    icon: "ic:outline-error",
+    bgColor: "bg-red-100",
+    iconColor: "text-red-600",
+    textColor: "text-red-600",
+  },
+]);
+
+// Provider data
+const emailProviders = ref([
+  {
+    id: 1,
+    name: "SendGrid",
+    description: "Primary email delivery service",
+    icon: "ic:outline-email",
+    status: "active",
+    successRate: 99.2,
+    quotaUsed: 65,
+    priority: 1,
+  },
+  {
+    id: 2,
+    name: "Mailgun",
+    description: "Fallback email service",
+    icon: "ic:outline-email",
+    status: "active",
+    successRate: 98.8,
+    quotaUsed: 23,
+    priority: 2,
+  },
+  {
+    id: 3,
+    name: "AWS SES",
+    description: "Cost-effective bulk email",
+    icon: "ic:outline-cloud",
+    status: "inactive",
+    successRate: 97.5,
+    quotaUsed: 5,
+    priority: 3,
+  },
+]);
+
+const smsProviders = ref([
+  {
+    id: 4,
+    name: "Twilio",
+    description: "Primary SMS service",
+    icon: "ic:outline-sms",
+    status: "active",
+    successRate: 97.8,
+    quotaUsed: 78,
+    priority: 1,
+  },
+  {
+    id: 5,
+    name: "Nexmo",
+    description: "International SMS fallback",
+    icon: "ic:outline-sms",
+    status: "active",
+    successRate: 96.5,
+    quotaUsed: 34,
+    priority: 2,
+  },
+]);
+
+const pushProviders = ref([
+  {
+    id: 6,
+    name: "Firebase FCM",
+    description: "Android push notifications",
+    icon: "ic:outline-notifications",
+    status: "active",
+    successRate: 95.4,
+    quotaUsed: 45,
+    priority: 1,
+  },
+  {
+    id: 7,
+    name: "Apple APNs",
+    description: "iOS push notifications",
+    icon: "ic:outline-phone-iphone",
+    status: "active",
+    successRate: 94.8,
+    quotaUsed: 52,
+    priority: 1,
+  },
+]);
+
+const webhookProviders = ref([
+  {
+    id: 8,
+    name: "CRM Webhook",
+    url: "https://api.crm.com/webhooks/delivery",
+    icon: "ic:outline-webhook",
+    status: "active",
+    successRate: 99.1,
+    avgResponse: 150,
+    lastUsed: "2 min ago",
+  },
+  {
+    id: 9,
+    name: "Analytics Webhook",
+    url: "https://analytics.example.com/webhook",
+    icon: "ic:outline-analytics",
+    status: "active",
+    successRate: 98.7,
+    avgResponse: 89,
+    lastUsed: "5 min ago",
+  },
+]);
+
+// Fallback rules
+const fallbackRules = ref([
+  {
+    id: 1,
+    name: "Email Provider Failover",
+    description: "Switch from SendGrid to Mailgun on failure",
+    primary: "SendGrid",
+    fallback: "Mailgun",
+    trigger: "API error or rate limit exceeded",
+    enabled: true,
+  },
+  {
+    id: 2,
+    name: "SMS Provider Failover",
+    description: "Switch from Twilio to Nexmo on failure",
+    primary: "Twilio",
+    fallback: "Nexmo",
+    trigger: "Delivery failure or timeout",
+    enabled: true,
+  },
+  {
+    id: 3,
+    name: "Email to SMS Fallback",
+    description: "Send SMS if email delivery fails",
+    primary: "Email Channel",
+    fallback: "SMS Channel",
+    trigger: "Hard bounce or 30s timeout",
+    enabled: false,
+  },
+]);
+
+// Form options
+const channelOptions = [
+  { label: "Email", value: "email" },
+  { label: "SMS", value: "sms" },
+  { label: "Push Notification", value: "push" },
+  { label: "Webhook", value: "webhook" },
+];
+
+const emailProviderOptions = [
+  { label: "SendGrid", value: "sendgrid" },
+  { label: "Mailgun", value: "mailgun" },
+  { label: "AWS SES", value: "ses" },
+  { label: "Postmark", value: "postmark" },
+];
+
+const smsProviderOptions = [
+  { label: "Twilio", value: "twilio" },
+  { label: "Nexmo", value: "nexmo" },
+  { label: "CM.com", value: "cm" },
+];
+
+// Methods
+function addProvider(channel) {
+  selectedProvider.value = null;
+  providerForm.channel = channel;
+  providerForm.name = "";
+  providerForm.provider = "";
+  showProviderModal.value = true;
+}
+
+function configureProvider(provider) {
+  selectedProvider.value = provider;
+  // Populate form with provider data
+  providerForm.name = provider.name;
+  showProviderModal.value = true;
+}
+
+function saveProvider() {
+  console.log("Saving provider:", providerForm);
+  showProviderModal.value = false;
+  // Reset form
+  Object.keys(providerForm).forEach((key) => {
+    if (typeof providerForm[key] === "string") providerForm[key] = "";
+    if (typeof providerForm[key] === "number") providerForm[key] = 0;
+  });
+}
+
+function testProviderConnection() {
+  console.log("Testing provider connection...");
+  connectionTestResult.value = null;
+
+  // Simulate connection test
+  setTimeout(() => {
+    connectionTestResult.value = {
+      success: Math.random() > 0.3,
+      message:
+        Math.random() > 0.3
+          ? "Connection successful"
+          : "Connection failed - Check credentials",
+    };
+  }, 2000);
+}
+
+function editFallbackRule(rule) {
+  console.log("Editing fallback rule:", rule);
+  // Implementation for editing fallback rules
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/notification/delivery/webhooks.vue b/pages/notification/delivery/webhooks.vue
new file mode 100644
index 0000000..245d12a
--- /dev/null
+++ b/pages/notification/delivery/webhooks.vue
@@ -0,0 +1,822 @@
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+
+    <!-- Page Info Card -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center">
+          <Icon class="mr-2 text-primary" name="ic:outline-webhook"></Icon>
+          <h1 class="text-xl font-bold text-primary">Webhook Management</h1>
+        </div>
+      </template>
+      <template #body>
+        <p class="text-gray-600">
+          Configure and manage webhook endpoints for delivery status updates. Monitor webhook performance, 
+          manage retry policies, and view delivery logs.
+        </p>
+      </template>
+    </rs-card>
+
+    <!-- Webhook Statistics -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6 mb-6">
+      <rs-card
+        v-for="(stat, index) in webhookStats"
+        :key="index"
+        class="transition-all duration-300 hover:shadow-lg"
+      >
+        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
+          <div
+            class="p-5 flex justify-center items-center rounded-2xl transition-all duration-300"
+            :class="stat.bgColor"
+          >
+            <Icon class="text-3xl" :name="stat.icon" :class="stat.iconColor"></Icon>
+          </div>
+          <div class="flex-1 truncate">
+            <span class="block font-bold text-2xl leading-tight" :class="stat.textColor">
+              {{ stat.value }}
+            </span>
+            <span class="text-sm font-medium text-gray-600">
+              {{ stat.title }}
+            </span>
+          </div>
+        </div>
+      </rs-card>
+    </div>
+
+    <!-- Webhook Endpoints -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <Icon class="mr-2 text-primary" name="ic:outline-webhook"></Icon>
+            <h2 class="text-lg font-semibold text-primary">Webhook Endpoints</h2>
+          </div>
+          <rs-button variant="primary" @click="showAddWebhookModal = true">
+            <Icon class="mr-1" name="ic:outline-add"></Icon>
+            Add Webhook
+          </rs-button>
+        </div>
+      </template>
+      <template #body>
+        <div class="space-y-4">
+          <div 
+            v-for="webhook in webhooks"
+            :key="webhook.id"
+            class="border border-gray-200 rounded-lg p-4"
+          >
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-3 mb-2">
+                  <h3 class="font-semibold text-lg">{{ webhook.name }}</h3>
+                  <rs-badge :variant="webhook.enabled ? 'success' : 'secondary'" size="sm">
+                    {{ webhook.enabled ? 'Active' : 'Disabled' }}
+                  </rs-badge>
+                  <rs-badge :variant="getHealthVariant(webhook.health)" size="sm">
+                    {{ webhook.health }}
+                  </rs-badge>
+                </div>
+                <div class="text-sm text-gray-600 mb-2">{{ webhook.description }}</div>
+                <div class="font-mono text-sm bg-gray-50 p-2 rounded">{{ webhook.url }}</div>
+              </div>
+              <div class="flex gap-2 ml-4">
+                <rs-button size="sm" variant="secondary-outline" @click="editWebhook(webhook)">
+                  <Icon name="ic:outline-edit"></Icon>
+                </rs-button>
+                <rs-button size="sm" variant="secondary-outline" @click="testWebhook(webhook)">
+                  <Icon name="ic:outline-send"></Icon>
+                </rs-button>
+                <rs-button size="sm" variant="danger-outline" @click="deleteWebhook(webhook)">
+                  <Icon name="ic:outline-delete"></Icon>
+                </rs-button>
+              </div>
+            </div>
+
+            <!-- Webhook Details -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+              <div>
+                <label class="block text-xs font-medium text-gray-500 mb-1">Events</label>
+                <div class="flex flex-wrap gap-1">
+                  <rs-badge 
+                    v-for="event in webhook.events"
+                    :key="event"
+                    variant="info"
+                    size="xs"
+                  >
+                    {{ event }}
+                  </rs-badge>
+                </div>
+              </div>
+              <div>
+                <label class="block text-xs font-medium text-gray-500 mb-1">Success Rate</label>
+                <div class="font-semibold">{{ webhook.successRate }}%</div>
+              </div>
+              <div>
+                <label class="block text-xs font-medium text-gray-500 mb-1">Avg Response Time</label>
+                <div class="font-semibold">{{ webhook.avgResponseTime }}ms</div>
+              </div>
+            </div>
+
+            <!-- Performance Chart -->
+            <div class="mb-4">
+              <label class="block text-xs font-medium text-gray-500 mb-2">Performance Trend (24h)</label>
+              <div class="w-full bg-gray-200 rounded-full h-2">
+                <div 
+                  class="h-2 rounded-full transition-all duration-300"
+                  :class="getPerformanceClass(webhook.performance)"
+                  :style="{ width: webhook.performance + '%' }"
+                ></div>
+              </div>
+              <div class="text-xs text-gray-500 mt-1">{{ webhook.performance }}% performance score</div>
+            </div>
+
+            <!-- Recent Deliveries -->
+            <div>
+              <label class="block text-xs font-medium text-gray-500 mb-2">Recent Deliveries</label>
+              <div class="space-y-2">
+                <div 
+                  v-for="delivery in webhook.recentDeliveries"
+                  :key="delivery.id"
+                  class="flex items-center justify-between p-2 bg-gray-50 rounded text-sm"
+                >
+                  <div class="flex items-center gap-2">
+                    <Icon 
+                      :name="delivery.success ? 'ic:outline-check-circle' : 'ic:outline-error'"
+                      :class="delivery.success ? 'text-green-500' : 'text-red-500'"
+                    ></Icon>
+                    <span>{{ delivery.event }}</span>
+                    <span class="text-gray-500">{{ delivery.timestamp }}</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <span class="text-gray-500">{{ delivery.responseTime }}ms</span>
+                    <span :class="delivery.success ? 'text-green-600' : 'text-red-600'">
+                      {{ delivery.status }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <!-- Delivery Logs -->
+    <rs-card class="mb-6">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <Icon class="mr-2 text-primary" name="ic:outline-history"></Icon>
+            <h2 class="text-lg font-semibold text-primary">Delivery Logs</h2>
+          </div>
+          <div class="flex gap-2">
+            <rs-button size="sm" variant="secondary-outline" @click="refreshLogs">
+              <Icon class="mr-1" name="ic:outline-refresh"></Icon>
+              Refresh
+            </rs-button>
+            <rs-button size="sm" variant="secondary-outline" @click="exportLogs">
+              <Icon class="mr-1" name="ic:outline-download"></Icon>
+              Export
+            </rs-button>
+          </div>
+        </div>
+      </template>
+      <template #body>
+        <!-- Filters -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+          <FormKit
+            type="select"
+            v-model="logFilters.webhook"
+            :options="webhookFilterOptions"
+            placeholder="All Webhooks"
+            label="Webhook"
+          />
+          <FormKit
+            type="select"
+            v-model="logFilters.event"
+            :options="eventFilterOptions"
+            placeholder="All Events"
+            label="Event"
+          />
+          <FormKit
+            type="select"
+            v-model="logFilters.status"
+            :options="statusFilterOptions"
+            placeholder="All Statuses"
+            label="Status"
+          />
+          <FormKit
+            type="date"
+            v-model="logFilters.date"
+            label="Date"
+          />
+        </div>
+
+        <!-- Logs Table -->
+        <rs-table
+          :field="logTableFields"
+          :data="filteredLogs"
+          :advanced="true"
+          :options="{ striped: true, hover: true }"
+          :optionsAdvanced="{
+            sortable: true,
+            filterable: true,
+            responsive: true,
+          }"
+          :pageSize="20"
+        >
+          <template #webhook="{ row }">
+            <div class="font-medium">{{ row.webhookName }}</div>
+            <div class="text-xs text-gray-500">{{ row.url }}</div>
+          </template>
+
+          <template #event="{ row }">
+            <rs-badge variant="info" size="sm">
+              {{ row.event }}
+            </rs-badge>
+          </template>
+
+          <template #status="{ row }">
+            <rs-badge :variant="row.success ? 'success' : 'danger'" size="sm">
+              {{ row.status }}
+            </rs-badge>
+          </template>
+
+          <template #responseTime="{ row }">
+            <span :class="row.responseTime > 1000 ? 'text-red-600' : 'text-green-600'">
+              {{ row.responseTime }}ms
+            </span>
+          </template>
+
+          <template #actions="{ row }">
+            <div class="flex gap-2">
+              <rs-button 
+                size="sm" 
+                variant="primary-outline"
+                @click="viewLogDetails(row)"
+              >
+                <Icon name="ic:outline-visibility"></Icon>
+              </rs-button>
+              <rs-button 
+                size="sm" 
+                variant="secondary-outline"
+                @click="retryWebhook(row)"
+                v-if="!row.success"
+              >
+                <Icon name="ic:outline-refresh"></Icon>
+              </rs-button>
+            </div>
+          </template>
+        </rs-table>
+      </template>
+    </rs-card>
+
+    <!-- Add/Edit Webhook Modal -->
+    <rs-modal v-model="showAddWebhookModal" size="lg">
+      <template #header>
+        <h3 class="text-lg font-semibold">{{ editingWebhook ? 'Edit' : 'Add' }} Webhook</h3>
+      </template>
+      <template #body>
+        <div class="space-y-6">
+          
+          <!-- Basic Information -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormKit
+              type="text"
+              v-model="webhookForm.name"
+              label="Webhook Name"
+              placeholder="Enter webhook name"
+              validation="required"
+            />
+            <FormKit
+              type="url"
+              v-model="webhookForm.url"
+              label="Endpoint URL"
+              placeholder="https://api.example.com/webhook"
+              validation="required|url"
+            />
+          </div>
+
+          <FormKit
+            type="textarea"
+            v-model="webhookForm.description"
+            label="Description"
+            placeholder="Describe what this webhook is used for"
+            rows="2"
+          />
+
+          <!-- Events Selection -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-3">Events to Subscribe</label>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+              <div 
+                v-for="event in availableEvents"
+                :key="event.value"
+                class="flex items-center"
+              >
+                <FormKit
+                  type="checkbox"
+                  v-model="webhookForm.events"
+                  :value="event.value"
+                  :label="event.label"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Security -->
+          <div>
+            <h4 class="font-semibold mb-3">Security Settings</h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormKit
+                type="password"
+                v-model="webhookForm.secret"
+                label="Secret Key"
+                placeholder="Optional secret for signature verification"
+                help="Used to sign webhook payloads for verification"
+              />
+              <FormKit
+                type="select"
+                v-model="webhookForm.authType"
+                label="Authentication Type"
+                :options="authTypeOptions"
+              />
+            </div>
+            <div v-if="webhookForm.authType === 'bearer'" class="mt-4">
+              <FormKit
+                type="password"
+                v-model="webhookForm.bearerToken"
+                label="Bearer Token"
+                placeholder="Enter bearer token"
+              />
+            </div>
+            <div v-if="webhookForm.authType === 'basic'" class="grid grid-cols-2 gap-4 mt-4">
+              <FormKit
+                type="text"
+                v-model="webhookForm.username"
+                label="Username"
+                placeholder="Enter username"
+              />
+              <FormKit
+                type="password"
+                v-model="webhookForm.password"
+                label="Password"
+                placeholder="Enter password"
+              />
+            </div>
+          </div>
+
+          <!-- Retry Settings -->
+          <div>
+            <h4 class="font-semibold mb-3">Retry Settings</h4>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <FormKit
+                type="number"
+                v-model="webhookForm.maxRetries"
+                label="Max Retries"
+                placeholder="3"
+                min="0"
+                max="10"
+              />
+              <FormKit
+                type="number"
+                v-model="webhookForm.retryDelay"
+                label="Retry Delay (seconds)"
+                placeholder="60"
+                min="1"
+                max="3600"
+              />
+              <FormKit
+                type="number"
+                v-model="webhookForm.timeout"
+                label="Timeout (seconds)"
+                placeholder="30"
+                min="1"
+                max="300"
+              />
+            </div>
+          </div>
+
+          <!-- Test Webhook -->
+          <div class="border border-gray-200 rounded-lg p-4">
+            <h4 class="font-semibold mb-3">Test Webhook</h4>
+            <div class="flex items-center gap-3">
+              <rs-button variant="secondary" @click="testWebhookEndpoint">
+                <Icon class="mr-1" name="ic:outline-send"></Icon>
+                Send Test
+              </rs-button>
+              <div v-if="testResult" class="flex items-center gap-2">
+                <Icon 
+                  :name="testResult.success ? 'ic:outline-check-circle' : 'ic:outline-error'"
+                  :class="testResult.success ? 'text-green-500' : 'text-red-500'"
+                ></Icon>
+                <span :class="testResult.success ? 'text-green-600' : 'text-red-600'">
+                  {{ testResult.message }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <rs-button variant="outline" @click="showAddWebhookModal = false">Cancel</rs-button>
+          <rs-button variant="primary" @click="saveWebhook">
+            {{ editingWebhook ? 'Update' : 'Create' }} Webhook
+          </rs-button>
+        </div>
+      </template>
+    </rs-modal>
+
+    <!-- Log Details Modal -->
+    <rs-modal v-model="showLogModal" size="lg">
+      <template #header>
+        <h3 class="text-lg font-semibold">Webhook Delivery Details</h3>
+      </template>
+      <template #body>
+        <div v-if="selectedLog" class="space-y-6">
+          
+          <!-- Basic Info -->
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Webhook</label>
+              <div class="font-medium">{{ selectedLog.webhookName }}</div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Event</label>
+              <rs-badge variant="info">{{ selectedLog.event }}</rs-badge>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
+              <rs-badge :variant="selectedLog.success ? 'success' : 'danger'">
+                {{ selectedLog.status }}
+              </rs-badge>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-500 mb-1">Response Time</label>
+              <div class="font-medium">{{ selectedLog.responseTime }}ms</div>
+            </div>
+          </div>
+
+          <!-- Request Details -->
+          <div>
+            <label class="block text-sm font-medium text-gray-500 mb-1">Request Payload</label>
+            <div class="bg-gray-50 rounded-lg p-3">
+              <pre class="text-xs overflow-x-auto">{{ JSON.stringify(selectedLog.payload, null, 2) }}</pre>
+            </div>
+          </div>
+
+          <!-- Response Details -->
+          <div>
+            <label class="block text-sm font-medium text-gray-500 mb-1">Response</label>
+            <div class="bg-gray-50 rounded-lg p-3">
+              <div class="text-sm mb-2">
+                <strong>Status Code:</strong> {{ selectedLog.responseCode }}
+              </div>
+              <div class="text-sm mb-2">
+                <strong>Headers:</strong>
+              </div>
+              <pre class="text-xs overflow-x-auto mb-2">{{ JSON.stringify(selectedLog.responseHeaders, null, 2) }}</pre>
+              <div class="text-sm mb-2">
+                <strong>Body:</strong>
+              </div>
+              <pre class="text-xs overflow-x-auto">{{ selectedLog.responseBody }}</pre>
+            </div>
+          </div>
+
+          <!-- Error Details (if any) -->
+          <div v-if="selectedLog.error">
+            <label class="block text-sm font-medium text-gray-500 mb-1">Error Details</label>
+            <div class="bg-red-50 border border-red-200 rounded-lg p-3">
+              <div class="text-sm text-red-800">{{ selectedLog.error }}</div>
+            </div>
+          </div>
+
+        </div>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <rs-button variant="outline" @click="showLogModal = false">Close</rs-button>
+          <rs-button 
+            variant="primary" 
+            @click="retryWebhook(selectedLog)"
+            v-if="!selectedLog?.success"
+          >
+            Retry Delivery
+          </rs-button>
+        </div>
+      </template>
+    </rs-modal>
+
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  title: "Webhook Management",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "Dashboard",
+      path: "/dashboard",
+    },
+    {
+      name: "Notification",
+      path: "/notification",
+    },
+    {
+      name: "Delivery Engine",
+      path: "/notification/delivery",
+    },
+    {
+      name: "Webhooks",
+      path: "/notification/delivery/webhooks",
+      type: "current",
+    },
+  ],
+});
+
+import { ref, reactive, computed } from "vue";
+
+// Modal states
+const showAddWebhookModal = ref(false);
+const showLogModal = ref(false);
+const editingWebhook = ref(null);
+const selectedLog = ref(null);
+const testResult = ref(null);
+
+// Form data
+const webhookForm = reactive({
+  name: "",
+  url: "",
+  description: "",
+  events: [],
+  secret: "",
+  authType: "none",
+  bearerToken: "",
+  username: "",
+  password: "",
+  maxRetries: 3,
+  retryDelay: 60,
+  timeout: 30,
+  enabled: true,
+});
+
+// Filter states
+const logFilters = reactive({
+  webhook: "",
+  event: "",
+  status: "",
+  date: "",
+});
+
+// Statistics
+const webhookStats = ref([
+  {
+    title: "Active Webhooks",
+    value: "8",
+    icon: "ic:outline-webhook",
+    bgColor: "bg-blue-100",
+    iconColor: "text-blue-600",
+    textColor: "text-blue-600",
+  },
+  {
+    title: "Deliveries Today",
+    value: "1.2K",
+    icon: "ic:outline-send",
+    bgColor: "bg-green-100",
+    iconColor: "text-green-600",
+    textColor: "text-green-600",
+  },
+  {
+    title: "Success Rate",
+    value: "98.5%",
+    icon: "ic:outline-trending-up",
+    bgColor: "bg-purple-100",
+    iconColor: "text-purple-600",
+    textColor: "text-purple-600",
+  },
+  {
+    title: "Failed Deliveries",
+    value: "18",
+    icon: "ic:outline-error",
+    bgColor: "bg-red-100",
+    iconColor: "text-red-600",
+    textColor: "text-red-600",
+  },
+]);
+
+// Webhook data
+const webhooks = ref([
+  {
+    id: 1,
+    name: "CRM Integration",
+    description: "Delivery status updates for CRM system",
+    url: "https://api.crm.com/webhooks/delivery",
+    enabled: true,
+    health: "Healthy",
+    events: ["delivered", "opened", "bounced"],
+    successRate: 99.2,
+    avgResponseTime: 150,
+    performance: 95,
+    recentDeliveries: [
+      { id: 1, event: "delivered", timestamp: "2 min ago", success: true, status: "200", responseTime: 140 },
+      { id: 2, event: "opened", timestamp: "5 min ago", success: true, status: "200", responseTime: 160 },
+      { id: 3, event: "bounced", timestamp: "8 min ago", success: false, status: "500", responseTime: 0 },
+    ],
+  },
+  {
+    id: 2,
+    name: "Analytics Platform",
+    description: "Send delivery metrics to analytics dashboard",
+    url: "https://analytics.example.com/webhook",
+    enabled: true,
+    health: "Warning",
+    events: ["sent", "delivered", "failed"],
+    successRate: 87.5,
+    avgResponseTime: 2100,
+    performance: 78,
+    recentDeliveries: [
+      { id: 4, event: "sent", timestamp: "1 min ago", success: true, status: "200", responseTime: 1900 },
+      { id: 5, event: "delivered", timestamp: "3 min ago", success: false, status: "timeout", responseTime: 0 },
+      { id: 6, event: "failed", timestamp: "6 min ago", success: true, status: "200", responseTime: 2300 },
+    ],
+  },
+]);
+
+// Delivery logs
+const deliveryLogs = ref([
+  {
+    id: 1,
+    webhookId: 1,
+    webhookName: "CRM Integration",
+    url: "https://api.crm.com/webhooks/delivery",
+    event: "delivered",
+    success: true,
+    status: "200 OK",
+    responseTime: 140,
+    timestamp: "2024-01-15 10:30:00",
+    payload: {
+      messageId: "msg_001",
+      event: "delivered",
+      timestamp: "2024-01-15T10:30:00Z",
+      channel: "email",
+      recipient: "user@example.com"
+    },
+    responseCode: 200,
+    responseHeaders: { "content-type": "application/json" },
+    responseBody: '{"status": "received"}',
+    error: null,
+  },
+  // Add more logs...
+]);
+
+// Form options
+const availableEvents = [
+  { label: "Message Queued", value: "queued" },
+  { label: "Message Sent", value: "sent" },
+  { label: "Message Delivered", value: "delivered" },
+  { label: "Message Opened", value: "opened" },
+  { label: "Message Failed", value: "failed" },
+  { label: "Message Bounced", value: "bounced" },
+];
+
+const authTypeOptions = [
+  { label: "None", value: "none" },
+  { label: "Bearer Token", value: "bearer" },
+  { label: "Basic Auth", value: "basic" },
+];
+
+// Filter options
+const webhookFilterOptions = computed(() => [
+  { label: "All Webhooks", value: "" },
+  ...webhooks.value.map(w => ({ label: w.name, value: w.id }))
+]);
+
+const eventFilterOptions = [
+  { label: "All Events", value: "" },
+  ...availableEvents,
+];
+
+const statusFilterOptions = [
+  { label: "All Statuses", value: "" },
+  { label: "Success", value: "success" },
+  { label: "Failed", value: "failed" },
+];
+
+// Table configuration
+const logTableFields = ref([
+  { key: "timestamp", label: "Timestamp", sortable: true },
+  { key: "webhook", label: "Webhook", sortable: true },
+  { key: "event", label: "Event", sortable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "responseTime", label: "Response Time", sortable: true },
+  { key: "actions", label: "Actions", sortable: false },
+]);
+
+// Computed
+const filteredLogs = computed(() => {
+  let filtered = deliveryLogs.value;
+  
+  if (logFilters.webhook) {
+    filtered = filtered.filter(log => log.webhookId === logFilters.webhook);
+  }
+  
+  if (logFilters.event) {
+    filtered = filtered.filter(log => log.event === logFilters.event);
+  }
+  
+  if (logFilters.status) {
+    const isSuccess = logFilters.status === "success";
+    filtered = filtered.filter(log => log.success === isSuccess);
+  }
+  
+  return filtered;
+});
+
+// Methods
+function getHealthVariant(health) {
+  const variants = {
+    "Healthy": "success",
+    "Warning": "warning",
+    "Critical": "danger",
+  };
+  return variants[health] || "secondary";
+}
+
+function getPerformanceClass(performance) {
+  if (performance >= 90) return "bg-green-500";
+  if (performance >= 70) return "bg-yellow-500";
+  return "bg-red-500";
+}
+
+function editWebhook(webhook) {
+  editingWebhook.value = webhook;
+  // Populate form with webhook data
+  Object.keys(webhookForm).forEach(key => {
+    if (webhook[key] !== undefined) {
+      webhookForm[key] = webhook[key];
+    }
+  });
+  showAddWebhookModal.value = true;
+}
+
+function testWebhook(webhook) {
+  console.log("Testing webhook:", webhook.name);
+  // Implementation for testing webhook
+}
+
+function deleteWebhook(webhook) {
+  console.log("Deleting webhook:", webhook.name);
+  // Implementation for deleting webhook
+}
+
+function saveWebhook() {
+  console.log("Saving webhook:", webhookForm);
+  showAddWebhookModal.value = false;
+  // Reset form
+  Object.keys(webhookForm).forEach(key => {
+    if (typeof webhookForm[key] === 'string') webhookForm[key] = '';
+    if (typeof webhookForm[key] === 'number') webhookForm[key] = 0;
+    if (Array.isArray(webhookForm[key])) webhookForm[key] = [];
+    if (typeof webhookForm[key] === 'boolean') webhookForm[key] = true;
+  });
+}
+
+function testWebhookEndpoint() {
+  console.log("Testing webhook endpoint...");
+  testResult.value = null;
+  
+  // Simulate test
+  setTimeout(() => {
+    testResult.value = {
+      success: Math.random() > 0.3,
+      message: Math.random() > 0.3 ? "Test successful" : "Connection failed - Check URL and credentials"
+    };
+  }, 2000);
+}
+
+function viewLogDetails(log) {
+  selectedLog.value = log;
+  showLogModal.value = true;
+}
+
+function retryWebhook(log) {
+  console.log("Retrying webhook delivery:", log);
+  // Implementation for retrying webhook delivery
+}
+
+function refreshLogs() {
+  console.log("Refreshing logs...");
+  // Implementation for refreshing logs
+}
+
+function exportLogs() {
+  console.log("Exporting logs...");
+  // Implementation for exporting logs
+}
+</script>
+
+<style lang="scss" scoped></style> 
\ No newline at end of file