@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/models/[model].stx

@@ -0,0 +1,195 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+// Dynamic model page (stacksjs/stacks#1838). Previously a 136-line
+// `<script server>` block doing ORM lookup + raw-SQLite fallback at
+// render time; now backed by
+// `GET /api/dashboard/models/{slug}` (Action:
+// `Dashboard/Models/ModelShowAction`) which returns the same shape.
+//
+// The URL slug is pulled with `useNavigation().urlSegment(-1)` instead
+// of `route.params.model` (which only existed inside the old server
+// block).
+import { useNavigation } from '../composables/useNavigation'
+
+interface ResponseShape {
+  modelName: string
+  tableName: string
+  rows: Array<Record<string, unknown>>
+  columns: string[]
+  displayColumns: string[]
+  totalCount: number
+  source: 'orm' | 'sqlite-fallback'
+  error: string | null
+}
+
+const modelName = state('')
+const tableName = state('')
+const rows = state<Array<Record<string, unknown>>>([])
+const displayColumns = state<string[]>([])
+const totalCount = state(0)
+const source = state<'orm' | 'sqlite-fallback'>('orm')
+const error = state<string | null>(null)
+const loading = state(true)
+
+const sourceLabel = derived(() => {
+  return source() === 'orm' ? 'via Stacks ORM' : 'raw SQLite (no model file)'
+})
+
+const recordCountLabel = derived(() => {
+  return totalCount() + ' record' + (totalCount() === 1 ? '' : 's')
+})
+
+function formatDate(value: unknown): string {
+  if (!value) return '-'
+  try {
+    const date = new Date(value as string | number)
+    if (Number.isNaN(date.getTime())) return String(value)
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+  }
+  catch {
+    return String(value)
+  }
+}
+
+function formatCell(value: unknown, column: string): string {
+  if (value === null || value === undefined) return '-'
+  if (column === 'created_at' || column === 'updated_at' || column.endsWith('_at')) return formatDate(value)
+  if (typeof value === 'object') {
+    try { return JSON.stringify(value).slice(0, 80) }
+    catch { return '[object]' }
+  }
+  if (typeof value === 'string' && value.length > 100) return value.slice(0, 100) + '…'
+  return String(value)
+}
+
+function cellValue(row: Record<string, unknown>, col: string): string {
+  return formatCell(row[col], col)
+}
+
+async function load() {
+  loading.set(true)
+  error.set(null)
+  const slug = useNavigation().urlSegment(-1)
+  if (!slug) {
+    error.set('Missing model slug in URL.')
+    loading.set(false)
+    return
+  }
+  try {
+    const res = await fetch(`/api/dashboard/models/${encodeURIComponent(slug)}`, {
+      headers: { accept: 'application/json' },
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json() as Partial<ResponseShape>
+    modelName.set(data.modelName ?? '')
+    tableName.set(data.tableName ?? '')
+    rows.set(data.rows ?? [])
+    displayColumns.set(data.displayColumns ?? [])
+    totalCount.set(data.totalCount ?? 0)
+    source.set(data.source ?? 'orm')
+    error.set(data.error ?? null)
+  }
+  catch (e) {
+    error.set(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+void load()
+</script>
+
+<div class="p-6 space-y-6">
+
+  <PageHeader :title="modelName()" :description="recordCountLabel() + ' · ' + sourceLabel()">
+    <template #actions>
+      <Button variant="primary">
+        <div class="h-4 w-4 i-hugeicons-add-01"></div>
+        New <span :text="modelName()"></span>
+      </Button>
+    </template>
+  </PageHeader>
+
+  <div :if="error()" class="p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-xl dark:border-red-800">
+    <div class="flex gap-3 items-start">
+      <span class="flex-shrink-0 mt-0.5 h-5 w-5 text-red-500 i-hugeicons-alert-02"></span>
+      <div>
+        <h3 class="font-medium text-red-800 dark:text-red-200">Couldn't load <span :text="modelName()"></span></h3>
+        <p class="mt-1 text-red-600 text-sm dark:text-red-300" :text="error()"></p>
+        <p class="mt-2 text-red-500 text-xs dark:text-red-400">
+          Looked for an ORM model named <code :text="modelName()"></code> and a SQLite table named <code :text="tableName()"></code>.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div :if="!error() && !loading() && rows().length === 0" class="p-12 text-center bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+    <span class="mx-auto h-12 w-12 text-neutral-300 dark:text-neutral-600 i-hugeicons-database-01"></span>
+    <h3 class="mt-4 font-medium text-lg text-neutral-900 dark:text-white">No <span :text="modelName()"></span> records</h3>
+    <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">Get started by creating a new <span :text="modelName()"></span>.</p>
+  </div>
+
+  <div :if="!error() && rows().length > 0" class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-800">
+        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
+          <tr>
+            <template :for="column in displayColumns">
+              <th class="px-4 py-3 font-medium text-left text-neutral-500 text-xs tracking-wider uppercase whitespace-nowrap dark:text-neutral-400">
+                {{ column.replace(/_/g, ' ') }}
+              </th>
+            </template>
+            <th class="px-4 py-3 font-medium text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
+          <template :for="row in rows">
+            <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
+              <template :for="column in displayColumns">
+                <td class="px-4 py-3 max-w-xs text-neutral-900 text-sm truncate whitespace-nowrap dark:text-neutral-100">
+                  {{ cellValue(row, column) }}
+                </td>
+              </template>
+              <td class="px-4 py-3 text-right">
+                <div class="flex gap-2 items-center justify-end">
+                  <button class="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors" title="View">
+                    <span class="h-4 w-4 i-hugeicons-view"></span>
+                  </button>
+                  <button class="p-1.5 text-neutral-400 hover:text-blue-600 transition-colors" title="Edit">
+                    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
+                  </button>
+                  <button class="p-1.5 text-neutral-400 hover:text-red-600 transition-colors" title="Delete">
+                    <span class="h-4 w-4 i-hugeicons-delete-02"></span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="px-4 py-3 bg-neutral-50 dark:bg-neutral-800/30 border-neutral-200 border-t dark:border-neutral-800">
+      <div class="flex items-center justify-between">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">
+          Showing <span class="font-medium">{{ rows().length }}</span> of <span class="font-medium">{{ totalCount() }}</span>
+        </p>
+        <div class="flex gap-2 items-center">
+          <button class="px-3 py-1.5 font-medium text-neutral-600 text-sm dark:text-neutral-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600 disabled:opacity-50 transition-colors" disabled>
+            Previous
+          </button>
+          <button class="px-3 py-1.5 font-medium text-neutral-600 text-sm dark:text-neutral-300 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600 transition-colors">
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<style>
+.overflow-x-auto { -webkit-overflow-scrolling: touch; }
+</style>
+@endsection

package/views/dashboard/models/index.stx

@@ -0,0 +1,159 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+// Models overview (stacksjs/stacks#1838). Previously a 142-line
+// `<script server>` block that walked `app/Models/` + the framework
+// defaults tree, imported each model dynamically via `loadModel`, and
+// counted rows with `safeCount` — all inline at render time.
+//
+// Now backed by `GET /api/dashboard/models` (Action:
+// `Dashboard/Models/ModelsIndexAction`), which does the same work
+// server-side and returns grouped JSON. The page renders empty
+// counts on initial paint and populates after the fetch resolves.
+interface ModelRow {
+  name: string
+  table: string
+  href: string
+  count: number
+  category: string
+  source: 'userland' | 'framework'
+}
+
+interface ModelGroup {
+  key: string
+  label: string
+  models: ModelRow[]
+  countLabel: string
+}
+
+const totalModels = state(0)
+const totalRecords = state(0)
+const userlandCount = state(0)
+const categoryGroups = state<ModelGroup[]>([])
+const loading = state(true)
+const error = state<string | null>(null)
+
+async function loadModels() {
+  loading.set(true)
+  error.set(null)
+  try {
+    const res = await fetch('/api/dashboard/models', {
+      headers: { accept: 'application/json' },
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json() as {
+      totalModels?: number
+      totalRecords?: number
+      userlandCount?: number
+      categoryGroups?: ModelGroup[]
+    }
+    totalModels.set(data.totalModels ?? 0)
+    totalRecords.set(data.totalRecords ?? 0)
+    userlandCount.set(data.userlandCount ?? 0)
+    categoryGroups.set(data.categoryGroups ?? [])
+  }
+  catch (e) {
+    error.set(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+void loadModels()
+</script>
+
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Models" :description="totalModels() + ' models · ' + userlandCount() + ' userland · ' + totalRecords().toLocaleString() + ' total records'">
+    <template #actions>
+      <Button variant="primary">
+        <div class="h-4 w-4 i-hugeicons-add-01"></div>
+        New Model
+      </Button>
+    </template>
+  </PageHeader>
+
+  <div :if="error()" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950 border border-red-300 rounded-md dark:border-red-800">
+    <span :text="error()"></span>
+  </div>
+
+  <div class="grid gap-4 grid-cols-1 md:grid-cols-3">
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+      <div class="flex gap-4 items-center">
+        <div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
+          <span class="h-6 w-6 text-blue-600 dark:text-blue-400 i-hugeicons-database"></span>
+        </div>
+        <div>
+          <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Models</p>
+          <p class="font-semibold text-2xl text-neutral-900 dark:text-white">{{ totalModels() }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+      <div class="flex gap-4 items-center">
+        <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-lg">
+          <span class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-rows-01"></span>
+        </div>
+        <div>
+          <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Records</p>
+          <p class="font-semibold text-2xl text-neutral-900 dark:text-white">{{ totalRecords().toLocaleString() }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+      <div class="flex gap-4 items-center">
+        <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+          <span class="h-6 w-6 text-purple-600 dark:text-purple-400 i-hugeicons-folder-02"></span>
+        </div>
+        <div>
+          <p class="text-neutral-500 text-sm dark:text-neutral-400">Your Models</p>
+          <p class="font-semibold text-2xl text-neutral-900 dark:text-white">{{ userlandCount() }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <template :for="group in categoryGroups">
+    <div class="space-y-3">
+      <div class="flex items-baseline justify-between">
+        <h3 class="font-semibold text-base text-neutral-900 dark:text-white">{{ group.label }}</h3>
+        <span class="text-neutral-500 text-xs dark:text-neutral-400">{{ group.countLabel }}</span>
+      </div>
+      <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        <template :for="m in group.models">
+          <a
+            :href="m.href"
+            class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800 hover:border-blue-300 dark:hover:border-blue-700 hover:shadow-sm transition-all group"
+          >
+            <div class="flex items-start justify-between">
+              <div class="flex gap-3 items-center">
+                <div class="p-2 bg-neutral-100 dark:bg-neutral-800 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 rounded-lg transition-colors">
+                  <span class="h-5 w-5 text-neutral-500 dark:text-neutral-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 i-hugeicons-database-01"></span>
+                </div>
+                <div>
+                  <h3 class="font-medium text-neutral-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ m.name }}</h3>
+                  <p class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ m.table }}</p>
+                </div>
+              </div>
+              <span class="h-5 w-5 text-neutral-300 dark:text-neutral-600 group-hover:text-blue-500 transition-colors i-hugeicons-arrow-right-01"></span>
+            </div>
+            <div class="flex items-center justify-between mt-4 pt-4 text-sm border-neutral-100 border-t dark:border-neutral-800">
+              <span class="text-neutral-500 dark:text-neutral-400">Records</span>
+              <span class="font-medium text-neutral-900 dark:text-white">{{ m.count.toLocaleString() }}</span>
+            </div>
+          </a>
+        </template>
+      </div>
+    </div>
+  </template>
+
+  <div :if="!loading() && totalModels() === 0" class="p-12 text-center bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-800">
+    <span class="mx-auto h-12 w-12 text-neutral-300 dark:text-neutral-600 i-hugeicons-database-01"></span>
+    <h3 class="mt-4 font-medium text-lg text-neutral-900 dark:text-white">No models found</h3>
+    <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">Create your first model with <code>./buddy make:model</code> to get started.</p>
+  </div>
+</div>
+
+@endsection