@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -2,260 +2,7 @@
 
 @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>
-
+<PageLayout>
+  <DataRecords mode="activity" />
+</PageLayout>
 @endsection

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

@@ -2,115 +2,10 @@
 
 @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>
-
+<PageLayout>
+  <ModelsOverview
+    title="Data Models"
+    description="Browse the models currently available to this application."
+  />
+</PageLayout>
 @endsection