@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/notifications/sms.stx

@@ -0,0 +1,332 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - SMS Notifications')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="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">SMS Notifications</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">Manage and monitor all SMS notifications sent through the system</p>
+      </div>
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button @click="toggleFilters()" type="button" class="inline-flex items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+          <div class="mr-2 h-5 w-5 i-hugeicons-filter"></div>
+          {{ filtersToggleLabel() }}
+        </button>
+      </div>
+    </div>
+
+    <div :show="showFilters" class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-4">
+      <div class="flex-1 min-w-0">
+        <label for="search" class="sr-only">Search SMS notifications</label>
+        <div class="relative rounded-md shadow-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="search" name="search" id="search" placeholder="Search by phone number or message..." class="block pl-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 placeholder:text-gray-400 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset" />
+        </div>
+      </div>
+
+      <div>
+        <select x-model="selectedStatus" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-neutral-100 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+          <option value="all">All Statuses</option>
+          <option value="sent">Sent</option>
+          <option value="delivered">Delivered</option>
+          <option value="failed">Failed</option>
+          <option value="pending">Pending</option>
+        </select>
+      </div>
+
+      <div class="flex items-end">
+        <button @click="resetFilters()" type="button" class="px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Reset Filters</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-opacity-20 shadow">
+            <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+              <thead class="bg-gray-50 dark:bg-neutral-600">
+                <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">Recipient</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Message</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 dark:text-neutral-100">Provider</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100 cursor-pointer" @click="toggleSort('sent_at')">
+                    <div class="flex items-center justify-end">
+                      Sent
+                      <div :show="isSortedBy('sent_at')" class="ml-2">
+                        <div :show="sortDirection() === 'desc'" class="h-4 w-4 i-hugeicons-chevron-down"></div>
+                        <div :show="sortDirection() === 'asc'" class="h-4 w-4 i-hugeicons-chevron-up"></div>
+                      </div>
+                      <div :show="isUnsorted('sent_at')" class="ml-2">
+                        <div class="h-4 w-4 text-gray-400 i-hugeicons-arrows-up-down"></div>
+                      </div>
+                    </div>
+                  </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-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <tr :show="isLoading">
+                  <td colspan="6" class="px-3 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                    <div class="flex justify-center">
+                      <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+                    </div>
+                  </td>
+                </tr>
+                <tr :show="hasNoNotifications">
+                  <td colspan="6" class="px-3 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">No SMS notifications found matching your criteria</td>
+                </tr>
+                <template :for="notification in paginatedNotifications">
+                  <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600/50">
+                    <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ notification.recipient }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
+                      <div class="max-w-xs truncate">{{ notification.message }}</div>
+                    </td>
+                    <td class="px-3 py-4 text-sm whitespace-nowrap">
+                      <NotificationStatusBadge :status="notification.status" />
+                    </td>
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ notification.metadata?.provider }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(notification.sent_at) }}</td>
+                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                      <div class="flex justify-end space-x-2">
+                        <button :show="{{ notification.status === 'failed' ? 'true' : 'false' }}" @click="handleRetry('{{ notification.id }}')" type="button" class="text-blue-600 hover:text-blue-900 dark:hover:text-blue-400">Retry</button>
+                        <button @click="openErrorModal('{{ notification.id }}')" type="button" class="text-gray-600 dark:text-neutral-400 hover:text-gray-900 dark:hover:text-gray-200">View Logs</button>
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between mt-4">
+      <div class="flex items-center">
+        <p class="text-gray-700 text-sm dark:text-neutral-300">
+          Showing <span class="font-medium">{{ rangeStart() }}</span> to <span class="font-medium">{{ rangeEnd() }}</span> of <span class="font-medium">{{ totalFiltered() }}</span> results
+        </p>
+      </div>
+      <div class="flex items-center space-x-2">
+        <button :show="canGoBack" type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600" @click="previousPage()">Previous</button>
+        <button type="button" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 hover:bg-gray-50 dark:hover:bg-neutral-500 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 disabled:opacity-50" :disabled="isLastPage" @click="nextPage()">Next</button>
+      </div>
+    </div>
+  </div>
+
+  <NotificationErrorModal
+    :isOpen="isErrorModalOpen"
+    :notificationId="errorModalId"
+    notificationType="sms"
+    :errorMessage="errorModalMessage"
+    :sentAt="errorModalSentAt"
+    @close="closeErrorModal"
+  />
+</div>
+
+<script client>
+interface SMSNotification {
+  id: string
+  recipient: string
+  message: string
+  status: 'sent' | 'delivered' | 'failed' | 'pending'
+  sent_at: string
+  delivered_at?: string
+  error?: string
+  metadata?: {
+    sender: string
+    country: string
+    provider: string
+    segments: number
+    cost: number
+  }
+}
+
+const notifications = state<SMSNotification[]>([])
+const currentPage = state(1)
+const perPage = state(10)
+const isLoading = state(true)
+const searchQuery = state('')
+const selectedStatus = state('all')
+const showFilters = state(false)
+const sortField = state<string | null>(null)
+const sortDirection = state<'asc' | 'desc'>('desc')
+
+const isErrorModalOpen = state(false)
+const errorModalId = state('')
+const errorModalMessage = state('')
+const errorModalSentAt = state('')
+
+function generateMockSMSNotifications(): SMSNotification[] {
+  const statuses: Array<SMSNotification['status']> = ['sent', 'delivered', 'failed', 'pending']
+  const messages = [
+    'Your verification code is: 123456',
+    'Your appointment is confirmed for tomorrow at 2 PM',
+    'Your order has been shipped',
+    'Your payment of $99.99 has been processed',
+    'Your password has been reset',
+    'Your account has been updated',
+    'Your subscription will renew in 3 days',
+    'Your 2FA code is: 987654',
+  ]
+  const countries = ['US', 'UK', 'CA', 'AU', 'DE', 'FR', 'JP', 'BR']
+  const providers = ['Twilio', 'Nexmo', 'MessageBird', 'Plivo', 'Sinch']
+
+  return Array.from({ length: 100 }, (_, i) => {
+    const status = statuses[Math.floor(Math.random() * statuses.length)] as SMSNotification['status']
+    const message = messages[Math.floor(Math.random() * messages.length)] || 'SMS notification'
+    const country = countries[Math.floor(Math.random() * countries.length)] || 'US'
+    const provider = providers[Math.floor(Math.random() * providers.length)] || 'Twilio'
+    const sent_at = new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString()
+    const delivered_at = status === 'delivered' ? new Date(new Date(sent_at).getTime() + Math.random() * 60000).toISOString() : undefined
+
+    return {
+      id: `${i + 1}`,
+      recipient: `+1${Math.floor(Math.random() * 900) + 100}${Math.floor(Math.random() * 900) + 100}${Math.floor(Math.random() * 9000) + 1000}`,
+      message,
+      status,
+      sent_at,
+      delivered_at,
+      error: status === 'failed' ? 'Failed to deliver SMS' : undefined,
+      metadata: {
+        sender: `+1${Math.floor(Math.random() * 900) + 100}${Math.floor(Math.random() * 900) + 100}${Math.floor(Math.random() * 9000) + 1000}`,
+        country,
+        provider,
+        segments: Math.floor(Math.random() * 3) + 1,
+        cost: Number.parseFloat((Math.random() * 0.05 + 0.01).toFixed(4)),
+      },
+    }
+  })
+}
+
+const filteredNotifications = derived(() => {
+  const list = notifications()
+  const status = selectedStatus()
+  const q = searchQuery().toLowerCase()
+  return list.filter((n) => {
+    if (status !== 'all' && n.status !== status)
+      return false
+    if (q)
+      return n.message.toLowerCase().includes(q) || n.recipient.toLowerCase().includes(q)
+    return true
+  })
+})
+
+const sortedNotifications = derived(() => {
+  const field = sortField()
+  if (!field)
+    return filteredNotifications()
+  const dir = sortDirection()
+  return [...filteredNotifications()].sort((a, b) => {
+    const aValue = (a as Record<string, unknown>)[field] as string | undefined
+    const bValue = (b as Record<string, unknown>)[field] as string | undefined
+    if (!aValue && !bValue)
+      return 0
+    if (!aValue)
+      return 1
+    if (!bValue)
+      return -1
+    const comparison = new Date(aValue).getTime() - new Date(bValue).getTime()
+    return dir === 'asc' ? comparison : -comparison
+  })
+})
+
+const paginatedNotifications = derived(() => {
+  const start = (currentPage() - 1) * perPage()
+  return sortedNotifications().slice(start, start + perPage())
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(filteredNotifications().length / perPage())))
+const totalFiltered = derived(() => filteredNotifications().length)
+const rangeStart = derived(() => totalFiltered() === 0 ? 0 : (currentPage() - 1) * perPage() + 1)
+const rangeEnd = derived(() => Math.min(currentPage() * perPage(), totalFiltered()))
+const hasNoNotifications = derived(() => !isLoading() && paginatedNotifications().length === 0)
+const canGoBack = derived(() => currentPage() > 1)
+const isLastPage = derived(() => currentPage() >= totalPages())
+
+function isSortedBy(field: string): boolean {
+  return sortField() === field
+}
+
+function isUnsorted(field: string): boolean {
+  return sortField() !== field
+}
+
+function filtersToggleLabel(): string {
+  return showFilters() ? 'Hide Filters' : 'Show Filters'
+}
+
+function toggleFilters(): void {
+  showFilters.update(v => !v)
+}
+
+function previousPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function nextPage(): void {
+  if (currentPage() < totalPages())
+    currentPage.update(p => p + 1)
+}
+
+function resetFilters(): void {
+  selectedStatus.set('all')
+  searchQuery.set('')
+  currentPage.set(1)
+}
+
+function formatDate(date: string): string {
+  return new Date(date).toLocaleString()
+}
+
+function toggleSort(field: string): void {
+  if (sortField() === field)
+    sortDirection.set(sortDirection() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortField.set(field)
+    sortDirection.set('desc')
+  }
+}
+
+function handleRetry(id: string): void {
+  // eslint-disable-next-line no-console
+  console.log('Retrying SMS notification:', id)
+}
+
+function openErrorModal(id: string): void {
+  const target = notifications().find(n => n.id === id)
+  if (!target)
+    return
+  errorModalId.set(target.id)
+  errorModalMessage.set(target.error || 'Unknown error')
+  errorModalSentAt.set(target.sent_at)
+  isErrorModalOpen.set(true)
+}
+
+function closeErrorModal(): void {
+  isErrorModalOpen.set(false)
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  try {
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    notifications.set(generateMockSMSNotifications())
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to load SMS notifications:', error)
+  }
+  finally {
+    isLoading.set(false)
+  }
+})
+</script>
+
+@endsection

package/views/dashboard/packages/index.stx

@@ -0,0 +1,195 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+
+interface PackageRow {
+  name: string
+  version: string
+  description: string
+  downloads: number
+  contributors: number
+  issues: number
+  size: string
+  createdAt: string
+  url: string
+}
+
+// Placeholder data — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). Wire this up to the npm registry once the
+// dashboard exposes a `GET /api/dashboard/packages` endpoint that
+// returns the same shape (`name/version/downloads/...`). Until then,
+// this snapshot mirrors what stacks-org publishes.
+const packages: PackageRow[] = [
+  { name: 'stacks',                    version: 'v0.71.1', description: 'A modern Full Stack TypeScript framework',     downloads: 1001897, contributors: 24, issues: 12, size: '5.2 kB', createdAt: '2024-01-15', url: 'https://github.com/stacksjs/stacks' },
+  { name: 'qrx',                       version: 'v1.0.0',  description: 'High-performance QR code generator and reader', downloads:   71897, contributors: 24, issues: 12, size: '5.2 kB', createdAt: '2024-01-15', url: 'https://github.com/stacksjs/qrx' },
+  { name: 'rpx',                       version: 'v2.1.3',  description: 'Reverse proxy for the modern web',              downloads:   52438, contributors: 16, issues:  8, size: '4.8 kB', createdAt: '2024-01-20', url: 'https://github.com/stacksjs/rpx' },
+  { name: 'tlsx',                      version: 'v0.9.0',  description: 'Modern TLS/SSL toolkit for Node.js',            downloads:   23567, contributors:  9, issues: 15, size: '7.1 kB', createdAt: '2024-01-25', url: 'https://github.com/stacksjs/tlsx' },
+  { name: 'dtsx',                      version: 'v1.2.0',  description: 'Advanced TypeScript .d.ts tooling',             downloads:   34892, contributors: 12, issues:  6, size: '3.9 kB', createdAt: '2024-01-30', url: 'https://github.com/stacksjs/dtsx' },
+  { name: 'bunfig',                    version: 'v0.8.0',  description: 'Configuration management for Bun projects',     downloads:   18234, contributors:  7, issues: 10, size: '2.8 kB', createdAt: '2024-02-05', url: 'https://github.com/stacksjs/bunfig' },
+  { name: 'localtunnels',              version: 'v1.5.0',  description: 'Secure local tunnel creation made easy',        downloads:   45673, contributors: 19, issues: 14, size: '6.3 kB', createdAt: '2024-02-10', url: 'https://github.com/stacksjs/localtunnels' },
+  { name: 'ts-collect',                version: 'v2.0.1',  description: 'Collection utilities for TypeScript',           downloads:   28945, contributors: 11, issues:  9, size: '4.1 kB', createdAt: '2024-02-15', url: 'https://github.com/stacksjs/ts-collect' },
+  { name: 'ts-spreadsheets',           version: 'v1.3.2',  description: 'TypeScript spreadsheet generation',             downloads:   39567, contributors: 15, issues: 11, size: '8.2 kB', createdAt: '2024-02-20', url: 'https://github.com/stacksjs/ts-spreadsheets' },
+  { name: 'bun-plugin-auto-imports',   version: 'v0.6.0',  description: 'Automatic import handling for Bun',             downloads:   15678, contributors:  5, issues:  7, size: '3.4 kB', createdAt: '2024-02-25', url: 'https://github.com/stacksjs/bun-plugin-auto-imports' },
+  { name: 'bun-plugin-dtsx',           version: 'v0.5.0',  description: 'DTSX support for Bun',                          downloads:   12345, contributors:  4, issues:  5, size: '2.9 kB', createdAt: '2024-03-01', url: 'https://github.com/stacksjs/bun-plugin-dtsx' },
+  { name: 'vite-plugin-local',         version: 'v1.1.0',  description: 'Local development enhancements for Vite',       downloads:   31456, contributors:  8, issues: 13, size: '4.7 kB', createdAt: '2024-03-05', url: 'https://github.com/stacksjs/vite-plugin-local' },
+]
+
+const totalDownloads = packages.reduce((s, p) => s + p.downloads, 0)
+const totalContributors = packages.reduce((s, p) => s + p.contributors, 0)
+const totalIssues = packages.reduce((s, p) => s + p.issues, 0)
+const totalPackages = packages.length
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+  return n.toString()
+}
+
+function downloadsBadgeVariant(n: number) {
+  if (n >= 100_000) return 'success'
+  if (n >= 10_000) return 'primary'
+  return 'default'
+}
+
+const sortedPackages = [...packages].sort((a, b) => b.downloads - a.downloads)
+</script>
+
+<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-6xl">
+
+  <PageHeader
+    title="Packages"
+    description="Open-source packages published from this monorepo"
+  >
+    <template #actions>
+      <Button variant="primary" size="md">Add package</Button>
+    </template>
+  </PageHeader>
+
+  <!-- Stats -->
+  <div class="grid gap-3 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-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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Packages</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ totalPackages }}</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="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Downloads</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ formatNumber(totalDownloads) }}</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="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-5.13a4 4 0 11-8 0 4 4 0 018 0zm6 0a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Contributors</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ totalContributors }}</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 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
+          </svg>
+        </div>
+        <div class="min-w-0">
+          <p class="text-[11px] text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Open issues</p>
+          <p class="font-semibold leading-tight text-2xl text-neutral-900 tracking-tight dark:text-white">{{ totalIssues }}</p>
+        </div>
+      </div>
+    </Card>
+  </div>
+
+  <!-- Packages 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 packages</h3>
+        <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">
+          {{ totalPackages }} packages, sorted by downloads
+        </p>
+      </div>
+    </div>
+
+    @if(packages.length === 0)
+      <div class="p-8">
+        <EmptyState
+          title="No packages yet"
+          description="Publish your first package from the monorepo."
+        />
+      </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">Package</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Version</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-neutral-500 text-right tracking-wider uppercase dark:text-neutral-400">Downloads</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-neutral-500 text-right tracking-wider uppercase dark:text-neutral-400">Contributors</th>
+              <th class="px-5 py-2.5 font-medium text-[11px] text-neutral-500 text-right tracking-wider uppercase dark:text-neutral-400">Issues</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 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="pkg in sortedPackages">
+              <tr class="hover:bg-neutral-50/60 dark:hover:bg-white/[0.02] transition-colors">
+                <td class="px-5 py-3 whitespace-nowrap">
+                  <div class="font-medium text-neutral-900 text-sm dark:text-white">{{ pkg.name }}</div>
+                  <div class="mt-0.5 max-w-xs text-neutral-500 text-xs truncate dark:text-neutral-400">{{ pkg.description }}</div>
+                </td>
+                <td class="px-5 py-3 font-mono text-neutral-600 text-xs whitespace-nowrap dark:text-neutral-300">
+                  {{ pkg.version }}
+                </td>
+                <td class="px-5 py-3 text-right whitespace-nowrap">
+                  <Badge :variant="downloadsBadgeVariant(pkg.downloads)" size="sm">{{ formatNumber(pkg.downloads) }}</Badge>
+                </td>
+                <td class="px-5 py-3 text-neutral-600 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                  {{ pkg.contributors }}
+                </td>
+                <td class="px-5 py-3 text-neutral-600 text-right text-sm whitespace-nowrap dark:text-neutral-300">
+                  {{ pkg.issues }}
+                </td>
+                <td class="px-5 py-3 font-mono text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400">
+                  {{ pkg.size }}
+                </td>
+                <td class="px-5 py-3 text-right whitespace-nowrap">
+                  <a :href="pkg.url" target="_blank" rel="noopener" class="text-blue-600 text-sm dark:text-blue-400 hover:underline">
+                    GitHub
+                  </a>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    @endif
+  </Card>
+
+</div>
+@endsection