@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/[...all].stx

@@ -0,0 +1,89 @@
+@extends('layouts/default')
+
+@section('content')
+{{-- Catch-all 404. Inlined instead of using <PageLayout> because the
+    filename's route-param `...all` leaks into component prop scopes
+    and stx's @if evaluator parses it as a rest parameter, breaking
+    every @if in components that consume it. --}}
+<div class="flex items-center justify-center pb-12 pt-6 px-6 min-h-[80vh]">
+  <div class="mx-auto space-y-6 max-w-7xl w-full">
+  <div class="text-center">
+    <div class="flex justify-center">
+      <div class="mb-6 h-24 w-24 text-gray-400 dark:text-neutral-500 i-hugeicons-alert-circle"></div>
+    </div>
+    <h1 class="font-bold font-mono text-5xl text-gray-900 dark:text-white">404</h1>
+    <p class="mt-2 font-mono font-semibold text-3xl text-gray-900 tracking-tight sm:text-4xl dark:text-white">Page not found</p>
+    <p class="mt-4 mx-auto max-w-md text-base text-gray-500 dark:text-neutral-400">
+      Sorry, we couldn't find the page you're looking for. The page might have been moved or deleted.
+    </p>
+    <div class="flex gap-x-6 items-center justify-center mt-10">
+      <StxLink to="/dashboard" class="px-3.5 py-2.5 font-semibold text-sm text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+        Return to dashboard
+      </StxLink>
+      <StxLink to="/" class="font-semibold text-gray-900 text-sm dark:text-white hover:text-blue-600 dark:hover:text-blue-400">
+        Go to home <span aria-hidden="true">&rarr;</span>
+      </StxLink>
+    </div>
+  </div>
+
+  <!-- Suggestions -->
+  <div>
+    <h2 class="font-semibold leading-6 text-base text-center text-gray-900 dark:text-white">You might be looking for</h2>
+    <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6">
+            <StxLink to="/dashboard" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow hover:shadow-md duration-200 transition-shadow">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0 p-3 bg-blue-500 rounded-md">
+                    <div class="h-6 w-6 text-white i-hugeicons-home-02"></div>
+                  </div>
+                  <div class="flex-1 ml-5 w-0">
+                    <dl>
+                      <dt class="font-medium text-gray-900 text-sm truncate dark:text-white">Dashboard</dt>
+                      <dd class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                        Return to the main dashboard
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </StxLink>
+            <StxLink to="/content/dashboard" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow hover:shadow-md duration-200 transition-shadow">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0 p-3 bg-green-500 rounded-md">
+                    <div class="h-6 w-6 text-white i-hugeicons-document-validation"></div>
+                  </div>
+                  <div class="flex-1 ml-5 w-0">
+                    <dl>
+                      <dt class="font-medium text-gray-900 text-sm truncate dark:text-white">Blog</dt>
+                      <dd class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                        Manage your blog posts and categories
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </StxLink>
+            <StxLink to="/settings" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow hover:shadow-md duration-200 transition-shadow">
+              <div class="p-5">
+                <div class="flex items-center">
+                  <div class="flex-shrink-0 p-3 bg-gray-500 rounded-md">
+                    <div class="h-6 w-6 text-white i-hugeicons-settings-01"></div>
+                  </div>
+                  <div class="flex-1 ml-5 w-0">
+                    <dl>
+                      <dt class="font-medium text-gray-900 text-sm truncate dark:text-white">Settings</dt>
+                      <dd class="mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                        Configure your application settings
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </StxLink>
+    </div>
+  </div>
+  </div>
+</div>
+
+@endsection

package/views/dashboard/access-tokens/index.stx

@@ -0,0 +1,177 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+// Demo token list — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). Replace with a real fetch from the personal
+// access tokens API when wired up.
+const tokens = [
+  {
+    name: 'Mobile App Token',
+    token: '2|LlNSaUVFmBXoD6OYH5ZxNlxsFxHh4QqGxspKGKdt',
+    abilities: ['read', 'write'],
+    lastUsed: '2 minutes ago',
+    status: 'active',
+    createdAt: '2024-01-15 08:23:15',
+    expiresAt: '2024-02-14 08:23:15',
+  },
+  {
+    name: 'Dashboard API',
+    token: '3|KkMRbTEElBWnC5NXG4YwMkwrEwGg3PpFwroJFJcs',
+    abilities: ['read'],
+    lastUsed: '1 hour ago',
+    status: 'active',
+    createdAt: '2024-01-10 15:45:30',
+    expiresAt: '2024-01-24 15:45:30',
+  },
+  {
+    name: 'Integration Service',
+    token: '4|JjLQaSsDDkVmB4MWF3XvLjvrDvFf2OoEvqnIEIbr',
+    abilities: ['read', 'write', 'delete'],
+    lastUsed: '3 days ago',
+    status: 'revoked',
+    createdAt: '2023-12-20 11:30:00',
+    expiresAt: '2024-01-19 11:30:00',
+  },
+]
+</script>
+
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Access Tokens" description="Manage your API access tokens for authentication">
+    <template #actions>
+      <Button variant="primary">
+        Generate New Token
+      </Button>
+    </template>
+  </PageHeader>
+
+  <div class="mb-8">
+    <div>
+      <h3 class="font-semibold leading-6 text-base text-gray-900">
+        Token Statistics
+      </h3>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-key" />
+            </div>
+
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate">
+              Active Tokens
+            </p>
+          </dt>
+
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900">
+              {{ tokens.filter(t => t.status === 'active').length }}
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div class="pt-6">
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+            <table class="min-w-full divide-gray-300 divide-y">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">
+                    Name
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Last Used
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Abilities
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                    Status
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right">
+                    Created At
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right">
+                    Expires At
+                  </th>
+
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                    <span class="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y">
+                <template :for="token in tokens">
+                  <tr>
+                    <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">
+                      {{ token.name }}
+                    </td>
+
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                      {{ token.lastUsed }}
+                    </td>
+
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                      <div class="flex gap-1">
+                        <template :for="ability in token.abilities">
+                          <span
+                            class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs bg-blue-50 ring-1 ring-blue-600/20 ring-inset rounded-md"
+                          >
+                            {{ ability }}
+                          </span>
+                        </template>
+                      </div>
+                    </td>
+
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                      <span
+                        class="inline-flex items-center px-2 py-1 font-medium text-green-700 text-red-700 text-xs ring-1 ring-green-600/20' ring-inset ring-red-600/20' rounded-md : ? 'active' 'bg-green-50 'bg-red-50 {{ }} === token.status"
+                      >
+                        {{ token.status }}
+                      </span>
+                    </td>
+
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">
+                      {{ token.createdAt }}
+                    </td>
+
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">
+                      {{ token.expiresAt }}
+                    </td>
+
+                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                      <button
+                        class="mr-4 text-blue-600 hover:text-blue-900"
+                        disabled="{{ token.status === 'revoked' }}"
+                      >
+                        {{ token.status === 'active' ? 'Revoke' : 'Revoked' }}
+                      </button>
+                      <button class="text-gray-600 hover:text-gray-900">
+                        Copy
+                      </button>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@endsection

package/views/dashboard/actions/index.stx

@@ -0,0 +1,129 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="mb-8 px-4 sm:px-6 lg:px-8">
+    <div>
+      <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">
+        Last 30 days
+      </h3>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-energy" />
+            </div>
+
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">
+              Total Actions
+            </p>
+          </dt>
+
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">
+              71,897
+            </p>
+
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only"> Increased by </span>
+              122
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div class="pt-12 px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">
+          Actions
+        </h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">
+          A list of all the Actions.
+        </p>
+      </div>
+
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+          Create Action
+        </button>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg dark:ring-neutral-600 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">
+                    Name
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">
+                    Path
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">
+                    Status
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right dark:text-neutral-100">
+                    Created At
+                  </th>
+
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm sm:text-right dark:text-neutral-100">
+                    Updated At
+                  </th>
+
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                    <span class="sr-only">Edit</span>
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">
+                    SendWelcomeEmail
+                  </td>
+
+                  <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                    ./app/Actions/Example.ts
+                  </td>
+
+                  <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="inline-flex items-center px-2 py-1 font-medium text-green-700 text-xs dark:text-green-400 bg-green-50 dark:bg-green-900/20 ring-1 ring-green-600/20 ring-inset rounded-md dark:ring-green-500/20">
+                      Enabled
+                    </span>
+                  </td>
+
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    01-03-2023 08:23:15
+                  </td>
+
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                    04-19-2022 09:04:20
+                  </td>
+
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">Open<span class="sr-only">, Action in IDE</span></a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@endsection