@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Navbar.stx

@@ -0,0 +1,194 @@
+<script>
+interface NavbarProps {
+  showDropdown?: boolean
+  isDark?: boolean
+  theme?: string
+  isSidebarCollapsed?: boolean
+  currentPath?: string
+}
+
+const { showDropdown = false, isDark = false, theme = 'light', isSidebarCollapsed = false, currentPath = '/' } = defineProps<NavbarProps>()
+
+/**
+ * Navbar Component
+ * Top navigation bar with search, notifications, and user menu.
+ */
+
+// State
+// Current path (would be provided by router)
+function isActiveRoute(path) {
+  return currentPath === path || currentPath.startsWith(path + '/')
+}
+
+function getNavbarClasses() {
+  return isSidebarCollapsed ? 'navbar-collapsed' : 'navbar-expanded'
+}
+</script>
+<div
+  class="sticky top-0 z-10 h-16 flex shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 dark:border-neutral-600 dark:bg-neutral-900 lg:px-8 sm:px-6 transition-all duration-300 {{ getNavbarClasses() }}"
+>
+  <button type="button" class="lg:hidden -m-2.5 p-2.5 text-gray-700" title="Open sidebar">
+    <span class="sr-only">Open sidebar</span>
+    <div class="h-6 w-6 i-hugeicons-menu-01"></div>
+  </button>
+
+  <!-- Separator -->
+  <div class="lg:hidden h-6 w-px bg-gray-200" aria-hidden="true"></div>
+
+  <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+    <form
+      class="flex relative flex-1"
+      action="#"
+      method="GET"
+    >
+      <label for="search-field" class="sr-only">Search</label>
+
+      <div class="absolute inset-y-0 left-0 h-full w-5 text-gray-400 pointer-events-none i-hugeicons-search-01"></div>
+      <input
+        id="search-field"
+        class="block pl-8 pr-0 py-0 h-full w-full text-gray-900 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-900 border-none focus:ring-0"
+        placeholder="Search..."
+        type="search"
+        name="search"
+      >
+    </form>
+
+    <div class="flex gap-x-4 items-center lg:gap-x-6">
+      <button type="button" class="header-icon-button" title="View Errors">
+        <span class="sr-only">View Errors</span>
+        <a
+          href="/errors"
+          class="header-link {{ isActiveRoute('/errors') ? 'active-header-link' : '' }}"
+        >
+          <div class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-alert-01"></div>
+        </a>
+      </button>
+
+      <button type="button" class="header-icon-button" title="View Health Page">
+        <span class="sr-only">View Health Page</span>
+        <a
+          href="/health"
+          class="header-link {{ isActiveRoute('/health') ? 'active-header-link' : '' }}"
+        >
+          <div class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-health"></div>
+        </a>
+      </button>
+
+      <button type="button" class="header-icon-button" title="View Cloud Insights Page">
+        <span class="sr-only">View Cloud Insights Page</span>
+        <a
+          href="/insights"
+          class="header-link {{ isActiveRoute('/insights') ? 'active-header-link' : '' }}"
+        >
+          <div class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-pulse-01"></div>
+        </a>
+      </button>
+
+      <button type="button" class="header-icon-button" title="View Inbox">
+        <span class="sr-only">View Inbox</span>
+        <a
+          href="/inbox"
+          class="header-link {{ isActiveRoute('/inbox') ? 'active-header-link' : '' }}"
+        >
+          <div class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-mail-02"></div>
+        </a>
+      </button>
+
+      <button type="button" class="header-icon-button" title="View notifications">
+        <span class="sr-only">View notifications</span>
+        <a
+          href="/notifications"
+          class="header-link {{ isActiveRoute('/notifications') ? 'active-header-link' : '' }}"
+        >
+          <div class="h-6 w-6 i-hugeicons-notification-02"></div>
+        </a>
+      </button>
+
+      <!-- Separator -->
+      <div
+        class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200"
+        aria-hidden="true"
+      ></div>
+
+      <!-- Profile dropdown -->
+      <div class="relative ml-3">
+        <div>
+          <button
+            id="user-menu-button"
+            type="button"
+            class="flex relative text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+            aria-expanded="false"
+            aria-haspopup="true"
+            data-action="toggle-dropdown"
+            title="User profile"
+          >
+            <span class="absolute -inset-1.5"></span>
+            <span class="sr-only">Open user menu</span>
+            <img class="h-8 w-8 rounded-full" src="https://avatars.githubusercontent.com/u/6228425" alt="">
+          </button>
+        </div>
+
+        @if(showDropdown)
+          <div class="absolute right-0 z-10 mt-2 py-1 w-48 bg-white dark:bg-neutral-800 ring-1 ring-black ring-opacity-5 rounded-md focus:outline-none shadow-lg origin-top-right" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+            <a id="user-menu-item-0" href="#" class="block px-4 py-2 text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-100 dark:hover:bg-neutral-700" role="menuitem" tabindex="-1">Your Profile</a>
+            <a id="user-menu-item-0" href="#" class="block px-4 py-2 text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-100 dark:hover:bg-neutral-700" role="menuitem" tabindex="-1">Documentation</a>
+            <a id="user-menu-item-1" href="#" class="block px-4 py-2 text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-100 dark:hover:bg-neutral-700" role="menuitem" tabindex="-1">Billing</a>
+            <a id="user-menu-item-1" href="#" class="block px-4 py-2 text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-100 dark:hover:bg-neutral-700" role="menuitem" tabindex="-1">Settings</a>
+            <a id="user-menu-item-2" href="#" class="block px-4 py-2 text-gray-700 text-sm dark:text-neutral-200 hover:bg-gray-100 dark:hover:bg-neutral-700" role="menuitem" tabindex="-1" data-action="logout">Sign out</a>
+            <a
+              id="user-menu-item-4"
+              href="#"
+              class="flex justify-between my-1 px-4 py-2 leading-6 text-gray-500 text-sm dark:text-neutral-400 hover:text-neutral-600 dark:hover:text-gray-200 hover:bg-neutral-50 dark:hover:bg-neutral-700"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <label for="small" class="self-center mr-2 text-gray-500 text-sm dark:text-neutral-300">
+                Theme
+              </label>
+
+              <select
+                id="small"
+                class="dark:placeholder-gray-400 text-gray-500 text-sm dark:text-white bg-gray-50 dark:bg-neutral-700 border border-gray-300 rounded-lg dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                data-model="theme"
+              >
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+                <option value="auto">Auto</option>
+              </select>
+            </a>
+          </div>
+        @endif
+      </div>
+    </div>
+  </div>
+</div>
+<style scoped>
+.header-icon-button {
+  @apply p-2.5 -m-2.5;
+}
+
+.header-link {
+  @apply text-gray-400 hover:text-neutral-500 transition-colors duration-150;
+}
+
+.header-link div {
+  @apply transition-colors duration-150;
+}
+
+.active-header-link {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.active-header-link div {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* Navbar responsive styles */
+.navbar-expanded {
+  width: 100%;
+}
+
+.navbar-collapsed {
+  width: 100%;
+}
+</style>

package/resources/components/Dashboard/NavbarModern.stx

@@ -0,0 +1,188 @@
+<script server>
+// `<script server>` (not bare `<script>`) so the function declarations and
+// const bindings below — `getBreadcrumb`, `isActiveRoute`, `getUser`,
+// `getNotificationCount`, `defaultUser` — get extracted into this
+// component's render context. Without `server` STX treats the script as
+// client-only and the template's `@foreach(getBreadcrumb(currentPath || '/')
+// as crumb)` evaluates against an empty context, producing
+// `[Foreach Error]: getBreadcrumb is not iterable` on every navigation.
+interface NavbarModernProps {
+  currentPath?: string
+  user?: Record<string, any>
+  notificationCount?: number
+}
+
+const { currentPath = '/', user, notificationCount = 3 } = defineProps<NavbarModernProps>()
+
+/**
+ * Modern Navbar Component
+ * A clean, refined navigation header for the dashboard.
+ * Note: Window controls are handled natively by Craft on macOS.
+ */
+
+// Default user data
+const defaultUser = {
+  name: 'Chris Breuer',
+  email: 'chris@stacksjs.org',
+  avatar: 'https://avatars.githubusercontent.com/u/6228425',
+}
+
+function getBreadcrumb(path) {
+  const parts = (path || '/').split('/').filter(Boolean)
+  return parts.map((part, index) => ({
+    label: part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, ' '),
+    path: '/' + parts.slice(0, index + 1).join('/'),
+    isLast: index === parts.length - 1,
+  }))
+}
+
+function isActiveRoute(path) {
+  return currentPath === path || currentPath.startsWith(path + '/')
+}
+
+function getUser() {
+  return user || defaultUser
+}
+
+function getNotificationCount() {
+  return notificationCount
+}
+</script>
+<header class="flex sticky top-0 z-40 gap-4 items-center px-4 h-14 bg-white/80 dark:bg-neutral-900/80 border-b border-neutral-200/50 dark:border-neutral-700/50 backdrop-blur-xl">
+  <!-- Breadcrumb navigation -->
+  <nav class="hidden lg:flex gap-2 items-center text-sm">
+    <a href="/" class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+      </svg>
+    </a>
+    @foreach(getBreadcrumb(currentPath || '/') as crumb)
+      <span class="text-neutral-300 dark:text-neutral-600">/</span>
+      @if(!crumb.isLast)
+        <a href="{{ crumb.path }}" class="text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors">
+          {{ crumb.label }}
+        </a>
+      @else
+        <span class="font-medium text-neutral-700 dark:text-neutral-200">{{ crumb.label }}</span>
+      @endif
+    @endforeach
+  </nav>
+
+  <!-- Spacer -->
+  <div class="flex-1"></div>
+
+  <!-- Search -->
+  <div class="hidden sm:flex items-center">
+    <div class="flex relative items-center w-56 lg:w-64">
+      <svg class="absolute left-3 h-4 w-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+      <input
+        type="text"
+        placeholder="Search..."
+        class="pl-10 pr-16 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 border-none rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/40 cursor-pointer"
+        readonly
+        @click="$emit('open-search')"
+        @focus="$emit('open-search')"
+      />
+      <div class="flex absolute right-3 items-center">
+        <kbd class="hidden lg:inline-flex px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-white dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600 shadow-sm">
+          ⌘K
+        </kbd>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right section -->
+  <div class="flex gap-2 items-center">
+    <!-- Bug/Errors -->
+    <a
+      href="/monitoring/errors"
+      class="p-2 rounded-lg transition-colors {{ isActiveRoute('/monitoring/errors') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+      title="Error Tracking"
+    >
+      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+      </svg>
+    </a>
+
+    <!-- Health -->
+    <a
+      href="/health"
+      class="p-2 rounded-lg transition-colors {{ isActiveRoute('/health') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+      title="System Health"
+    >
+      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+      </svg>
+    </a>
+
+    <!-- Notifications -->
+    <a
+      href="/notifications"
+      class="relative p-2 rounded-lg transition-colors {{ isActiveRoute('/notifications') ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+      title="Notifications"
+    >
+      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+      </svg>
+      @if(getNotificationCount() > 0)
+        <span class="flex absolute right-1 top-1 items-center justify-center px-1 h-4 min-w-[16px] font-bold text-[10px] text-white bg-red-500 rounded-full">
+          {{ getNotificationCount() > 9 ? '9+' : getNotificationCount() }}
+        </span>
+      @endif
+    </a>
+
+    <!-- Separator -->
+    <div class="mx-1 h-6 w-px bg-neutral-200 dark:bg-neutral-700"></div>
+
+    <!-- User dropdown -->
+    <div class="relative" data-dropdown="user">
+      <button
+        type="button"
+        class="flex gap-2 items-center p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+        data-action="toggle-dropdown"
+      >
+        <img
+          src="{{ getUser().avatar }}"
+          alt="{{ getUser().name }}"
+          class="object-cover h-8 w-8 rounded-full"
+        />
+        <span class="hidden lg:block font-medium text-neutral-700 text-sm dark:text-neutral-200">
+          {{ getUser().name }}
+        </span>
+        <svg class="hidden lg:block h-4 w-4 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+      </button>
+
+      <!-- Dropdown menu -->
+      <div class="hidden absolute right-0 z-50 mt-2 py-1 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-lg" data-dropdown-content>
+        <div class="px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
+          <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ getUser().name }}</p>
+          <p class="text-neutral-500 text-xs truncate dark:text-neutral-400">{{ getUser().email }}</p>
+        </div>
+        <div class="py-1">
+          <a href="/profile" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
+            Your Profile
+          </a>
+          <a href="/settings" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
+            Settings
+          </a>
+          <a href="/billing" class="flex gap-3 items-center px-4 py-2 text-neutral-700 text-sm dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700">
+            Billing
+          </a>
+        </div>
+        <div class="py-1 border-neutral-200 border-t dark:border-neutral-700">
+          <button
+            type="button"
+            class="flex gap-3 items-center px-4 py-2 w-full text-red-600 text-sm dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+            data-action="logout"
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

package/resources/components/Dashboard/NotificationErrorModal.stx

@@ -0,0 +1,105 @@
+<script>
+interface NotificationErrorModalProps {
+  isOpen?: boolean
+  notificationId?: string
+  notificationType?: string
+  errorMessage?: string
+  sentAt?: string
+}
+
+const { isOpen = false, notificationId = '', notificationType = 'email', errorMessage = '', sentAt = '' } = defineProps<NotificationErrorModalProps>()
+</script>
+@if(isOpen)
+  <div class="fixed inset-0 overflow-y-auto z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
+      <!-- Background overlay -->
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" aria-hidden="true" data-close-modal></div>
+
+      <!-- Modal panel -->
+      <div class="inline-block overflow-hidden 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 align-bottom sm:align-middle">
+        <div class="pb-4 pt-5 px-4 sm:p-6 sm:pb-4 bg-white dark:bg-neutral-800">
+          <div class="sm:flex sm:items-start">
+            <div class="flex flex-shrink-0 items-center justify-center mx-auto sm:mx-0 h-12 w-12 sm:h-10 sm:w-10 bg-red-100 dark:bg-red-900 rounded-full">
+              <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-triangle"></div>
+            </div>
+            <div class="mt-3 sm:ml-4 sm:mt-0 w-full text-center sm:text-left">
+              <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-neutral-100" id="modal-title">
+                Notification Error Details
+              </h3>
+
+              <!-- Error details section -->
+              <div class="mt-4 p-4 bg-red-50 dark:bg-red-900/30 rounded-md">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <div class="h-5 w-5 text-red-400 i-hugeicons-alert-circle"></div>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="font-medium text-red-800 text-sm dark:text-red-300">Error Message</h3>
+                    <div class="mt-2 text-red-700 text-sm dark:text-red-200">
+                      <p>{{ errorMessage }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Logs section -->
+              <div class="mt-4">
+                <h4 class="font-medium text-gray-900 text-md dark:text-neutral-100">Notification Logs</h4>
+                <p class="mb-2 text-gray-500 text-sm dark:text-neutral-400">
+                  Detailed logs for {{ notificationType }} notification ID: {{ notificationId }}
+                </p>
+
+                <!-- Logs table placeholder -->
+                <div class="overflow-hidden mt-2 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-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-100">Timestamp</th>
+                        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Level</th>
+                        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Message</th>
+                        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Context</th>
+                      </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-600">
+                      <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
+                        <td class="pl-4 pr-3 py-4 sm:pl-6 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">
+                          {{ sentAt }}
+                        </td>
+                        <td class="px-3 py-4 text-sm">
+                          <span class="inline-flex items-center px-2 py-1 font-medium text-red-700 text-xs dark:text-red-400 bg-red-50 dark:bg-red-900/30 rounded-md">
+                            ERROR
+                          </span>
+                        </td>
+                        <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                          {{ errorMessage }}
+                        </td>
+                        <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                          -
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:flex sm:flex-row-reverse px-4 py-3 sm:px-6 bg-gray-50 dark:bg-neutral-700">
+          <button
+            type="button"
+            class="inline-flex justify-center mt-3 px-4 py-2 sm:ml-3 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 border border-gray-300 rounded-md dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm"
+            data-close-modal
+          >
+            Close
+          </button>
+          <button
+            type="button"
+            class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm"
+          >
+            Download Logs
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  @endif

package/resources/components/Dashboard/NotificationStatusBadge.stx

@@ -0,0 +1,20 @@
+<script>
+interface NotificationStatusBadgeProps {
+  status?: 'delivered' | 'sent' | 'pending' | 'failed'
+}
+
+const { status = 'pending' } = defineProps<NotificationStatusBadgeProps>()
+
+const statusColors: 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',
+}
+
+const colorClass = statusColors[status] || 'text-gray-700 dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/50 ring-gray-600/20'
+</script>
+
+<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ colorClass }}">
+  {{ status }}
+</span>

package/resources/components/Dashboard/Pagination.stx

@@ -0,0 +1,90 @@
+<script>
+interface PaginationProps {
+  currentPage?: number
+  perPage?: number
+  total?: number
+  from?: number
+  to?: number
+}
+
+const { currentPage = 1, perPage = 20, total = 875, from = 1, to = 20 } = defineProps<PaginationProps>()
+</script>
+<div class="flex items-center justify-between px-4 py-3 sm:px-6 bg-white dark:bg-neutral-800 border-gray-200 border-t rounded-bl-lg rounded-br-lg dark:border-neutral-600">
+    <div class="flex sm:hidden flex-1 justify-between">
+      <a
+        href="#"
+        class="inline-flex relative items-center px-4 py-2 font-medium text-gray-700 text-sm dark:text-neutral-200 bg-white hover:bg-gray-50 border border-gray-300 rounded-md dark:border-neutral-600"
+      >Previous</a>
+      <a
+        href="#"
+        class="inline-flex relative items-center ml-3 px-4 py-2 font-medium text-gray-700 text-sm dark:text-neutral-200 bg-white hover:bg-gray-50 border border-gray-300 rounded-md dark:border-neutral-600"
+      >Next</a>
+    </div>
+    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+      <div>
+        <p class="text-gray-700 text-sm dark:text-neutral-200 dark:text-neutral-300">
+          Showing <span class="font-semibold">{{ from }}</span> to <span class="font-semibold">{{ to }}</span> of <span class="font-semibold">{{ total }}</span> results
+        </p>
+      </div>
+      <div>
+        <nav
+          class="inline-flex -space-x-px rounded-md shadow-sm isolate"
+          aria-label="Pagination"
+        >
+          <a
+            href="#"
+            class="inline-flex relative focus:z-20 items-center px-2 py-2 font-medium text-gray-500 text-sm dark:text-neutral-300 dark:text-neutral-400 bg-white dark:bg-neutral-700 hover:bg-gray-50 border border-gray-300 rounded-l-md dark:border-neutral-600"
+          >
+            <span class="sr-only">First</span>
+            <div class="h-5 w-5 i-hugeicons-chevron-double-left-20-solid"></div>
+          </a>
+          <a
+            href="#"
+            class="inline-flex relative focus:z-20 items-center px-2 py-2 font-medium text-gray-500 text-sm dark:text-neutral-300 dark:text-neutral-400 bg-white dark:bg-neutral-700 hover:bg-gray-50 border border-gray-300 dark:border-neutral-600"
+          >
+            <span class="sr-only">Previous</span>
+            <div class="h-5 w-5 i-hugeicons-chevron-left-20-solid"></div>
+          </a>
+          <a
+            href="#"
+            aria-current="page"
+            class="inline-flex relative z-20 items-center px-4 py-2 font-medium text-blue-600 text-sm dark:text-teal-50 bg-neutral-50 dark:bg-neutral-600 hover:bg-neutral-50 border border-neutral-400 dark:border-neutral-600"
+          >1</a>
+          <a
+            href="#"
+            aria-current="page"
+            class="inline-flex relative items-center px-4 py-2 font-medium text-sm dark:text-teal-50 dark-hover:bg-gray-600 dark:bg-neutral-700 hover:bg-neutral-50 border dark:border-neutral-600"
+          >2</a>
+          <a
+            href="#"
+            aria-current="page"
+            class="inline-flex relative items-center px-4 py-2 font-medium text-sm dark:text-teal-50 dark-hover:bg-gray-600 dark:bg-neutral-700 hover:bg-neutral-50 border dark:border-neutral-600"
+          >3</a>
+          <a
+            href="#"
+            aria-current="page"
+            class="inline-flex relative items-center px-4 py-2 font-medium text-sm dark:text-teal-50 dark-hover:bg-gray-600 dark:bg-neutral-700 hover:bg-neutral-50 border dark:border-neutral-600"
+          >4</a>
+          <a
+            href="#"
+            aria-current="page"
+            class="inline-flex relative items-center px-4 py-2 font-medium text-sm dark:text-teal-50 dark-hover:bg-gray-600 dark:bg-neutral-700 hover:bg-neutral-50 border dark:border-neutral-600"
+          >5</a>
+          <a
+            href="#"
+            class="inline-flex relative focus:z-20 items-center px-2 py-2 font-medium text-gray-500 text-sm dark:text-neutral-300 dark:text-neutral-400 bg-white dark:bg-neutral-700 hover:bg-gray-50 border border-gray-300 dark:border-neutral-600"
+          >
+            <span class="sr-only">Next</span>
+            <div class="h-5 w-5 i-hugeicons-chevron-right-20-solid"></div>
+          </a>
+          <a
+            href="#"
+            class="inline-flex relative focus:z-20 items-center px-2 py-2 font-medium text-gray-500 text-sm dark:text-neutral-300 dark:text-neutral-400 bg-white dark:bg-neutral-700 hover:bg-gray-50 border border-gray-300 rounded-r-md dark:border-neutral-600"
+          >
+            <span class="sr-only">Last</span>
+            <div class="h-5 w-5 i-hugeicons-chevron-double-right-20-solid"></div>
+          </a>
+        </nav>
+      </div>
+    </div>
+  </div>