@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/notifications/email.stx

@@ -0,0 +1,336 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Email Notifications')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Email Notifications</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">Manage and monitor all email notifications sent through the system</p>
+      </div>
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button @click="toggleFilters()" type="button" class="inline-flex items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+          <div class="mr-2 h-5 w-5 i-hugeicons-filter"></div>
+          {{ filtersToggleLabel() }}
+        </button>
+      </div>
+    </div>
+
+    <div :show="showFilters" class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-4">
+      <div class="flex-1 min-w-0">
+        <label for="search" class="sr-only">Search email notifications</label>
+        <div class="relative rounded-md shadow-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input x-model="searchQuery" type="search" name="search" id="search" placeholder="Search by email, subject or content..." class="block pl-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 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 focus:ring-inset" />
+        </div>
+      </div>
+
+      <div>
+        <select x-model="selectedStatus" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 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="all">All Statuses</option>
+          <option value="sent">Sent</option>
+          <option value="delivered">Delivered</option>
+          <option value="failed">Failed</option>
+          <option value="pending">Pending</option>
+        </select>
+      </div>
+
+      <div class="flex items-end">
+        <button @click="resetFilters()" type="button" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Reset Filters</button>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <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">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg dark:ring-opacity-20 shadow">
+            <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+              <thead class="bg-gray-50 dark:bg-neutral-600">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 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-left text-sm dark:text-neutral-100">Template</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Opens</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100 cursor-pointer" @click="toggleSort('sent_at')">
+                    <div class="flex items-center justify-end">
+                      Sent
+                      <div :show="isSortedBy('sent_at')" class="ml-2">
+                        <div :show="sortDirection() === 'desc'" class="h-4 w-4 i-hugeicons-chevron-down"></div>
+                        <div :show="sortDirection() === 'asc'" class="h-4 w-4 i-hugeicons-chevron-up"></div>
+                      </div>
+                      <div :show="isUnsorted('sent_at')" class="ml-2">
+                        <div class="h-4 w-4 text-gray-400 i-hugeicons-arrows-up-down"></div>
+                      </div>
+                    </div>
+                  </th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Actions</span></th>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <tr :show="isLoading">
+                  <td colspan="7" class="px-3 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                    <div class="flex justify-center">
+                      <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+                    </div>
+                  </td>
+                </tr>
+                <tr :show="hasNoNotifications">
+                  <td colspan="7" class="px-3 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">No email notifications found matching your criteria</td>
+                </tr>
+                <template :for="notification in paginatedNotifications">
+                  <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600/50">
+                    <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ notification.recipient }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                      <div class="max-w-xs truncate">{{ notification.subject }}</div>
+                    </td>
+                    <td class="px-3 py-4 text-sm whitespace-nowrap">
+                      <NotificationStatusBadge :status="notification.status" />
+                    </td>
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.metadata?.template }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.metadata?.opens }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(notification.sent_at) }}</td>
+                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                      <div class="flex justify-end space-x-2">
+                        <button :show="{{ notification.status === 'failed' ? 'true' : 'false' }}" @click="handleRetry('{{ notification.id }}')" type="button" class="text-blue-600 hover:text-blue-900 dark:hover:text-blue-400">Retry</button>
+                        <button @click="openErrorModal('{{ notification.id }}')" type="button" class="text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-gray-200">View Logs</button>
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between mt-4">
+      <div class="flex items-center">
+        <p class="text-gray-700 text-sm dark:text-neutral-300">
+          Showing <span class="font-medium">{{ rangeStart() }}</span> to <span class="font-medium">{{ rangeEnd() }}</span> of <span class="font-medium">{{ totalFiltered() }}</span> results
+        </p>
+      </div>
+      <div class="flex items-center space-x-2">
+        <button :show="canGoBack" type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600" @click="previousPage()">Previous</button>
+        <button type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 disabled:opacity-50" :disabled="isLastPage" @click="nextPage()">Next</button>
+      </div>
+    </div>
+  </div>
+
+  <NotificationErrorModal
+    :isOpen="isErrorModalOpen"
+    :notificationId="errorModalId"
+    notificationType="email"
+    :errorMessage="errorModalMessage"
+    :sentAt="errorModalSentAt"
+    @close="closeErrorModal"
+  />
+</div>
+
+<script client>
+interface EmailNotification {
+  id: string
+  recipient: string
+  subject: string
+  content: string
+  status: 'sent' | 'delivered' | 'failed' | 'pending'
+  sent_at: string
+  delivered_at?: string
+  error?: string
+  metadata?: {
+    sender: string
+    template: string
+    opens: number
+    clicks: number
+    size: number
+  }
+}
+
+const notifications = state<EmailNotification[]>([])
+const currentPage = state(1)
+const perPage = state(10)
+const isLoading = state(true)
+const searchQuery = state('')
+const selectedStatus = state('all')
+const showFilters = state(false)
+const sortField = state<string | null>(null)
+const sortDirection = state<'asc' | 'desc'>('desc')
+
+const isErrorModalOpen = state(false)
+const errorModalId = state('')
+const errorModalMessage = state('')
+const errorModalSentAt = state('')
+
+function generateMockEmailNotifications(): EmailNotification[] {
+  const statuses: Array<EmailNotification['status']> = ['sent', 'delivered', 'failed', 'pending']
+  const subjects = [
+    'Welcome to our platform',
+    'Your account has been updated',
+    'Security alert',
+    'Password reset request',
+    'New login detected',
+    'Subscription renewed',
+    'Payment processed',
+    'Order confirmation',
+  ]
+  const templates = ['welcome', 'account_update', 'security_alert', 'password_reset', 'login_notification', 'subscription', 'payment', 'order']
+  const domains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'example.com', 'company.com']
+  const firstNames = ['John', 'Jane', 'Alex', 'Sarah', 'Michael', 'Emma', 'David', 'Olivia']
+  const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia']
+
+  return Array.from({ length: 100 }, (_, i) => {
+    const status = statuses[Math.floor(Math.random() * statuses.length)] as EmailNotification['status']
+    const subject = subjects[Math.floor(Math.random() * subjects.length)] || 'System Notification'
+    const template = templates[Math.floor(Math.random() * templates.length)] || 'default'
+    const domain = domains[Math.floor(Math.random() * domains.length)] || 'example.com'
+    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)] || 'User'
+    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)] || 'Name'
+    const sent_at = new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString()
+    const delivered_at = status === 'delivered' ? new Date(new Date(sent_at).getTime() + Math.random() * 60000).toISOString() : undefined
+    const username = `${firstName.toLowerCase()}.${lastName.toLowerCase()}${Math.floor(Math.random() * 100)}`
+
+    return {
+      id: `${i + 1}`,
+      recipient: `${username}@${domain}`,
+      subject,
+      content: 'Email content goes here...',
+      status,
+      sent_at,
+      delivered_at,
+      error: status === 'failed' ? 'Failed to deliver email' : undefined,
+      metadata: {
+        sender: 'noreply@example.com',
+        template,
+        opens: status === 'delivered' ? Math.floor(Math.random() * 5) : 0,
+        clicks: status === 'delivered' ? Math.floor(Math.random() * 3) : 0,
+        size: Math.floor(Math.random() * 50) + 10,
+      },
+    }
+  })
+}
+
+const filteredNotifications = derived(() => {
+  const list = notifications()
+  const status = selectedStatus()
+  const q = searchQuery().toLowerCase()
+  return list.filter((n) => {
+    if (status !== 'all' && n.status !== status)
+      return false
+    if (q) {
+      return n.subject.toLowerCase().includes(q)
+        || n.recipient.toLowerCase().includes(q)
+        || n.content.toLowerCase().includes(q)
+    }
+    return true
+  })
+})
+
+const sortedNotifications = derived(() => {
+  const field = sortField()
+  if (!field)
+    return filteredNotifications()
+  const dir = sortDirection()
+  return [...filteredNotifications()].sort((a, b) => {
+    const aValue = (a as Record<string, unknown>)[field] as string | undefined
+    const bValue = (b as Record<string, unknown>)[field] as string | undefined
+    if (!aValue && !bValue)
+      return 0
+    if (!aValue)
+      return 1
+    if (!bValue)
+      return -1
+    const comparison = new Date(aValue).getTime() - new Date(bValue).getTime()
+    return dir === 'asc' ? comparison : -comparison
+  })
+})
+
+const paginatedNotifications = derived(() => {
+  const start = (currentPage() - 1) * perPage()
+  return sortedNotifications().slice(start, start + perPage())
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredNotifications().length / perPage())))
+const totalFiltered = derived(() => filteredNotifications().length)
+const rangeStart = derived(() => totalFiltered() === 0 ? 0 : (currentPage() - 1) * perPage() + 1)
+const rangeEnd = derived(() => Math.min(currentPage() * perPage(), totalFiltered()))
+const hasNoNotifications = derived(() => !isLoading() && paginatedNotifications().length === 0)
+const canGoBack = derived(() => currentPage() > 1)
+const isLastPage = derived(() => currentPage() >= totalPages())
+
+function isSortedBy(field: string): boolean { return sortField() === field }
+function isUnsorted(field: string): boolean { return sortField() !== field }
+function filtersToggleLabel(): string { return showFilters() ? 'Hide Filters' : 'Show Filters' }
+
+function toggleFilters(): void {
+  showFilters.update(v => !v)
+}
+
+function previousPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function nextPage(): void {
+  if (currentPage() < totalPages())
+    currentPage.update(p => p + 1)
+}
+
+function resetFilters(): void {
+  selectedStatus.set('all')
+  searchQuery.set('')
+  currentPage.set(1)
+}
+
+function formatDate(date: string): string {
+  return new Date(date).toLocaleString()
+}
+
+function toggleSort(field: string): void {
+  if (sortField() === field)
+    sortDirection.set(sortDirection() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortField.set(field)
+    sortDirection.set('desc')
+  }
+}
+
+function handleRetry(id: string): void {
+  // eslint-disable-next-line no-console
+  console.log('Retrying email notification:', id)
+}
+
+function openErrorModal(id: string): void {
+  const target = notifications().find(n => n.id === id)
+  if (!target)
+    return
+  errorModalId.set(target.id)
+  errorModalMessage.set(target.error || 'Unknown error')
+  errorModalSentAt.set(target.sent_at)
+  isErrorModalOpen.set(true)
+}
+
+function closeErrorModal(): void {
+  isErrorModalOpen.set(false)
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    notifications.set(generateMockEmailNotifications())
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to load email notifications:', error)
+  }
+  finally {
+    isLoading.set(false)
+  }
+})
+</script>
+
+@endsection