@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/notifications/dashboard.stx

@@ -0,0 +1,383 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Notifications')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="mb-8 px-4 sm:px-6 lg:px-8">
+    <div>
+      <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Notifications Overview</h3>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-notification-03"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Notifications</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ totalSentLabel() }}</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+              <div class="flex-shrink-0 self-center h-5 w-5 text-green-500 i-hugeicons-arrow-up"></div>
+              <span class="sr-only">Increased by</span>
+              122
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-checkmark-circle-02"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Delivery Rate</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ deliveryRate() }}%</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+              <div class="flex-shrink-0 self-center h-5 w-5 text-green-500 i-hugeicons-arrow-up"></div>
+              <span class="sr-only">Increased by</span>
+              0.5%
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-clock-01"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Average Delivery Time</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">{{ avgDeliveryTime() }}s</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+              <div class="flex-shrink-0 self-center h-5 w-5 text-green-500 i-hugeicons-arrow-down-02"></div>
+              <span class="sr-only">Decreased by</span>
+              0.1s
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div class="my-8 px-4 sm:px-6 lg:px-8">
+    <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="px-4 py-5 sm:p-6">
+        <div class="flex items-center justify-between">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Recent Notifications</h3>
+          <StxLink to="/notifications/history" class="inline-flex items-center space-x-1 text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+            <span>View All</span>
+            <div class="h-4 w-4 i-hugeicons-arrow-right-01"></div>
+          </StxLink>
+        </div>
+        <div class="flow-root mt-4">
+          <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+            <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+              <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+                <thead>
+                  <tr>
+                    <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-0 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Recipient</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Subject</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Status</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Sent</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Delivered</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-gray-200 divide-y dark:divide-neutral-600">
+                  <template :for="notification in recentNotifications">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-0 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">
+                        <div class="flex items-center">
+                          <div class="mr-2 h-5 w-5 {{ getChannelIcon(notification.type) }}"></div>
+                          <span class="capitalize">{{ notification.type }}</span>
+                        </div>
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.recipient }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ notification.subject }}</td>
+                      <td class="px-3 py-4 text-sm whitespace-nowrap">
+                        <span class="{{ getStatusColor(notification.status) }} inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md">{{ notification.status }}</span>
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.sent_at }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.delivered_at || '-' }}</td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Notification Volume</h3>
+              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Notifications sent by channel</p>
+            </div>
+            <div class="flex items-center space-x-4">
+              <select x-model="timeRange" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+                <option value="hour">Last Hour</option>
+                <option value="day">Last 24 Hours</option>
+                <option value="week">Last Week</option>
+              </select>
+            </div>
+          </div>
+          <div class="relative h-[300px]">
+            <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+              <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            </div>
+            <canvas id="notifications_volume_chart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Delivery Time</h3>
+              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Average time to deliver notifications</p>
+            </div>
+          </div>
+          <div class="relative h-[300px]">
+            <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+              <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            </div>
+            <canvas id="notifications_delivery_chart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-8 px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Channel Statistics</h3>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Detailed breakdown by notification channel</p>
+      </div>
+    </div>
+
+    <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 mt-6">
+      <template :for="channel in channelStatsList">
+        <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="flex items-center justify-between mb-6">
+            <h4 class="inline-flex items-center px-2.5 py-1 space-x-2 font-medium text-gray-800 text-sm dark:text-neutral-200 bg-gray-100 dark:bg-neutral-600 rounded-full">
+              <div class="h-4 w-4 {{ getChannelIcon(channel.name) }}"></div>
+              <span class="capitalize">{{ channel.name }}</span>
+            </h4>
+          </div>
+
+          <div class="space-y-6">
+            <div class="grid gap-4 grid-cols-4">
+              <template :for="entry in channel.entries">
+                <div class="text-center">
+                  <div class="font-mono font-semibold text-2xl {{ statusValueClass(entry.status) }}">{{ formatNumber(entry.value) }}</div>
+                  <div class="capitalize text-gray-500 text-xs dark:text-neutral-400">{{ entry.status }}</div>
+                </div>
+              </template>
+            </div>
+
+            <div class="overflow-hidden h-2.5 bg-gray-100 dark:bg-neutral-600 rounded-full">
+              <div class="flex h-full">
+                <div class="h-full bg-green-500" style="width: {{ channel.deliveredPercent }}%"></div>
+                <div class="h-full bg-red-500" style="width: {{ channel.failedPercent }}%"></div>
+              </div>
+            </div>
+            <div class="flex justify-between text-gray-500 text-sm dark:text-neutral-400">
+              <span>Success Rate: {{ channel.deliveredPercent }}%</span>
+              <span>Failure Rate: {{ channel.failedPercent }}%</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface ChannelStats {
+  sent: number
+  delivered: number
+  failed: number
+  pending: number
+}
+
+interface NotificationEntry {
+  id: string
+  type: 'email' | 'sms' | 'push' | 'discord' | 'slack'
+  recipient: string
+  subject: string
+  status: 'sent' | 'delivered' | 'failed' | 'pending'
+  sent_at: string
+  delivered_at?: string
+  error?: string
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const notificationStats = state({
+  total_sent: 45_678,
+  delivery_rate: 98.5,
+  avg_delivery_time: 1.2,
+})
+
+const channelStats = state<Record<string, ChannelStats>>({
+  email: { sent: 25_000, delivered: 24_800, failed: 150, pending: 50 },
+  sms: { sent: 12_000, delivered: 11_900, failed: 80, pending: 20 },
+  push: { sent: 5_000, delivered: 4_950, failed: 30, pending: 20 },
+  discord: { sent: 2_000, delivered: 1_990, failed: 5, pending: 5 },
+  slack: { sent: 1678, delivered: 1670, failed: 5, pending: 3 },
+})
+
+const recentNotifications = state<NotificationEntry[]>([
+  { id: '1', type: 'email', recipient: 'user@example.com', subject: 'Welcome to Our Platform', status: 'delivered', sent_at: '2024-03-14 10:15:23', delivered_at: '2024-03-14 10:15:25' },
+  { id: '2', type: 'sms', recipient: '+1 (234) 567-890', subject: 'Your verification code: 123456', status: 'failed', sent_at: '2024-03-14 10:14:00', error: 'Invalid phone number' },
+  { id: '3', type: 'push', recipient: 'device-token-123', subject: 'New message received', status: 'delivered', sent_at: '2024-03-14 10:16:00', delivered_at: '2024-03-14 10:16:02' },
+  { id: '4', type: 'discord', recipient: 'Channel #announcements', subject: 'System update completed', status: 'delivered', sent_at: '2024-03-14 10:17:00', delivered_at: '2024-03-14 10:17:01' },
+  { id: '5', type: 'slack', recipient: '#general', subject: 'Deployment successful', status: 'pending', sent_at: '2024-03-14 10:18:00' },
+])
+
+const timeRange = state('hour')
+const isLoading = state(false)
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+const notificationStatusColors: Record<string, string> = {
+  delivered: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/50 ring-green-600/20',
+  sent: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900/50 ring-blue-600/20',
+  pending: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-900/50 ring-yellow-600/20',
+  failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/50 ring-red-600/20',
+}
+
+function getStatusColor(status: string): string {
+  return notificationStatusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+}
+
+function getChannelIcon(type: string): string {
+  switch (type) {
+    case 'email': return 'i-hugeicons-mail-01'
+    case 'sms': return 'i-hugeicons-smart-phone-01'
+    case 'push': return 'i-hugeicons-notification-01'
+    case 'discord': return 'i-hugeicons-discord'
+    case 'slack': return 'i-hugeicons-slack'
+    default: return 'i-hugeicons-notification-03'
+  }
+}
+
+function formatNumber(num: number): string {
+  return num.toLocaleString()
+}
+
+function totalSentLabel(): string { return formatNumber(notificationStats().total_sent) }
+function deliveryRate(): number { return notificationStats().delivery_rate }
+function avgDeliveryTime(): number { return notificationStats().avg_delivery_time }
+
+function statusValueClass(status: string): string {
+  switch (status) {
+    case 'delivered': return 'text-green-600 dark:text-green-400'
+    case 'failed': return 'text-red-600 dark:text-red-400'
+    case 'pending': return 'text-yellow-600 dark:text-yellow-400'
+    case 'sent': return 'text-blue-600 dark:text-blue-400'
+    default: return ''
+  }
+}
+
+function channelStatsList(): Array<{ name: string, deliveredPercent: string, failedPercent: string, entries: Array<{ status: string, value: number }> }> {
+  return Object.entries(channelStats()).map(([name, stats]) => ({
+    name,
+    deliveredPercent: ((stats.delivered / stats.sent) * 100).toFixed(1),
+    failedPercent: ((stats.failed / stats.sent) * 100).toFixed(1),
+    entries: [
+      { status: 'sent', value: stats.sent },
+      { status: 'delivered', value: stats.delivered },
+      { status: 'failed', value: stats.failed },
+      { status: 'pending', value: stats.pending },
+    ],
+  }))
+}
+
+function getVolumeData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      { label: 'Email', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 100) + 50), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true },
+      { label: 'SMS', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 50) + 20), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'Push', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 30) + 10), borderColor: 'rgb(245, 158, 11)', backgroundColor: 'rgba(245, 158, 11, 0.1)', fill: true },
+    ],
+  }
+}
+
+function getDeliveryTimeData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [{
+      label: 'Average Delivery Time (seconds)',
+      data: Array.from({ length: 24 }, () => Math.random() * 2 + 0.5),
+      borderColor: 'rgb(139, 92, 246)',
+      backgroundColor: 'rgba(139, 92, 246, 0.1)',
+      fill: true,
+    }],
+  }
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: { beginAtZero: true, grid: { color: 'rgba(200, 200, 200, 0.1)' }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+  interaction: { mode: 'index', intersect: false },
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const volume = useChart({
+    Chart: Ctor,
+    id: 'notifications_volume_chart',
+    type: 'line',
+    data: getVolumeData(),
+    options: chartOptions,
+  })
+
+  const delivery = useChart({
+    Chart: Ctor,
+    id: 'notifications_delivery_chart',
+    type: 'line',
+    data: getDeliveryTimeData(),
+    options: chartOptions,
+  })
+
+  chartHandles = [volume.instance, delivery.instance].filter((c): c is ChartLike => c !== null)
+  await new Promise(resolve => setTimeout(resolve, 500))
+  isLoading.set(false)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection