@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Modals/Popups/Toast.stx

@@ -0,0 +1,70 @@
+<script>
+interface ToastProps {
+  show?: boolean
+  type?: 'warning' | 'success' | 'error' | 'info'
+  title?: string
+  position?: string
+  id?: string
+}
+
+const { show = false, type = 'warning', title = 'sample title', position = 'top-right', id = 'toast-' + Math.random().toString(36).slice(2, 11) } = defineProps<ToastProps>()
+</script>
+@if(show)
+<div class="relative z-60" aria-labelledby="modal-title" role="alert" aria-live="assertive" data-toast="{{ id }}">
+  <div class="fixed inset-0"></div>
+
+  <div class="fixed inset-0 overflow-y-auto z-10">
+    <div class="my-8 p-4 text-center sm:items-center sm:p-0 {{ position == 'center' ? 'flex justify-center h-full' : '' }} {{ position == 'top' ? 'flex justify-center' : '' }} {{ position == 'top-right' ? 'flex justify-end mt-4' : '' }} {{ position == 'top-left' ? 'flex justify-start' : '' }}">
+      <div aria-live="assertive" class="flex fixed inset-0 items-end sm:items-start px-4 py-6 sm:p-6 pointer-events-none">
+        <div class="flex flex-col items-center sm:items-end space-y-4 w-full">
+          <div class="overflow-hidden max-w-sm w-full bg-white dark:bg-neutral-700 ring-1 ring-black ring-opacity-5 rounded-lg shadow-lg pointer-events-auto">
+            <div class="p-4">
+              <div class="flex items-center">
+                @if(type == 'warning')
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-yellow-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
+                    </svg>
+                  </div>
+                @elseif(type == 'success')
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                  </div>
+                @elseif(type == 'error')
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-red-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                  </div>
+                @elseif(type == 'info')
+                  <div class="flex-shrink-0">
+                    <svg class="h-6 w-6 text-blue-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"></path>
+                    </svg>
+                  </div>
+                @endif
+
+                <div class="flex-1 ml-3 pt-0.5 w-0">
+                  <p class="font-medium text-gray-900 text-left text-sm dark:text-neutral-100">
+                    {{ title }}
+                  </p>
+                </div>
+                <div class="flex flex-shrink-0 ml-4">
+                  <button type="button" class="inline-flex text-gray-400 hover:text-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-action="close">
+                    <span class="sr-only">Close</span>
+                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+@endif

package/resources/components/Dashboard/Modals/ToastWrapper.stx

@@ -0,0 +1,35 @@
+<script>
+interface ToastWrapperProps {
+  width?: number
+  position?: 'center' | 'top' | 'top-right' | 'top-left'
+}
+
+const { width = 30, position = 'top-right' } = defineProps<ToastWrapperProps>()
+</script>
+<div class="relative z-60" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+  <div class="fixed inset-0"></div>
+
+  <div class="fixed inset-0 overflow-y-auto z-10">
+    <div class="my-8 p-4 text-center sm:items-center sm:p-0 {{ position == 'center' ? 'flex justify-center h-full' : '' }} {{ position == 'top' ? 'flex justify-center' : '' }} {{ position == 'top-right' ? 'flex justify-end mt-4' : '' }} {{ position == 'top-left' ? 'flex justify-start' : '' }}">
+      <div aria-live="assertive" class="flex fixed inset-0 items-end sm:items-start px-4 py-6 sm:p-6 pointer-events-none">
+        <div class="flex flex-col items-center sm:items-end space-y-4 w-full">
+          <div class="overflow-hidden max-w-sm w-full bg-white dark:bg-neutral-700 ring-1 ring-black ring-opacity-5 rounded-lg shadow-lg pointer-events-auto">
+            <div class="p-4">
+              <div class="flex items-center">
+                <slot name="body" />
+                <div class="flex flex-shrink-0 ml-4">
+                  <button type="button" class="inline-flex text-gray-400 hover:text-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" data-action="close">
+                    <span class="sr-only">Close</span>
+                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/resources/components/Dashboard/Monitoring/ErrorDetailModal.stx

@@ -0,0 +1,228 @@
+<script>
+interface ErrorDetailModalProps {
+  error?: any
+  isOpen?: boolean
+  errorInstances?: any[]
+  isLoading?: boolean
+  activeTab?: string
+}
+
+const { error = null, isOpen = false, errorInstances = [], isLoading = false, activeTab = 'details' } = defineProps<ErrorDetailModalProps>()
+
+// Helper functions
+function getStatusClass(status) {
+  switch (status) {
+    case 'resolved':
+      return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
+    case 'ignored':
+      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+    case 'unresolved':
+    default:
+      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+  }
+}
+
+function getTypeClass(type) {
+  const typeLC = type.toLowerCase()
+  if (typeLC.includes('error') || typeLC.includes('exception')) {
+    return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+  }
+  if (typeLC.includes('warning')) {
+    return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  if (typeLC.includes('info')) {
+    return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
+  }
+  return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400'
+}
+
+function formatDate(dateString) {
+  const date = new Date(dateString)
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }
+}
+
+function formatTimeAgo(dateString) {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffDays > 0) return `${diffDays}d ago`
+  if (diffHours > 0) return `${diffHours}h ago`
+  if (diffMins > 0) return `${diffMins}m ago`
+  return 'Just now'
+}
+</script>
+@if(isOpen && error)
+<div class="fixed inset-0 overflow-y-auto z-50">
+  <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+    <!-- Backdrop -->
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" data-action="close"></div>
+
+    <!-- Modal panel -->
+    <div class="overflow-hidden relative sm:my-8 sm:max-w-4xl sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+      <!-- Header -->
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-neutral-700">
+        <div class="flex items-start justify-between">
+          <div class="flex-1">
+            <div class="flex gap-3 items-center">
+              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getTypeClass(error.type) }}">
+                {{ error.type }}
+              </span>
+              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium capitalize {{ getStatusClass(error.status) }}">
+                {{ error.status }}
+              </span>
+            </div>
+            <h3 class="mt-2 break-words font-semibold text-gray-900 text-lg dark:text-white">
+              {{ error.message }}
+            </h3>
+            <div class="flex gap-4 items-center mt-1 text-gray-500 text-sm dark:text-neutral-400">
+              <span class="flex items-center">
+                <div class="mr-1 h-4 w-4 i-hugeicons-time-02"></div>
+                First seen: {{ formatTimeAgo(error.first_seen) }}
+              </span>
+              <span class="flex items-center">
+                <div class="mr-1 h-4 w-4 i-hugeicons-clock-02"></div>
+                Last seen: {{ formatTimeAgo(error.last_seen) }}
+              </span>
+              <span class="flex items-center">
+                <div class="mr-1 h-4 w-4 i-hugeicons-chart-line-data-01"></div>
+                {{ error.count }} events
+              </span>
+            </div>
+          </div>
+          <button type="button" class="text-gray-400 hover:text-gray-500 rounded-md focus:outline-none" data-action="close">
+            <div class="h-6 w-6 i-hugeicons-cancel-01"></div>
+          </button>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="flex gap-2 mt-4">
+          @if(error.status != 'resolved')
+            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-green-600 hover:bg-green-500 rounded-md shadow-sm" data-action="resolve">
+              <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
+              Resolve
+            </button>
+          @endif
+          @if(error.status == 'resolved')
+            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-yellow-600 hover:bg-yellow-500 rounded-md shadow-sm" data-action="unresolve">
+              <div class="mr-1 h-4 w-4 i-hugeicons-refresh"></div>
+              Reopen
+            </button>
+          @endif
+          @if(error.status != 'ignored')
+            <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-gray-600 hover:bg-gray-500 rounded-md shadow-sm" data-action="ignore">
+              <div class="mr-1 h-4 w-4 i-hugeicons-eye-off"></div>
+              Ignore
+            </button>
+          @endif
+          <button type="button" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm" data-action="delete">
+            <div class="mr-1 h-4 w-4 i-hugeicons-waste"></div>
+            Delete
+          </button>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="border-b border-gray-200 dark:border-neutral-700">
+        <nav class="flex -mb-px">
+          <button class="px-6 py-3 text-sm font-medium border-b-2 transition-colors {{ activeTab == 'details' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-neutral-400 dark:hover:text-gray-300' }}" data-action="tab" data-tab="details">
+            Details
+          </button>
+          <button class="px-6 py-3 text-sm font-medium border-b-2 transition-colors {{ activeTab == 'events' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-neutral-400 dark:hover:text-gray-300' }}" data-action="tab" data-tab="events">
+            Events ({{ error.count }})
+          </button>
+        </nav>
+      </div>
+
+      <!-- Content -->
+      <div class="overflow-y-auto px-6 py-4 max-h-[60vh]">
+        <!-- Details Tab -->
+        @if(activeTab == 'details')
+          <!-- Stack Trace -->
+          @if(error.stack)
+            <div class="mb-6">
+              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Stack Trace</h4>
+              <pre class="overflow-x-auto p-4 font-mono leading-relaxed text-gray-100 text-xs bg-gray-900 rounded-lg">{{ error.stack }}</pre>
+            </div>
+          @endif
+
+          <!-- Error Info -->
+          <div class="grid gap-4 grid-cols-2">
+            <div>
+              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Error Type</h4>
+              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ error.type }}</p>
+            </div>
+            <div>
+              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Total Occurrences</h4>
+              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ error.count }}</p>
+            </div>
+            <div>
+              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">First Occurrence</h4>
+              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ formatDate(error.first_seen) }}</p>
+            </div>
+            <div>
+              <h4 class="mb-2 font-medium text-gray-900 text-sm dark:text-white">Last Occurrence</h4>
+              <p class="text-gray-600 text-sm dark:text-neutral-300">{{ formatDate(error.last_seen) }}</p>
+            </div>
+          </div>
+        @endif
+
+        <!-- Events Tab -->
+        @if(activeTab == 'events')
+          @if(isLoading)
+            <div class="flex items-center justify-center py-8">
+              <div class="h-8 w-8 text-blue-500 animate-spin i-hugeicons-loading-01"></div>
+            </div>
+          @elseif(errorInstances.length == 0)
+            <div class="py-8 text-center text-gray-500 dark:text-neutral-400">
+              No individual events found
+            </div>
+          @else
+            <div class="space-y-3">
+              @foreach(errorInstances as instance)
+                <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
+                  <div class="flex items-start justify-between">
+                    <div class="flex-1">
+                      <div class="flex gap-2 items-center text-sm">
+                        <span class="text-gray-500 dark:text-neutral-400">Event #{{ instance.id }}</span>
+                        <span class="text-gray-400">|</span>
+                        <span class="text-gray-600 dark:text-neutral-300">{{ formatDate(instance.created_at) }}</span>
+                      </div>
+                      <p class="mt-1 text-gray-900 text-sm dark:text-white">{{ instance.message }}</p>
+                      @if(instance.additional_info)
+                        <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">
+                          {{ instance.additional_info }}
+                        </p>
+                      @endif
+                    </div>
+                  </div>
+                </div>
+              @endforeach
+            </div>
+          @endif
+        @endif
+      </div>
+
+      <!-- Footer -->
+      <div class="px-6 py-4 border-gray-200 border-t dark:border-neutral-700">
+        <div class="flex justify-end">
+          <button type="button" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm" data-action="close">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+@endif

package/resources/components/Dashboard/Monitoring/ErrorsTable.stx

@@ -0,0 +1,184 @@
+<script>
+interface ErrorsTableProps {
+  errors?: any[]
+  searchQuery?: string
+  statusFilter?: string
+  typeFilter?: string
+  sortBy?: string
+  sortOrder?: string
+}
+
+const { errors = [], searchQuery = '', statusFilter = 'all', typeFilter = 'all', sortBy = 'last_seen', sortOrder = 'desc' } = defineProps<ErrorsTableProps>()
+
+// Helper functions
+function getStatusClass(status) {
+  switch (status) {
+    case 'resolved':
+      return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
+    case 'ignored':
+      return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+    case 'unresolved':
+    default:
+      return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+  }
+}
+
+function getTypeClass(type) {
+  const typeLC = type.toLowerCase()
+  if (typeLC.includes('error') || typeLC.includes('exception')) {
+    return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400'
+  }
+  if (typeLC.includes('warning')) {
+    return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  if (typeLC.includes('info')) {
+    return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
+  }
+  return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400'
+}
+
+function formatTimeAgo(dateString) {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSecs = Math.floor(diffMs / 1000)
+  const diffMins = Math.floor(diffSecs / 60)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffDays > 0) return `${diffDays}d ago`
+  if (diffHours > 0) return `${diffHours}h ago`
+  if (diffMins > 0) return `${diffMins}m ago`
+  return 'Just now'
+}
+
+function truncateMessage(message, maxLength = 60) {
+  if (message.length <= maxLength) return message
+  return `${message.substring(0, maxLength)}...`
+}
+</script>
+<div class="overflow-hidden">
+  <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+    <thead class="bg-gray-50 dark:bg-neutral-700">
+      <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-200">
+          <button class="inline-flex items-center group" data-action="sort" data-column="type">
+            Error
+            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+              @if(sortBy == 'type')
+                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
+              @else
+                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
+              @endif
+            </span>
+          </button>
+        </th>
+        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+          <button class="inline-flex items-center group" data-action="sort" data-column="count">
+            Events
+            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+              @if(sortBy == 'count')
+                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
+              @else
+                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
+              @endif
+            </span>
+          </button>
+        </th>
+        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+          <button class="inline-flex items-center group" data-action="sort" data-column="last_seen">
+            Last Seen
+            <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+              @if(sortBy == 'last_seen')
+                <div class="{{ sortOrder == 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02' }} h-4 w-4"></div>
+              @else
+                <div class="h-4 w-4 i-hugeicons-arrows-up-down"></div>
+              @endif
+            </span>
+          </button>
+        </th>
+        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+          Status
+        </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-800 divide-gray-200 divide-y dark:divide-neutral-700">
+      @foreach(errors as error)
+        <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700 cursor-pointer" data-action="view" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
+          <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm">
+            <div class="flex flex-col">
+              <div class="flex gap-2 items-center">
+                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ getTypeClass(error.type) }}">
+                  {{ error.type }}
+                </span>
+              </div>
+              <div class="mt-1 font-medium text-gray-900 dark:text-white">
+                {{ truncateMessage(error.message) }}
+              </div>
+              <div class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">
+                First seen: {{ formatTimeAgo(error.first_seen) }}
+              </div>
+            </div>
+          </td>
+          <td class="px-3 py-4 text-sm whitespace-nowrap">
+            <div class="flex items-center">
+              <span class="inline-flex items-center justify-center px-2 h-6 min-w-[24px] font-medium text-gray-700 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">
+                {{ error.count }}
+              </span>
+            </div>
+          </td>
+          <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+            {{ formatTimeAgo(error.last_seen) }}
+          </td>
+          <td class="px-3 py-4 text-sm whitespace-nowrap">
+            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium capitalize {{ getStatusClass(error.status) }}">
+              {{ error.status }}
+            </span>
+          </td>
+          <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+            <div class="flex items-center justify-end space-x-2">
+              @if(error.status != 'resolved')
+                <button type="button" title="Mark as resolved" class="text-green-400 dark:text-green-400 hover:text-green-600 dark:hover:text-green-300 duration-150 transition-colors" data-action="resolve" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
+                  <div class="h-5 w-5 i-hugeicons-checkmark-circle-02"></div>
+                </button>
+              @endif
+              @if(error.status == 'resolved')
+                <button type="button" title="Reopen" class="text-yellow-400 dark:text-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300 duration-150 transition-colors" data-action="unresolve" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
+                  <div class="h-5 w-5 i-hugeicons-refresh"></div>
+                </button>
+              @endif
+              @if(error.status != 'ignored')
+                <button type="button" title="Ignore" class="text-gray-400 dark:text-neutral-400 hover:text-gray-600 dark:hover:text-gray-300 duration-150 transition-colors" data-action="ignore" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
+                  <div class="h-5 w-5 i-hugeicons-eye-off"></div>
+                </button>
+              @endif
+              <button type="button" title="Delete" class="text-red-400 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 duration-150 transition-colors" data-action="delete" data-error-type="{{ error.type }}" data-error-message="{{ error.message }}">
+                <div class="h-5 w-5 i-hugeicons-waste"></div>
+              </button>
+            </div>
+          </td>
+        </tr>
+      @endforeach
+      @if(errors.length == 0)
+        <tr>
+          <td colspan="5" class="px-6 py-12 text-center">
+            <div class="flex flex-col items-center">
+              <div class="h-12 w-12 text-green-400 i-hugeicons-checkmark-circle-02"></div>
+              <h3 class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No errors found</h3>
+              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                @if(searchQuery || statusFilter != 'all' || typeFilter != 'all')
+                  Try adjusting your filters
+                @else
+                  Your application is running smoothly!
+                @endif
+              </p>
+            </div>
+          </td>
+        </tr>
+      @endif
+    </tbody>
+  </table>
+</div>