@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/inbox/settings.stx

@@ -0,0 +1,290 @@
+@extends('layouts/default')
+
+@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>
+
+@endsection

package/views/dashboard/index.stx

@@ -0,0 +1,252 @@
+@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>
+@endsection