@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/functions/index.stx

@@ -0,0 +1,159 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+
+interface FunctionRow {
+  name: string
+  size: string
+  path: string
+  updatedAt: string
+  createdAt: string
+  status: 'active' | 'draft' | 'archived'
+}
+
+// Placeholder data — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). Wire this up to whatever lists
+// `./resources/functions/*` once the framework exposes a directory
+// walker — the table renders against
+// `name/size/path/updatedAt/createdAt/status` so the swap is a one-line
+// replacement of `functions = …`.
+const functions: FunctionRow[] = [
+  { name: 'sendInvoice', size: '5.2 kB', path: './resources/functions/send-invoice.ts', updatedAt: '2026-04-19 09:04', createdAt: '2025-11-03 08:23', status: 'active' },
+  { name: 'syncCustomer', size: '3.8 kB', path: './resources/functions/sync-customer.ts', updatedAt: '2026-04-12 14:11', createdAt: '2025-12-01 11:45', status: 'active' },
+  { name: 'cleanupSessions', size: '2.1 kB', path: './resources/functions/cleanup-sessions.ts', updatedAt: '2026-03-30 22:08', createdAt: '2026-01-14 09:02', status: 'active' },
+  { name: 'reportDigest', size: '6.4 kB', path: './resources/functions/report-digest.ts', updatedAt: '2026-04-22 07:55', createdAt: '2026-02-09 13:31', status: 'draft' },
+]
+
+const totalCount = functions.length
+const activeCount = functions.filter(f => f.status === 'active').length
+const draftCount = functions.filter(f => f.status === 'draft').length
+
+function statusVariant(status: string) {
+  if (status === 'active') return 'success'
+  if (status === 'draft') return 'warning'
+  if (status === 'archived') return 'default'
+  return 'default'
+}
+</script>
+
+<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-6xl">
+
+  <PageHeader
+    title="Functions"
+    description="Serverless functions defined in resources/functions"
+  >
+    <template #actions>
+      <Button variant="primary" size="md">Create function</Button>
+    </template>
+  </PageHeader>
+
+  <!-- Stats -->
+  <div class="grid gap-3 grid-cols-3">
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-blue-600 dark:text-blue-400 bg-blue-500/10 dark:bg-blue-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Total</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ totalCount }}</p>
+        </div>
+      </div>
+    </Card>
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-green-600 dark:text-green-400 bg-green-500/10 dark:bg-green-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Active</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ activeCount }}</p>
+        </div>
+      </div>
+    </Card>
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-amber-600 dark:text-amber-400 bg-amber-500/10 dark:bg-amber-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Draft</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ draftCount }}</p>
+        </div>
+      </div>
+    </Card>
+  </div>
+
+  <!-- Functions table -->
+  <Card variant="default" padding="none">
+    <div class="flex items-baseline justify-between px-5 py-4 border-b border-neutral-200/60 dark:border-white/5">
+      <div>
+        <h3 class="font-semibold text-base text-neutral-900 dark:text-white">All functions</h3>
+        <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">
+          {{ totalCount }} {{ totalCount === 1 ? 'function' : 'functions' }} loaded from <code class="px-1 py-0.5 font-mono text-[11px] bg-black/5 dark:bg-white/10 rounded">resources/functions</code>
+        </p>
+      </div>
+    </div>
+
+    @if(functions.length === 0)
+      <div class="p-8">
+        <EmptyState
+          title="No functions yet"
+          description="Create your first function in resources/functions/."
+        />
+      </div>
+    @else
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-neutral-200/60 divide-y dark:divide-white/5">
+          <thead class="bg-neutral-50/60 dark:bg-white/[0.02]">
+            <tr>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Name</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Path</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Size</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Status</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Updated</th>
+              <th class="px-5 py-2.5 text-right">
+                <span class="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-neutral-200/60 divide-y dark:divide-white/5">
+            <template :for="fn in functions">
+              <tr class="hover:bg-neutral-50/60 dark:hover:bg-white/[0.02] transition-colors">
+                <td class="px-5 py-3 font-medium text-neutral-900 text-sm whitespace-nowrap dark:text-white">
+                  {{ fn.name }}
+                </td>
+                <td class="px-5 py-3 font-mono text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400">
+                  {{ fn.path }}
+                </td>
+                <td class="px-5 py-3 font-mono text-neutral-600 text-xs whitespace-nowrap dark:text-neutral-300">
+                  {{ fn.size }}
+                </td>
+                <td class="px-5 py-3 whitespace-nowrap">
+                  <Badge :variant="statusVariant(fn.status)" size="sm">{{ fn.status }}</Badge>
+                </td>
+                <td class="px-5 py-3 text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400">
+                  {{ fn.updatedAt }}
+                </td>
+                <td class="px-5 py-3 text-right whitespace-nowrap">
+                  <a href="#" class="text-blue-600 text-sm dark:text-blue-400 hover:underline">
+                    Edit
+                  </a>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    @endif
+  </Card>
+
+</div>
+@endsection

package/views/dashboard/health/index.stx

@@ -0,0 +1,248 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+
+// Health checks demo data — moved out of the former `<script server>`
+// block (stacksjs/stacks#1838).
+interface Metric {
+  label: string
+  value: string
+}
+
+interface HealthCheck {
+  name: string
+  status: 'success' | 'info' | 'warning' | 'danger'
+  description: string
+  /** Inline SVG path data — `d=""` content for a 24x24 stroke icon. */
+  iconPath: string
+  metrics: Metric[]
+}
+
+// Placeholder data — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). Wire this to a real health endpoint once the
+// dashboard exposes one (e.g. `GET /api/dashboard/health`). The
+// `iconPath` strings are inline SVG `d` attributes — we render them
+// with a single shared <svg> wrapper so the icon system doesn't
+// depend on a CSS engine.
+const checks: HealthCheck[] = [
+  {
+    name: 'Uptime',
+    status: 'success',
+    description: 'Your site is up. Last checked less than a minute ago.',
+    iconPath: 'M13 10V3L4 14h7v7l9-11h-7z',
+    metrics: [
+      { label: 'Past 7 days', value: '100%' },
+      { label: 'Past 14 days', value: '100%' },
+      { label: 'Past 30 days', value: '100%' },
+    ],
+  },
+  {
+    name: 'Performance',
+    status: 'success',
+    description: 'Your site is fast. Last checked 3 minutes ago.',
+    iconPath: 'M13 10V3L4 14h7v7l9-11h-7z',
+    metrics: [
+      { label: 'Response time', value: '235ms' },
+      { label: 'Success rate', value: '99.95%' },
+    ],
+  },
+  {
+    name: 'Certificate health',
+    status: 'success',
+    description: 'TLS certificate is healthy. Last checked 3 minutes ago.',
+    iconPath: 'M9 12l2 2 4-4M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z',
+    metrics: [
+      { label: 'Expires in', value: '274 days' },
+      { label: 'Last renewal', value: '2 months ago' },
+    ],
+  },
+  {
+    name: 'Broken links',
+    status: 'success',
+    description: 'No broken links found across crawled pages.',
+    iconPath: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
+    metrics: [
+      { label: 'Broken links', value: '0' },
+      { label: 'URLs crawled', value: '583' },
+    ],
+  },
+  {
+    name: 'Mixed content',
+    status: 'success',
+    description: 'No mixed content found. Last checked an hour ago.',
+    iconPath: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
+    metrics: [
+      { label: 'Mixed content', value: '0' },
+      { label: 'URLs crawled', value: '583' },
+    ],
+  },
+  {
+    name: 'Certificate transparency',
+    status: 'info',
+    description: 'CT log entry verified. Last checked less than a minute ago.',
+    iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+    metrics: [
+      { label: 'Last check', value: '< 1 min ago' },
+      { label: 'Status', value: 'Verified' },
+    ],
+  },
+  {
+    name: 'Application health',
+    status: 'success',
+    description: 'All application checks passing. Last checked 10 minutes ago.',
+    iconPath: 'M5 13l4 4L19 7',
+    metrics: [
+      { label: 'Total checks', value: '2' },
+      { label: 'Failed', value: '0' },
+      { label: 'Last check', value: '10 min ago' },
+    ],
+  },
+  {
+    name: 'DNS',
+    status: 'success',
+    description: 'DNS records resolved cleanly. Last checked an hour ago.',
+    iconPath: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    metrics: [
+      { label: 'Records', value: '18' },
+      { label: 'URLs crawled', value: '20' },
+    ],
+  },
+]
+
+const passingCount = checks.filter(c => c.status === 'success').length
+const totalCount = checks.length
+const overallStatus: 'success' | 'warning' | 'danger' =
+  checks.some(c => c.status === 'danger')
+    ? 'danger'
+    : checks.some(c => c.status === 'warning')
+      ? 'warning'
+      : 'success'
+
+const statusIconBg = {
+  success: 'bg-green-500/10 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+  info: 'bg-blue-500/10 text-blue-600 dark:bg-blue-400/15 dark:text-blue-400',
+  warning: 'bg-orange-500/10 text-orange-600 dark:bg-orange-400/15 dark:text-orange-400',
+  danger: 'bg-red-500/10 text-red-600 dark:bg-red-400/15 dark:text-red-400',
+}
+
+const statusBadgeVariant = {
+  success: 'success',
+  info: 'primary',
+  warning: 'warning',
+  danger: 'danger',
+}
+
+// Pluralize the metrics-grid columns based on count. Done here in JS
+// because STX templates do not accept array values in `:class`
+// binding (`class="{{ a }} {{ cond ? b : c }}"`); a precomputed string is
+// simpler than threading conditional classes through the template.
+function metricsGridCols(count: number) {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'grid-cols-2'
+  return 'grid-cols-3'
+}
+</script>
+
+<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-6xl">
+
+  <PageHeader title="Health" description="System uptime, performance, and certificate checks">
+    <template #actions>
+      <Badge :variant="statusBadgeVariant[overallStatus]" size="md">
+        {{ overallStatus === 'success' ? 'All systems normal' : overallStatus === 'warning' ? 'Degraded' : 'Critical' }}
+      </Badge>
+    </template>
+  </PageHeader>
+
+  <!-- Overview stats -->
+  <div class="grid gap-4 grid-cols-2 lg:grid-cols-4">
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-green-600 dark:text-green-400 bg-green-500/10 dark:bg-green-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Uptime</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">100%</p>
+        </div>
+      </div>
+    </Card>
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-blue-600 dark:text-blue-400 bg-blue-500/10 dark:bg-blue-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Health checks</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ passingCount }}/{{ totalCount }}</p>
+        </div>
+      </div>
+    </Card>
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-purple-600 dark:text-purple-400 bg-purple-500/10 dark:bg-purple-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">URLs monitored</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">583</p>
+        </div>
+      </div>
+    </Card>
+    <Card variant="default" padding="md">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-cyan-600 dark:text-cyan-400 bg-cyan-500/10 dark:bg-cyan-400/15 rounded-lg">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">DNS records</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">18</p>
+        </div>
+      </div>
+    </Card>
+  </div>
+
+  <!-- Detailed checks -->
+  <div class="grid gap-4 grid-cols-1 lg:grid-cols-2">
+    <template :for="check in checks">
+      <Card variant="default" padding="md" hoverable>
+        <div class="flex gap-4 items-start">
+          <div :class="statusIconBg[check.status]" class="flex flex-shrink-0 items-center justify-center h-10 w-10 rounded-lg">
+            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" :d="check.iconPath"/>
+            </svg>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex gap-2 items-center justify-between">
+              <h3 class="font-medium text-[14px] text-neutral-900 truncate dark:text-white">{{ check.name }}</h3>
+              <Badge :variant="statusBadgeVariant[check.status]" size="sm">{{ check.status }}</Badge>
+            </div>
+            <p class="mt-1 line-clamp-2 text-[12px] text-neutral-500 dark:text-neutral-400">
+              {{ check.description }}
+            </p>
+
+            <dl :class="'grid gap-2 mt-4 ' + metricsGridCols(check.metrics.length)">
+              <template :for="m in check.metrics">
+                <div class="overflow-hidden px-3 py-2 bg-black/[0.03] dark:bg-white/[0.05] rounded-lg">
+                  <dt class="font-medium text-[11px] text-neutral-500 truncate dark:text-neutral-400">{{ m.label }}</dt>
+                  <dd class="mt-0.5 font-semibold text-[14px] text-neutral-900 tracking-tight dark:text-white">{{ m.value }}</dd>
+                </div>
+              </template>
+            </dl>
+          </div>
+        </div>
+      </Card>
+    </template>
+  </div>
+</div>
+
+@endsection