@stacksjs/defaults 0.70.229 → 0.70.231

package/views/dashboard/inbox/settings.stx

@@ -2,289 +2,6 @@
 
 @section('content')
 @title('Mail - Settings')
-<div class="min-h-screen dark:bg-neutral-800">
-  <div class="flex h-screen">
-    <EmailSidebar :activeFolder="activeFolder" :folders="folders" :unreadCounts="unreadCounts" @update:active-folder="handleFolderChange" @compose="handleCompose" />
-
-    <div class="flex overflow-hidden flex-1 flex-col">
-      <div class="px-6 py-4 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
-        <div class="flex items-center justify-between">
-          <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Settings</h1>
-          <div>
-            <button @click="saveSettings()" :disabled="isLoading" class="flex items-center px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md disabled:opacity-50">
-              <i :show="isIdle" class="mr-2 text-lg i-hugeicons-checkmark-circle-02"></i>
-              <i :show="isLoading" class="mr-2 text-lg animate-spin i-hugeicons-refresh"></i>
-              Save Changes
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex overflow-hidden flex-1">
-        <div class="overflow-y-auto w-64 bg-white dark:bg-neutral-700 border-gray-200 border-r dark:border-neutral-600">
-          <nav class="p-4">
-            <ul class="space-y-1">
-              @foreach(settingsSections as section)
-                <li>
-                  <button @click="setActiveSection('{{ section.id }}')" class="w-full flex items-center px-3 py-3 text-sm rounded-md {{ activeSection() === section.id ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100' : 'text-gray-700 hover:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-600' }}">
-                    <i class="{{ section.icon }} text-lg"></i>
-                    <span class="ml-3">{{ section.name }}</span>
-                  </button>
-                </li>
-              @endforeach
-            </ul>
-          </nav>
-        </div>
-
-        <div class="overflow-y-auto flex-1 p-6">
-          <div :show="isGeneralSection" class="space-y-6">
-            <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-              <h2 class="mb-4 font-medium text-gray-900 text-lg dark:text-white">Display Settings</h2>
-
-              <div class="space-y-4">
-                <div>
-                  <label for="displayDensity" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Display Density</label>
-                  <select id="displayDensity" x-model="displayDensity" class="block mt-1 pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-                    <option value="comfortable">Comfortable</option>
-                    <option value="default">Default</option>
-                    <option value="compact">Compact</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label for="theme" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Theme</label>
-                  <select id="theme" x-model="theme" class="block mt-1 pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-                    <option value="light">Light</option>
-                    <option value="dark">Dark</option>
-                    <option value="system">System Default</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label for="language" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Language</label>
-                  <select id="language" x-model="language" class="block mt-1 pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-                    <option value="en">English</option>
-                    <option value="fr">French</option>
-                    <option value="de">German</option>
-                    <option value="es">Spanish</option>
-                    <option value="ja">Japanese</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-              <h2 class="mb-4 font-medium text-gray-900 text-lg dark:text-white">Email Behavior</h2>
-
-              <div class="space-y-4">
-                <div>
-                  <label for="defaultReplyBehavior" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Default Reply Behavior</label>
-                  <select id="defaultReplyBehavior" x-model="defaultReplyBehavior" class="block mt-1 pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-                    <option value="reply">Reply</option>
-                    <option value="replyAll">Reply All</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label for="autoAdvance" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">After archiving or deleting an email, show</label>
-                  <select id="autoAdvance" x-model="autoAdvance" class="block mt-1 pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
-                    <option value="newer">Newer conversation</option>
-                    <option value="older">Older conversation</option>
-                    <option value="back">Back to inbox</option>
-                  </select>
-                </div>
-
-                <div class="flex items-center">
-                  <input id="sendAndArchive" type="checkbox" x-model="sendAndArchive" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
-                  <label for="sendAndArchive" class="block ml-2 text-gray-700 text-sm dark:text-neutral-300">Show "Send & Archive" button in reply</label>
-                </div>
-
-                <div class="flex items-center">
-                  <input id="desktopNotifications" type="checkbox" x-model="desktopNotifications" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
-                  <label for="desktopNotifications" class="block ml-2 text-gray-700 text-sm dark:text-neutral-300">Enable desktop notifications</label>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div :show="isAccountsSection" class="space-y-6">
-            <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-              <h2 class="mb-4 font-medium text-gray-900 text-lg dark:text-white">Account Information</h2>
-
-              <div class="space-y-4">
-                <div>
-                  <label for="name" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Your Name</label>
-                  <input id="name" type="text" x-model="accountName" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-                </div>
-
-                <div>
-                  <label for="email" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Email Address</label>
-                  <input id="email" type="email" x-model="accountEmail" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-                </div>
-              </div>
-            </div>
-
-            <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-              <h2 class="mb-4 font-medium text-gray-900 text-lg dark:text-white">Email Signature</h2>
-
-              <div>
-                <label for="signature" class="block mb-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Signature</label>
-                <div class="p-2 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600">
-                  <textarea id="signature" x-model="signature" rows="4" class="block px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-transparent border-0 focus:outline-none focus:ring-0"></textarea>
-                </div>
-                <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">HTML formatting is supported</p>
-              </div>
-            </div>
-
-            <div class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-              <div class="flex items-center justify-between mb-4">
-                <h2 class="font-medium text-gray-900 text-lg dark:text-white">Vacation Responder</h2>
-                <div class="flex items-center">
-                  <span class="mr-2 text-gray-700 text-sm dark:text-neutral-300">Off</span>
-                  <button type="button" @click="toggleVacationResponder()" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 {{ vacationEnabled() ? 'bg-blue-600' : 'bg-gray-200 dark:bg-neutral-700' }}">
-                    <span class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white dark:bg-neutral-800 shadow transform ring-0 transition ease-in-out duration-200 {{ vacationEnabled() ? 'translate-x-5' : 'translate-x-0' }}"></span>
-                  </button>
-                  <span class="ml-2 text-gray-700 text-sm dark:text-neutral-300">On</span>
-                </div>
-              </div>
-
-              <div :show="vacationEnabled" class="space-y-4">
-                <div class="grid gap-4 grid-cols-1 md:grid-cols-2">
-                  <div>
-                    <label for="startDate" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Start Date</label>
-                    <input id="startDate" type="date" x-model="vacationStartDate" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-                  </div>
-                  <div>
-                    <label for="endDate" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">End Date</label>
-                    <input id="endDate" type="date" x-model="vacationEndDate" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-                  </div>
-                </div>
-
-                <div>
-                  <label for="subject" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Subject</label>
-                  <input id="subject" type="text" x-model="vacationSubject" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
-                </div>
-
-                <div>
-                  <label for="message" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Message</label>
-                  <textarea id="message" x-model="vacationMessage" rows="4" class="block mt-1 px-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500"></textarea>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div :show="isOtherSection" class="p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
-            <div class="flex flex-col items-center justify-center py-12">
-              <div class="mb-4 p-6 bg-blue-100 dark:bg-blue-900 rounded-full">
-                <i class="{{ activeSectionIcon() }} text-4xl text-blue-600 dark:text-blue-400"></i>
-              </div>
-              <h2 class="mb-2 font-medium text-gray-900 text-xl dark:text-white">{{ activeSectionName() }} Settings</h2>
-              <p class="max-w-md text-center text-gray-500 dark:text-neutral-400">This section is under development. More settings will be available soon.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script client>
-interface SettingsSection {
-  id: string
-  name: string
-  icon: string
-}
-
-const folders = [
-  { id: 'inbox', name: 'Inbox', icon: 'inbox' },
-  { id: 'starred', name: 'Starred', icon: 'star' },
-  { id: 'sent', name: 'Sent', icon: 'mail-send-01' },
-  { id: 'drafts', name: 'Drafts', icon: 'license-draft' },
-  { id: 'archive', name: 'Archive', icon: 'archive' },
-  { id: 'spam', name: 'Spam', icon: 'spam' },
-  { id: 'trash', name: 'Trash', icon: 'waste' },
-]
-
-const unreadCounts = {
-  inbox: 2,
-  starred: 1,
-  sent: 0,
-  drafts: 0,
-  archive: 0,
-  spam: 1,
-  trash: 0,
-}
-
-const settingsSections: SettingsSection[] = [
-  { id: 'general', name: 'General', icon: 'i-hugeicons-settings-01' },
-  { id: 'accounts', name: 'Account', icon: 'i-hugeicons-mail-account-02' },
-  { id: 'notifications', name: 'Notifications', icon: 'i-hugeicons-notification-01' },
-  { id: 'filters', name: 'Filters & Blocking', icon: 'i-hugeicons-filter-mail-circle' },
-  { id: 'labels', name: 'Labels', icon: 'i-hugeicons-tag-01' },
-  { id: 'security', name: 'Security', icon: 'i-hugeicons-security-check' },
-]
-
-const activeFolder = state('inbox')
-const activeSection = state('general')
-const isLoading = state(false)
-
-const displayDensity = state('default')
-const defaultReplyBehavior = state('replyAll')
-const sendAndArchive = state(true)
-const autoAdvance = state('newer')
-const desktopNotifications = state(true)
-const theme = state('system')
-const language = state('en')
-
-const accountName = state('User')
-const accountEmail = state('me@stacksjs.com')
-const signature = state('<p>Best regards,<br>User</p>')
-const vacationEnabled = state(false)
-const vacationStartDate = state('')
-const vacationEndDate = state('')
-const vacationSubject = state('Out of Office')
-const vacationMessage = state('I am currently out of office with limited access to email.')
-
-const isIdle = derived(() => !isLoading())
-const isGeneralSection = derived(() => activeSection() === 'general')
-const isAccountsSection = derived(() => activeSection() === 'accounts')
-const isOtherSection = derived(() => activeSection() !== 'general' && activeSection() !== 'accounts')
-
-function activeSectionMeta(): SettingsSection | undefined {
-  return settingsSections.find(s => s.id === activeSection())
-}
-
-function activeSectionName(): string { return activeSectionMeta()?.name ?? '' }
-function activeSectionIcon(): string { return activeSectionMeta()?.icon ?? '' }
-
-function setActiveSection(id: string): void {
-  activeSection.set(id)
-}
-
-function toggleVacationResponder(): void {
-  vacationEnabled.update(v => !v)
-}
-
-function handleFolderChange(folder: string): void {
-  activeFolder.set(folder)
-  navigate(`/inbox?folder=${encodeURIComponent(folder)}`)
-}
-
-function handleCompose(): void {
-  navigate('/inbox?compose=true')
-}
-
-async function saveSettings(): Promise<void> {
-  isLoading.set(true)
-  try {
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    // eslint-disable-next-line no-alert
-    alert('Settings saved successfully')
-  }
-  finally {
-    isLoading.set(false)
-  }
-}
-</script>
 
+<InboxSettingsDashboard />
 @endsection

package/views/dashboard/index.stx

@@ -1,252 +1,6 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
-const stats = state([
-  { title: 'Total Users', value: '0', trend: 0, trendLabel: 'vs last period', icon: 'i-hugeicons-user-group' },
-  { title: 'Active Projects', value: '0', trend: 0, trendLabel: 'vs last period', icon: 'i-hugeicons-folder-02' },
-  { title: 'Revenue', value: '$0', trend: 0, trendLabel: 'Current total', icon: 'i-hugeicons-money-03' },
-  { title: 'Orders', value: '0', trend: 0, trendLabel: 'Current total', icon: 'i-hugeicons-shopping-cart-02' },
-])
-
-const httpMetrics = state([
-  { title: 'HTTP Requests', value: '0', detail: 'All captured requests', icon: 'i-hugeicons-global' },
-  { title: 'Average Response', value: '0ms', detail: 'No requests captured', icon: 'i-hugeicons-clock-01' },
-  { title: 'Success Rate', value: '100%', detail: '2xx and 3xx responses', icon: 'i-hugeicons-checkmark-circle-02' },
-  { title: 'Error Rate', value: '0%', detail: '4xx and 5xx responses', icon: 'i-hugeicons-alert-02' },
-])
-
-const recentActivity = state([])
-
-const systemHealth = state([])
-
-function getStatusDotClass(status) {
-  if (status === 'healthy') return 'bg-green-500'
-  if (status === 'degraded') return 'bg-amber-500'
-  if (status === 'critical') return 'bg-red-500'
-  return 'bg-gray-500'
-}
-
-function getActivityStatusClass(status) {
-  if (status === 'success') return 'text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30'
-  if (status === 'error') return 'text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30'
-  if (status === 'warning') return 'text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/30'
-  return 'text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30'
-}
-
-function getActivityIconClass(status) {
-  if (status === 'success') return 'i-hugeicons-checkmark-circle-02 h-4 w-4'
-  if (status === 'error') return 'i-hugeicons-alert-02 h-4 w-4'
-  if (status === 'warning') return 'i-hugeicons-alert-circle h-4 w-4'
-  return 'i-hugeicons-information-circle h-4 w-4'
-}
-
-async function loadDashboard() {
-  try {
-    const response = await fetch('/api/dashboard/home', { headers: { accept: 'application/json' } })
-    if (!response.ok) return
-
-    const data = await response.json()
-    if (Array.isArray(data.stats)) {
-      const iconFor = label => ({
-        'Total Users': 'i-hugeicons-user-group',
-        'Products': 'i-hugeicons-package',
-        'Revenue': 'i-hugeicons-money-03',
-        'Orders': 'i-hugeicons-shopping-cart-02',
-      })[label] || 'i-hugeicons-chart-up'
-      stats.set(data.stats.map(stat => ({
-        title: stat.label,
-        value: stat.value,
-        trend: 0,
-        trendLabel: 'Current total',
-        icon: iconFor(stat.label),
-      })))
-    }
-    if (Array.isArray(data.httpMetrics)) httpMetrics.set(data.httpMetrics)
-    if (Array.isArray(data.services)) {
-      systemHealth.set(data.services.map(service => ({ ...service, uptime: service.uptime || 'Current' })))
-    }
-    if (Array.isArray(data.activities)) {
-      recentActivity.set(data.activities.map(activity => ({
-        type: activity.type,
-        title: activity.message,
-        time: activity.time,
-        status: 'success',
-      })))
-    }
-  }
-  catch {
-    // Keep the useful empty state while a fresh database is being created.
-  }
-}
-
-onMount(loadDashboard)
-</script>
-
-<div class="mx-auto p-6 max-w-7xl">
-  <!-- Header -->
-  <PageHeader title="Dashboard" description="Welcome back! Here's an overview of your system." />
-
-  <!-- Stats Grid -->
-  <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mb-8">
-    <template :for="stat in stats">
-      <div class="p-5 bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="font-medium text-neutral-500 text-sm dark:text-neutral-400">{{ stat.title }}</p>
-            <p class="mt-1 font-semibold text-2xl text-neutral-900 dark:text-white">{{ stat.value }}</p>
-            <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ stat.trendLabel }}</p>
-          </div>
-          <div class="flex-shrink-0 p-3 bg-neutral-100 dark:bg-neutral-700 rounded-xl">
-            <div :class="stat.icon" class="h-6 w-6 text-neutral-500 dark:text-neutral-400"></div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
-
-  <div class="mb-8">
-    <div class="flex items-end justify-between mb-4">
-      <div>
-        <h2 class="font-semibold text-base text-neutral-900 dark:text-white">HTTP performance</h2>
-        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Live metrics from captured application requests.</p>
-      </div>
-      <StxLink to="/requests" class="text-neutral-500 text-sm hover:text-neutral-700 dark:hover:text-neutral-300">Request history</StxLink>
-    </div>
-    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-      <template :for="metric in httpMetrics">
-        <div class="p-5 bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700">
-          <div class="flex gap-4 items-start justify-between">
-            <div>
-              <p class="font-medium text-neutral-500 text-sm dark:text-neutral-400">{{ metric.title }}</p>
-              <p class="mt-1 font-semibold text-2xl text-neutral-900 dark:text-white">{{ metric.value }}</p>
-              <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ metric.detail }}</p>
-            </div>
-            <div class="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
-              <div :class="metric.icon" class="h-5 w-5 text-blue-600 dark:text-blue-400"></div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-
-  <!-- Quick Links -->
-  <div class="mb-8">
-    <h2 class="mb-4 font-semibold text-base text-neutral-900 dark:text-white">Quick Links</h2>
-    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-      <a href="/content/dashboard" data-stx-link class="block p-5 no-underline bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 hover:shadow-md transition-shadow">
-        <div class="flex gap-4 items-center">
-          <div class="flex-shrink-0 p-3 bg-blue-500 rounded-xl">
-            <div class="h-5 w-5 text-white i-hugeicons-book-open-01"></div>
-          </div>
-          <div class="flex-1 min-w-0">
-            <p class="font-medium text-neutral-900 text-sm dark:text-white">Blog</p>
-            <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Manage your blog posts</p>
-          </div>
-        </div>
-      </a>
-      <a href="/commerce/dashboard" data-stx-link class="block p-5 no-underline bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 hover:shadow-md transition-shadow">
-        <div class="flex gap-4 items-center">
-          <div class="flex-shrink-0 p-3 bg-green-500 rounded-xl">
-            <div class="h-5 w-5 text-white i-hugeicons-store-01"></div>
-          </div>
-          <div class="flex-1 min-w-0">
-            <p class="font-medium text-neutral-900 text-sm dark:text-white">Commerce</p>
-            <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">View orders and products</p>
-          </div>
-        </div>
-      </a>
-      <a href="/cloud" data-stx-link class="block p-5 no-underline bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 hover:shadow-md transition-shadow">
-        <div class="flex gap-4 items-center">
-          <div class="flex-shrink-0 p-3 bg-purple-500 rounded-xl">
-            <div class="h-5 w-5 text-white i-hugeicons-cloud"></div>
-          </div>
-          <div class="flex-1 min-w-0">
-            <p class="font-medium text-neutral-900 text-sm dark:text-white">Cloud</p>
-            <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Monitor infrastructure</p>
-          </div>
-        </div>
-      </a>
-      <a href="/settings" data-stx-link class="block p-5 no-underline bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 hover:shadow-md transition-shadow">
-        <div class="flex gap-4 items-center">
-          <div class="flex-shrink-0 p-3 bg-neutral-500 rounded-xl">
-            <div class="h-5 w-5 text-white i-hugeicons-settings-02"></div>
-          </div>
-          <div class="flex-1 min-w-0">
-            <p class="font-medium text-neutral-900 text-sm dark:text-white">Settings</p>
-            <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Configure your app</p>
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-
-  <!-- System Health + Recent Activity -->
-  <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">
-    <!-- System Health -->
-    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <div class="flex items-center justify-between p-5 border-b border-neutral-200 dark:border-neutral-700">
-        <h3 class="font-semibold text-base text-neutral-900 dark:text-white">System Health</h3>
-        <StxLink to="/health" class="text-neutral-500 text-sm hover:text-neutral-700 dark:hover:text-neutral-300">View all</StxLink>
-      </div>
-      <div class="divide-neutral-100 divide-y dark:divide-neutral-700">
-        <template :for="service in systemHealth">
-          <div class="flex items-center justify-between px-5 py-3.5">
-            <div class="flex gap-3 items-center">
-              <span :class="getStatusDotClass(service.status)" class="h-2.5 w-2.5 rounded-full"></span>
-              <span class="font-medium text-neutral-700 text-sm dark:text-neutral-200">{{ service.name }}</span>
-            </div>
-            <div class="flex gap-4 items-center">
-              <span class="text-neutral-500 text-sm dark:text-neutral-400">{{ service.latency }}</span>
-              <span class="text-neutral-500 text-sm dark:text-neutral-400">{{ service.uptime }}</span>
-              <span class="px-2 py-0.5 font-medium text-green-700 text-xs dark:text-green-400 bg-green-100 dark:bg-green-900/30 rounded-full">{{ service.status }}</span>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <!-- Recent Activity -->
-    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <div class="flex items-center justify-between p-5 border-b border-neutral-200 dark:border-neutral-700">
-        <h3 class="font-semibold text-base text-neutral-900 dark:text-white">Recent Activity</h3>
-        <StxLink to="/data/activity" class="text-neutral-500 text-sm hover:text-neutral-700 dark:hover:text-neutral-300">View all</StxLink>
-      </div>
-      <div class="divide-neutral-100 divide-y dark:divide-neutral-700">
-        <template :for="activity in recentActivity">
-          <div class="flex gap-4 items-center px-5 py-3.5">
-            <div :class="getActivityStatusClass(activity.status)" class="flex-shrink-0 p-2 rounded-lg">
-              <div :class="getActivityIconClass(activity.status)"></div>
-            </div>
-            <div class="flex-1 min-w-0">
-              <p class="font-medium text-neutral-900 text-sm truncate dark:text-white">{{ activity.title }}</p>
-              <p class="text-neutral-500 text-xs dark:text-neutral-400">{{ activity.time }}</p>
-            </div>
-          </div>
-        </template>
-        <div :show="recentActivity().length === 0" class="flex flex-col items-center justify-center px-5 py-12 text-center">
-          <div class="h-8 w-8 text-neutral-300 dark:text-neutral-600 i-hugeicons-activity-03"></div>
-          <p class="mt-3 text-neutral-500 text-sm dark:text-neutral-400">No recent activity yet</p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Resources -->
-  <div class="grid gap-4 grid-cols-1 sm:grid-cols-3 mt-8">
-    <a href="https://docs.stacksjs.org" target="_blank" class="p-5 bg-blue-50 dark:bg-blue-900/20 rounded-xl hover:shadow-md transition-shadow">
-      <h4 class="font-semibold text-blue-900 text-sm dark:text-blue-200">Documentation</h4>
-      <p class="mt-1 text-blue-700 text-xs dark:text-blue-300">Guides and API references</p>
-    </a>
-    <a href="https://stacksjs.com/discord" target="_blank" class="p-5 bg-purple-50 dark:bg-purple-900/20 rounded-xl hover:shadow-md transition-shadow">
-      <h4 class="font-semibold text-purple-900 text-sm dark:text-purple-200">Community</h4>
-      <p class="mt-1 text-purple-700 text-xs dark:text-purple-300">Join our Discord</p>
-    </a>
-    <a href="https://github.com/stacksjs/stacks" target="_blank" class="p-5 bg-green-50 dark:bg-green-900/20 rounded-xl hover:shadow-md transition-shadow">
-      <h4 class="font-semibold text-green-900 text-sm dark:text-green-200">GitHub</h4>
-      <p class="mt-1 text-green-700 text-xs dark:text-green-300">Star us on GitHub</p>
-    </a>
-  </div>
-</div>
+@title('Dashboard')
+<DashboardHome />
 @endsection