@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/releases/index.stx

@@ -0,0 +1,389 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Releases')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="mb-8 px-4 sm:px-6 lg:px-8">
+    <div>
+      <div class="flex items-center justify-between">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">{{ rangeLabel() }}</h3>
+        <select x-model="timeRange" @change="onTimeRangeChange()" class="pl-3 pr-8 py-1.5 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 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="7">Last 7 days</option>
+          <option value="30">Last 30 days</option>
+          <option value="90">Last 90 days</option>
+          <option value="365">Last year</option>
+        </select>
+      </div>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-cloud-download"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Downloads</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">71,897</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only"> Increased by </span>
+              122
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-clock-01"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Avg. Release Time</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">3.65 mins</p>
+            <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm dark:text-green-400">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only"> Increased by </span>
+              12 s
+            </p>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <dt>
+            <div class="absolute p-3 bg-blue-500 rounded-md">
+              <div class="h-6 w-6 text-white i-hugeicons-rocket-01"></div>
+            </div>
+            <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Releases</p>
+          </dt>
+          <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+            <p class="font-semibold text-2xl text-gray-900 dark:text-neutral-100">420</p>
+            <p class="flex items-baseline ml-2 font-semibold text-red-600 text-sm dark:text-red-400">
+              <svg class="flex-shrink-0 self-center h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only"> Decreased by </span>
+              3.2%
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div class="mb-8 px-4 sm:px-6 lg:px-8">
+    <div class="grid gap-8 grid-cols-1 lg:grid-cols-2">
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="mb-6">
+            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Download Activity</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Release download trends over time</p>
+          </div>
+          <div class="relative h-[300px]">
+            <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+              <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            </div>
+            <canvas id="releases_downloads_chart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="mb-6">
+            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Release Times</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Average time to complete releases</p>
+          </div>
+          <div class="relative h-[300px]">
+            <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+              <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            </div>
+            <canvas id="releases_time_chart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-12 px-4 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Releases</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-300">A list of all the releases in your library.</p>
+      </div>
+
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">New Release</button>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg dark:ring-neutral-600 shadow">
+            <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+              <thead class="bg-gray-50 dark:bg-neutral-700">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Version</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Codename</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Size</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Path</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Created At</th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">View</span></th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <template :for="release in releaseList">
+                  <tr>
+                    <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ release.version }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ release.codename }}</td>
+                    <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ release.size }}</td>
+                    <td class="px-3 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ release.path }}</td>
+                    <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ release.created_at }}</td>
+                    <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                      <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">View<span class="sr-only">, {{ release.version }}, in GitHub</span></a>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Demo release rows — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). Replace with a real release feed when the
+// API lands.
+const releaseList = [
+  { version: 'v1.0.0', codename: 'Playa Vista', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v1.0.0-rc.1', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v1.0.0-beta.1', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v1.0.0-alpha.1', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v0.60.3', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v0.60.2', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v0.60.1', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+  { version: 'v0.60.0', codename: '', size: '5kb', path: './storage/framework/libs/dist/*', created_at: '04-19-2022 09:04:20' },
+]
+
+interface ReleaseStats {
+  labels: string[]
+  downloads: number[]
+  releaseTimes: number[]
+}
+
+interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ label?: string, data: number[], borderColor?: string, backgroundColor?: string, fill?: boolean }> } }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const timeRangeOptions: Record<string, string> = {
+  7: 'Last 7 days',
+  30: 'Last 30 days',
+  90: 'Last 90 days',
+  365: 'Last year',
+}
+
+function formatDate(daysAgo: number): string {
+  const date = new Date()
+  date.setDate(date.getDate() - daysAgo)
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+function generateDateLabels(days: number): string[] {
+  return Array.from({ length: days }, (_, i) => formatDate(days - 1 - i)).reverse()
+}
+
+const releaseStats = state<Record<string, ReleaseStats>>({
+  '7': {
+    labels: generateDateLabels(7),
+    downloads: [12500, 15800, 14200, 16800, 19200, 18100, 17200],
+    releaseTimes: [3.2, 2.8, 3.5, 2.9, 3.1, 3.4, 3.0],
+  },
+  '30': {
+    labels: generateDateLabels(30),
+    downloads: Array.from({ length: 30 }, () => Math.floor(Math.random() * 20000) + 10000),
+    releaseTimes: Array.from({ length: 30 }, () => Math.random() * 2 + 2),
+  },
+  '90': {
+    labels: generateDateLabels(90),
+    downloads: Array.from({ length: 90 }, () => Math.floor(Math.random() * 20000) + 10000),
+    releaseTimes: Array.from({ length: 90 }, () => Math.random() * 2 + 2),
+  },
+  '365': {
+    labels: generateDateLabels(365),
+    downloads: Array.from({ length: 365 }, () => Math.floor(Math.random() * 20000) + 10000),
+    releaseTimes: Array.from({ length: 365 }, () => Math.random() * 2 + 2),
+  },
+})
+
+const timeRange = state('30')
+const isLoading = state(false)
+const fetchError = state('')
+
+let downloadChart: ChartLike | null = null
+let releaseTimeChart: ChartLike | null = null
+
+function rangeLabel(): string {
+  return timeRangeOptions[timeRange()] ?? ''
+}
+
+function downloadsData() {
+  const range = releaseStats()[timeRange()]
+  if (!range)
+    return { labels: [], datasets: [] }
+  return {
+    labels: range.labels,
+    datasets: [{ label: 'Downloads', data: range.downloads, borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true }],
+  }
+}
+
+function releaseTimeData() {
+  const range = releaseStats()[timeRange()]
+  if (!range)
+    return { labels: [], datasets: [] }
+  return {
+    labels: range.labels,
+    datasets: [{ label: 'Release Time (minutes)', data: range.releaseTimes, borderColor: 'rgb(234, 179, 8)', backgroundColor: 'rgba(234, 179, 8, 0.1)', fill: true }],
+  }
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+      grid: { color: 'rgba(200, 200, 200, 0.1)' },
+      ticks: {
+        color: 'rgb(156, 163, 175)',
+        font: { family: "'JetBrains Mono', monospace" },
+        callback: (value: number | string) => {
+          const v = Number(value)
+          if (v >= 1000000)
+            return `${(v / 1000000).toFixed(1)}M`
+          if (v >= 1000)
+            return `${(v / 1000).toFixed(1)}k`
+          return v
+        },
+      },
+    },
+    x: { grid: { display: false }, ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } } },
+  },
+  plugins: {
+    legend: { display: true, position: 'top', align: 'end', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: {
+      callbacks: {
+        label: (context: { dataset: { label?: string }, parsed: { y: number | null } }) => {
+          let label = context.dataset.label || ''
+          if (label)
+            label += ': '
+          if (context.parsed.y !== null) {
+            const v = context.parsed.y
+            if (v >= 1000000)
+              label += `${(v / 1000000).toFixed(1)}M`
+            else if (v >= 1000)
+              label += `${(v / 1000).toFixed(1)}k`
+            else label += v
+          }
+          return `${label} downloads`
+        },
+      },
+    },
+  },
+  elements: { line: { tension: 0.4 } },
+}
+
+const releaseTimeOptions = {
+  ...chartOptions,
+  plugins: {
+    ...chartOptions.plugins,
+    tooltip: {
+      callbacks: {
+        label: (context: { dataset: { label?: string }, parsed: { y: number | null } }) => {
+          let label = context.dataset.label || ''
+          if (label)
+            label += ': '
+          if (context.parsed.y !== null)
+            label += `${context.parsed.y.toFixed(1)} mins`
+          return label
+        },
+      },
+    },
+  },
+}
+
+async function fetchReleaseData(days: string): Promise<void> {
+  isLoading.set(true)
+  fetchError.set('')
+  try {
+    const baseUrl = `http://localhost:${(globalThis as { process?: { env?: { PORT_API?: string } } }).process?.env?.PORT_API || '3008'}`
+    const response = await fetch(`${baseUrl}/releases/stats?days=${days}`, {
+      headers: { Accept: 'application/json' },
+    })
+    if (response.ok) {
+      const data = await response.json()
+      if (data.stats) {
+        const next = { ...releaseStats() }
+        next[days] = data.stats
+        releaseStats.set(next)
+      }
+    }
+  }
+  catch (error) {
+    fetchError.set('Failed to load release data. Using cached data.')
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch release data:', error)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+function refreshCharts(): void {
+  const dl = downloadsData()
+  if (downloadChart) {
+    downloadChart.data.labels = dl.labels
+    downloadChart.data.datasets = dl.datasets
+    downloadChart.update()
+  }
+  const rt = releaseTimeData()
+  if (releaseTimeChart) {
+    releaseTimeChart.data.labels = rt.labels
+    releaseTimeChart.data.datasets = rt.datasets
+    releaseTimeChart.update()
+  }
+}
+
+async function onTimeRangeChange(): Promise<void> {
+  await fetchReleaseData(timeRange())
+  refreshCharts()
+}
+
+onMount(async () => {
+  await fetchReleaseData(timeRange())
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  const dl = useChart({ Chart: Ctor, id: 'releases_downloads_chart', type: 'line', data: downloadsData(), options: chartOptions })
+  const rt = useChart({ Chart: Ctor, id: 'releases_time_chart', type: 'line', data: releaseTimeData(), options: releaseTimeOptions })
+  downloadChart = dl.instance as ChartLike | null
+  releaseTimeChart = rt.instance as ChartLike | null
+})
+
+onDestroy(() => {
+  downloadChart?.destroy()
+  releaseTimeChart?.destroy()
+  downloadChart = null
+  releaseTimeChart = null
+})
+</script>
+
+@endsection