@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/data/activity/index.stx

@@ -0,0 +1,261 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Activity Log')
+<div class="p-6 space-y-6">
+  <div class="flex items-center justify-between">
+    <PageHeader title="Activity Log" description="Audit trail of recent activity" />
+    <div class="flex gap-2 items-center">
+      <button @click="toggleAutoRefresh()" class="{{ autoRefreshButtonClass }}">
+        <div class="mr-2 h-4 w-4 i-hugeicons-refresh"></div>
+        {{ autoRefreshLabel }}
+      </button>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
+    <div class="relative max-w-sm">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+      </div>
+      <input x-model="searchTerm" type="text" class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600" placeholder="Search activity..." />
+    </div>
+    <select x-model="logNameFilter" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+      <option value="all">All Channels</option>
+      <template :for="ln in logNames">
+        <option :value="ln.id">{{ ln.name }}</option>
+      </template>
+    </select>
+    <select x-model="eventFilter" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+      <template :for="ev in eventTypes">
+        <option :value="ev">{{ ev === 'all' ? 'All Events' : ev.charAt(0).toUpperCase() + ev.slice(1) }}</option>
+      </template>
+    </select>
+  </div>
+
+  <div class="overflow-x-auto border border-gray-200 rounded-lg dark:border-neutral-700 shadow">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-700/50">
+        <tr>
+          <th class="px-4 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">When</th>
+          <th class="px-4 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Causer</th>
+          <th class="px-4 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Channel</th>
+          <th class="px-4 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Event</th>
+          <th class="px-4 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Description</th>
+          <th class="relative px-4 py-3.5"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="log in paginatedLogs">
+          <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700">
+            <td class="px-4 py-3 whitespace-nowrap"><div class="text-gray-500 text-xs dark:text-neutral-400">{{ formatDate(log.created_at) }}</div></td>
+            <td class="px-4 py-3 whitespace-nowrap">
+              <div class="flex gap-2 items-center">
+                <img :show="log.causer?.avatar" :src="log.causer?.avatar" alt="" class="h-6 w-6 rounded-full" />
+                <div class="font-medium text-gray-900 text-sm dark:text-white">{{ log.causer?.name ?? 'System' }}</div>
+              </div>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap"><span class="{{ logNameBadgeClass(log.log_name) }}">{{ log.log_name }}</span></td>
+            <td class="px-4 py-3 whitespace-nowrap"><span class="{{ eventBadgeClass(log.event) }}">{{ log.event }}</span></td>
+            <td class="px-4 py-3"><div class="max-w-md text-gray-700 text-sm dark:text-neutral-300">{{ log.description }}</div></td>
+            <td class="px-4 py-3 font-medium text-right text-sm whitespace-nowrap">
+              <button @click="openLog(log)" class="text-blue-600 hover:text-blue-500">View</button>
+            </td>
+          </tr>
+        </template>
+        <tr :show="paginatedLogs().length === 0">
+          <td colspan="6" class="px-4 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No activity found.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div :show="totalPages() > 1" class="flex items-center justify-between">
+    <p class="text-gray-700 text-sm dark:text-neutral-300">Page {{ currentPage }} of {{ totalPages }}</p>
+    <nav class="inline-flex -space-x-px rounded-md shadow-sm">
+      <button @click="prevPage()" :disabled="currentPage() === 1" class="inline-flex relative items-center px-2 py-2 text-gray-400 dark:text-neutral-500 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-600 disabled:opacity-50">
+        <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+      </button>
+      <button @click="nextPage()" :disabled="currentPage() === totalPages()" class="inline-flex relative items-center px-2 py-2 text-gray-400 dark:text-neutral-500 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-r-md dark:ring-neutral-600 disabled:opacity-50">
+        <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+      </button>
+    </nav>
+  </div>
+
+  <div :show="selectedLog() !== null" class="relative z-10">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75"></div>
+    <div class="fixed inset-0 overflow-y-auto z-10">
+      <div class="flex items-end justify-center sm:items-center p-4 min-h-full">
+        <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:p-6 sm:max-w-2xl sm:w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Activity Detail</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ selectedLog()?.description }}</p>
+          <dl class="grid gap-3 grid-cols-2 mt-4 text-sm">
+            <div>
+              <dt class="font-medium text-gray-500 dark:text-neutral-400">When</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ formatDate(selectedLog()?.created_at ?? '') }}</dd>
+            </div>
+            <div>
+              <dt class="font-medium text-gray-500 dark:text-neutral-400">Channel</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ selectedLog()?.log_name }}</dd>
+            </div>
+            <div>
+              <dt class="font-medium text-gray-500 dark:text-neutral-400">Event</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ selectedLog()?.event }}</dd>
+            </div>
+            <div>
+              <dt class="font-medium text-gray-500 dark:text-neutral-400">Subject</dt>
+              <dd class="mt-1 text-gray-900 dark:text-white">{{ selectedLog()?.subject_type }} #{{ selectedLog()?.subject_id }}</dd>
+            </div>
+          </dl>
+          <pre class="overflow-auto mt-4 p-3 max-h-64 font-mono text-gray-800 text-xs dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900 rounded">{{ selectedLogJSON }}</pre>
+          <div class="flex justify-end mt-5">
+            <button @click="closeLog()" class="inline-flex justify-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const logNames = [
+  { id: 'default', name: 'Default' },
+  { id: 'auth', name: 'Authentication' },
+  { id: 'users', name: 'Users' },
+  { id: 'posts', name: 'Posts' },
+  { id: 'comments', name: 'Comments' },
+  { id: 'media', name: 'Media' },
+  { id: 'deployment', name: 'Deployment' },
+  { id: 'server', name: 'Server' },
+  { id: 'commerce', name: 'Commerce' },
+  { id: 'blog', name: 'Blog' },
+]
+
+const eventTypes = ['all', 'created', 'updated', 'deleted', 'restored']
+
+interface ActivityLog {
+  id: string
+  log_name: string
+  description: string
+  subject_type: string
+  subject_id: string
+  event: string
+  causer?: { name: string, avatar?: string }
+  properties?: Record<string, unknown>
+  created_at: string
+}
+
+const sampleLogs: ActivityLog[] = [
+  { id: '1', log_name: 'auth', description: 'User logged in', subject_type: 'User', subject_id: '1', event: 'created', causer: { name: 'Chris Breuer', avatar: 'https://i.pravatar.cc/150?u=chris' }, created_at: new Date(Date.now() - 1000 * 60 * 5).toISOString() },
+  { id: '2', log_name: 'posts', description: 'Created post "10 Tips for Better Code"', subject_type: 'Post', subject_id: '12', event: 'created', causer: { name: 'Jane Smith', avatar: 'https://i.pravatar.cc/150?u=jane' }, created_at: new Date(Date.now() - 1000 * 60 * 30).toISOString() },
+  { id: '3', log_name: 'deployment', description: 'Deployed v1.4.2 to production', subject_type: 'Deployment', subject_id: '88', event: 'created', causer: { name: 'System' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString() },
+  { id: '4', log_name: 'comments', description: 'Approved comment from Sarah Williams', subject_type: 'Comment', subject_id: '40', event: 'updated', causer: { name: 'Chris Breuer', avatar: 'https://i.pravatar.cc/150?u=chris' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString() },
+  { id: '5', log_name: 'users', description: 'Updated profile settings', subject_type: 'User', subject_id: '2', event: 'updated', causer: { name: 'John Doe', avatar: 'https://i.pravatar.cc/150?u=john' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 12).toISOString() },
+  { id: '6', log_name: 'media', description: 'Uploaded 4 images to /Images', subject_type: 'Media', subject_id: '102', event: 'created', causer: { name: 'Jane Smith', avatar: 'https://i.pravatar.cc/150?u=jane' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 18).toISOString() },
+  { id: '7', log_name: 'commerce', description: 'Order #1024 placed', subject_type: 'Order', subject_id: '1024', event: 'created', causer: { name: 'John Doe', avatar: 'https://i.pravatar.cc/150?u=john' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 26).toISOString() },
+  { id: '8', log_name: 'auth', description: 'User logged out', subject_type: 'User', subject_id: '2', event: 'deleted', causer: { name: 'John Doe', avatar: 'https://i.pravatar.cc/150?u=john' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 36).toISOString() },
+  { id: '9', log_name: 'server', description: 'Restarted node-1', subject_type: 'Server', subject_id: 'node-1', event: 'updated', causer: { name: 'System' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString() },
+  { id: '10', log_name: 'blog', description: 'Published post "STX Tips"', subject_type: 'Post', subject_id: '88', event: 'updated', causer: { name: 'Jane Smith', avatar: 'https://i.pravatar.cc/150?u=jane' }, created_at: new Date(Date.now() - 1000 * 60 * 60 * 72).toISOString() },
+]
+
+const logs = state<ActivityLog[]>(sampleLogs)
+const searchTerm = state('')
+const logNameFilter = state<'all' | string>('all')
+const eventFilter = state<'all' | string>('all')
+const currentPage = state(1)
+const itemsPerPage = state(10)
+const autoRefresh = state(true)
+const selectedLog = state<ActivityLog | null>(null)
+
+const filteredLogs = derived(() => {
+  let list = [...logs()]
+  if (logNameFilter() !== 'all')
+    list = list.filter(l => l.log_name === logNameFilter())
+  if (eventFilter() !== 'all')
+    list = list.filter(l => l.event === eventFilter())
+  const q = searchTerm().toLowerCase()
+  if (q) {
+    list = list.filter(l =>
+      l.description.toLowerCase().includes(q)
+      || l.subject_type.toLowerCase().includes(q)
+      || (l.causer?.name ?? '').toLowerCase().includes(q),
+    )
+  }
+  return list.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredLogs().length / itemsPerPage())))
+const paginatedLogs = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredLogs().slice(start, start + itemsPerPage())
+})
+
+const autoRefreshLabel = derived(() => autoRefresh() ? 'Auto Refresh: On' : 'Auto Refresh: Off')
+const autoRefreshButtonClass = derived(() => autoRefresh()
+  ? 'inline-flex items-center px-3 py-1.5 font-semibold text-sm text-white bg-green-600 hover:bg-green-500 rounded-md shadow-sm'
+  : 'inline-flex items-center px-3 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm')
+
+const selectedLogJSON = derived(() => {
+  const log = selectedLog()
+  return log ? JSON.stringify(log, null, 2) : ''
+})
+
+function formatDate(s: string) {
+  if (!s)
+    return ''
+  return new Date(s).toLocaleString()
+}
+
+function logNameBadgeClass(name: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded-full'
+  const map: Record<string, string> = {
+    auth: `${base} bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200`,
+    users: `${base} bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200`,
+    posts: `${base} bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200`,
+    comments: `${base} bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-200`,
+    media: `${base} bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200`,
+    deployment: `${base} bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200`,
+    server: `${base} bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200`,
+    commerce: `${base} bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200`,
+    blog: `${base} bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200`,
+  }
+  return map[name] ?? `${base} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`
+}
+
+function eventBadgeClass(ev: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded'
+  switch (ev) {
+    case 'created': return `${base} bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`
+    case 'updated': return `${base} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`
+    case 'deleted': return `${base} bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`
+    case 'restored': return `${base} bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`
+    default: return `${base} bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200`
+  }
+}
+
+function toggleAutoRefresh() {
+  autoRefresh.set(!autoRefresh())
+}
+
+function openLog(log: ActivityLog) {
+  selectedLog.set(log)
+}
+
+function closeLog() {
+  selectedLog.set(null)
+}
+
+function nextPage() {
+  if (currentPage() < totalPages())
+    currentPage.set(currentPage() + 1)
+}
+
+function prevPage() {
+  if (currentPage() > 1)
+    currentPage.set(currentPage() - 1)
+}
+</script>
+
+@endsection

package/views/dashboard/data/dashboard/index.stx

@@ -0,0 +1,116 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Data Models')
+<div class="p-6 space-y-6">
+  <div class="flex items-center justify-between">
+    <PageHeader title="Data Models" description="Browse all models and their relationships" />
+  </div>
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div class="relative max-w-sm">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+      </div>
+      <input x-model="searchQuery" type="text" class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600" placeholder="Search models..." />
+    </div>
+    <select x-model="selectedCategory" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600">
+      <template :for="cat in categories">
+        <option :value="cat">{{ cat }}</option>
+      </template>
+    </select>
+  </div>
+
+  <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+    <template :for="model in filteredModels">
+      <div class="overflow-hidden p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <div class="flex gap-3 items-center">
+          <span class="text-3xl">{{ model.emoji }}</span>
+          <div>
+            <h3 class="font-semibold text-gray-900 dark:text-white">{{ model.name }}</h3>
+            <span class="text-gray-500 text-xs dark:text-neutral-400">{{ model.category }}</span>
+          </div>
+        </div>
+        <div class="mt-4">
+          <h4 class="font-medium text-gray-700 text-xs tracking-wider uppercase dark:text-neutral-300">Properties</h4>
+          <ul class="mt-2 space-y-1">
+            <template :for="prop in model.properties">
+              <li class="flex items-center justify-between font-mono text-xs">
+                <span class="text-gray-700 dark:text-neutral-300">{{ prop.name }}</span>
+                <span class="text-gray-500 dark:text-neutral-400">{{ prop.type }}</span>
+              </li>
+            </template>
+          </ul>
+        </div>
+        <div class="mt-4">
+          <h4 class="font-medium text-gray-700 text-xs tracking-wider uppercase dark:text-neutral-300">Relationships</h4>
+          <ul class="mt-2 space-y-1">
+            <template :for="rel in model.relationships">
+              <li class="flex items-center justify-between text-xs">
+                <span class="text-gray-500 dark:text-neutral-400">{{ rel.type }}</span>
+                <span class="font-medium text-blue-600 dark:text-blue-400">{{ rel.model }}</span>
+              </li>
+            </template>
+          </ul>
+        </div>
+        <a :href="modelRoute(model.id)" class="block mt-4 px-4 py-2 w-full font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">View Details</a>
+      </div>
+    </template>
+    <div :show="filteredModels().length === 0" class="col-span-full px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">No models match your filter.</div>
+  </div>
+</div>
+
+<script client>
+interface ModelNode {
+  id: string
+  name: string
+  emoji: string
+  category: string
+  properties: Array<{ name: string, type: string, nullable: boolean }>
+  relationships: Array<{ type: string, model: string }>
+  color: string
+}
+
+// Category filter options + model relationship graph — moved out of the
+// former `<script server>` block (stacksjs/stacks#1838).
+const categories = ['All', 'Authentication', 'Content', 'Communication', 'Commerce', 'Other']
+
+const initialModels: ModelNode[] = [
+  { id: 'user', name: 'User', emoji: '👤', category: 'Authentication', color: '#2563EB', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'name', type: 'string', nullable: false }, { name: 'email', type: 'string', nullable: false }, { name: 'password', type: 'string', nullable: false }, { name: 'created_at', type: 'timestamp', nullable: true }], relationships: [{ type: 'hasOne', model: 'Subscriber' }, { type: 'hasMany', model: 'Deployment' }, { type: 'hasMany', model: 'Post' }, { type: 'belongsToMany', model: 'Team' }] },
+  { id: 'team', name: 'Team', emoji: '👥', category: 'Authentication', color: '#2563EB', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'name', type: 'string', nullable: false }, { name: 'owner_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsToMany', model: 'User' }, { type: 'hasMany', model: 'AccessToken' }] },
+  { id: 'post', name: 'Post', emoji: '📝', category: 'Content', color: '#DB2777', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'title', type: 'string', nullable: false }, { name: 'content', type: 'text', nullable: false }, { name: 'user_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsTo', model: 'User' }] },
+  { id: 'subscriber', name: 'Subscriber', emoji: '📫', category: 'Communication', color: '#0D9488', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'email', type: 'string', nullable: false }, { name: 'status', type: 'string', nullable: false }], relationships: [{ type: 'hasMany', model: 'SubscriberEmail' }, { type: 'belongsTo', model: 'User' }] },
+  { id: 'subscriberEmail', name: 'SubscriberEmail', emoji: '✉️', category: 'Communication', color: '#0D9488', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'email', type: 'string', nullable: false }, { name: 'subscriber_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsTo', model: 'Subscriber' }] },
+  { id: 'accessToken', name: 'AccessToken', emoji: '🔑', category: 'Authentication', color: '#2563EB', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'token', type: 'string', nullable: false }, { name: 'user_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsTo', model: 'User' }, { type: 'belongsTo', model: 'Team' }] },
+  { id: 'deployment', name: 'Deployment', emoji: '🚀', category: 'Other', color: '#4B5563', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'project_id', type: 'bigInteger', nullable: false }, { name: 'user_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsTo', model: 'Project' }, { type: 'belongsTo', model: 'User' }] },
+  { id: 'project', name: 'Project', emoji: '📁', category: 'Other', color: '#4B5563', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'name', type: 'string', nullable: false }], relationships: [{ type: 'hasMany', model: 'Deployment' }, { type: 'hasMany', model: 'Release' }] },
+  { id: 'release', name: 'Release', emoji: '🏷️', category: 'Other', color: '#4B5563', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'project_id', type: 'bigInteger', nullable: false }, { name: 'version', type: 'string', nullable: false }], relationships: [{ type: 'belongsTo', model: 'Project' }] },
+  { id: 'order', name: 'Order', emoji: '🛒', category: 'Commerce', color: '#7E22CE', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'user_id', type: 'bigInteger', nullable: false }, { name: 'total', type: 'decimal', nullable: false }], relationships: [{ type: 'belongsTo', model: 'User' }, { type: 'hasMany', model: 'OrderItem' }] },
+  { id: 'orderItem', name: 'OrderItem', emoji: '🧾', category: 'Commerce', color: '#7E22CE', properties: [{ name: 'id', type: 'bigInteger', nullable: false }, { name: 'order_id', type: 'bigInteger', nullable: false }, { name: 'product_id', type: 'bigInteger', nullable: false }], relationships: [{ type: 'belongsTo', model: 'Order' }] },
+]
+
+const searchQuery = state('')
+const selectedCategory = state('All')
+
+const filteredModels = derived(() => {
+  const q = searchQuery().toLowerCase()
+  return initialModels.filter((m) => {
+    const matchesSearch = q === '' || m.name.toLowerCase().includes(q) || m.properties.some(p => p.name.toLowerCase().includes(q))
+    const matchesCategory = selectedCategory() === 'All' || m.category === selectedCategory()
+    return matchesSearch && matchesCategory
+  })
+})
+
+function modelRoute(id: string) {
+  const map: Record<string, string> = {
+    user: '/models/users', team: '/models/teams', post: '/models/posts',
+    subscriber: '/models/subscribers', subscriberEmail: '/models/subscriber-emails',
+    accessToken: '/models/access-tokens', deployment: '/models/deployments',
+    project: '/models/projects', release: '/models/releases',
+    order: '/models/orders', orderItem: '/models/order-items',
+  }
+  return map[id] || '/models'
+}
+</script>
+
+@endsection