@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/content/dashboard.stx

@@ -0,0 +1,383 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Blog')
+<PageLayout>
+  <PageHeader title="Content Dashboard" description="Overview of your blog's performance">
+    <template #actions>
+      <select x-model="timeRange" class="block pl-3 pr-10 py-1.5 text-gray-900 sm:leading-6 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="range in timeRanges">
+          <option :value="range">{{ range }}</option>
+        </template>
+      </select>
+    </template>
+  </PageHeader>
+
+  <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+          <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Posts</dt>
+            <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalPosts }}</dd>
+            <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+              <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+              <span>5.2% increase</span>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Views</dt>
+            <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalViews.toLocaleString() }}</dd>
+            <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+              <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+              <span>8.1% increase</span>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Total Comments</dt>
+            <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalComments.toLocaleString() }}</dd>
+            <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+              <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+              <span>12.3% increase</span>
+            </dd>
+          </div>
+
+          <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Avg. Engagement</dt>
+            <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ averageEngagement }}</dd>
+            <dd class="flex items-center mt-2 text-red-600 text-sm dark:text-red-400">
+              <div class="mr-1 h-4 w-4 i-hugeicons-analytics-down"></div>
+              <span>0.5% decrease</span>
+            </dd>
+          </div>
+        </dl>
+
+        <div class="grid gap-5 grid-cols-1 lg:grid-cols-2">
+          <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <div class="p-6">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Page Views</h3>
+              <div class="mt-2 h-80">
+                <canvas id="content_views_chart"></canvas>
+              </div>
+            </div>
+          </div>
+
+          <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <div class="p-6">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Content Categories</h3>
+              <div class="mt-2 h-80">
+                <canvas id="content_category_chart"></canvas>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <div class="flex items-center justify-between px-4 py-5 sm:px-6">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Top Performing Posts</h3>
+              <button type="button" class="inline-flex items-center px-3 py-2 font-semibold 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">
+                <div class="mr-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+                New Post
+              </button>
+            </div>
+            <div class="border-gray-200 border-t dark:border-neutral-700">
+              <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+                <thead class="bg-gray-50 dark:bg-neutral-700">
+                  <tr>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Title</th>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Category</th>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Views</th>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Comments</th>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Published</th>
+                    <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Status</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-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                  <template :for="post in topPosts">
+                    <tr>
+                      <td class="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ post.title }}</td>
+                      <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ post.category }}</td>
+                      <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ post.views.toLocaleString() }}</td>
+                      <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ post.comments }}</td>
+                      <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ post.published }}</td>
+                      <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="inline-flex px-2 font-semibold leading-5 text-green-800 text-xs dark:text-green-300 bg-green-100 dark:bg-green-900 rounded-full">{{ post.status }}</span>
+                      </td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-view"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-waste"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid gap-5 grid-cols-1 lg:grid-cols-2">
+          <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <div class="flex items-center justify-between px-4 py-5 sm:px-6">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Recent Comments</h3>
+              <div class="flex space-x-2">
+                <div class="relative">
+                  <select class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 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>All comments</option>
+                    <option>Approved</option>
+                    <option>Pending</option>
+                    <option>Spam</option>
+                  </select>
+                </div>
+                <button type="button" class="inline-flex items-center px-2.5 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">
+                  <div class="mr-1 h-4 w-4 i-hugeicons-refresh"></div>
+                  Refresh
+                </button>
+              </div>
+            </div>
+            <div class="border-gray-200 border-t dark:border-neutral-700">
+              <ul role="list" class="overflow-y-auto max-h-[500px] divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="comment in recentComments">
+                  <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-neutral-700 duration-150 transition">
+                    <div class="flex items-center justify-between">
+                      <div class="flex items-center">
+                        <div class="flex-shrink-0">
+                          <div class="flex items-center justify-center h-10 w-10 bg-gray-200 dark:bg-neutral-700 rounded-full">
+                            <div class="h-6 w-6 text-gray-500 dark:text-neutral-400 i-hugeicons-user-01"></div>
+                          </div>
+                        </div>
+                        <div class="ml-4">
+                          <div class="flex items-center font-medium text-gray-900 dark:text-white">
+                            {{ comment.author }}
+                            <span :if="comment.id <= 2" class="inline-flex items-center ml-2 px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 ring-1 ring-blue-700/10 ring-inset rounded-md dark:ring-blue-400/30">New</span>
+                          </div>
+                          <div class="text-gray-500 text-sm dark:text-neutral-400">{{ comment.email }}</div>
+                        </div>
+                      </div>
+                      <div>
+                        <span :class="commentStatusClass(comment.status)">{{ comment.status }}</span>
+                      </div>
+                    </div>
+                    <div class="mt-2 text-gray-700 text-sm dark:text-neutral-300">
+                      <p>{{ comment.content }}</p>
+                    </div>
+                    <div class="flex items-center mt-2 text-gray-500 text-sm dark:text-neutral-400">
+                      <div class="mr-1 h-4 w-4 i-hugeicons-document-text"></div>
+                      <p>On: <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">{{ comment.post }}</a> • <span class="whitespace-nowrap">{{ comment.date }}</span></p>
+                    </div>
+                    <div class="flex mt-2 space-x-2">
+                      <button :if="comment.status !== 'Approved'" type="button" class="inline-flex items-center px-2.5 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
+                        Approve
+                      </button>
+                      <button type="button" class="inline-flex items-center px-2.5 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-edit-01"></div>
+                        Reply
+                      </button>
+                      <button type="button" class="inline-flex items-center px-2.5 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-waste"></div>
+                        Delete
+                      </button>
+                    </div>
+                  </li>
+                </template>
+              </ul>
+              <div class="flex items-center justify-between px-4 py-4 sm:px-6 bg-gray-50 dark:bg-neutral-700">
+                <a href="#" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">View all comments<span aria-hidden="true"> &rarr;</span></a>
+                <div class="text-gray-500 text-sm dark:text-neutral-400">Showing 5 of 42 comments</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <div class="flex items-center justify-between px-4 py-5 sm:px-6">
+              <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Draft Posts</h3>
+              <button type="button" class="inline-flex items-center px-3 py-2 font-semibold 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">
+                <div class="mr-1 h-4 w-4 i-hugeicons-plus-sign"></div>
+                New Draft
+              </button>
+            </div>
+            <div class="border-gray-200 border-t dark:border-neutral-700">
+              <ul role="list" class="overflow-y-auto max-h-[500px] divide-gray-200 divide-y dark:divide-neutral-700">
+                <template :for="post in draftPosts">
+                  <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-neutral-700 duration-150 transition">
+                    <div class="flex items-center justify-between">
+                      <div>
+                        <div class="flex items-center font-medium text-gray-900 dark:text-white">
+                          {{ post.title }}
+                          <span :if="post.id === 6" class="inline-flex items-center ml-2 px-2 py-1 font-medium text-green-700 text-xs dark:text-green-400 bg-green-50 dark:bg-green-900/30 ring-1 ring-green-600/20 ring-inset rounded-md dark:ring-green-500/30">Updated today</span>
+                        </div>
+                        <div class="flex items-center mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                          <div class="mr-1 h-4 w-4 i-hugeicons-folder-01"></div>
+                          <span>{{ post.category }}</span>
+                          <span class="mx-2">&middot;</span>
+                          <div class="mr-1 h-4 w-4 i-hugeicons-user-01"></div>
+                          <span>{{ post.author }}</span>
+                          <span :if="post.id === 7" class="inline-flex items-center ml-2 px-2 py-1 font-medium text-xs text-yellow-800 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-inset ring-yellow-600/20 rounded-md dark:ring-yellow-500/30">Needs review</span>
+                        </div>
+                      </div>
+                      <div class="flex items-center text-gray-500 text-sm dark:text-neutral-400">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-calendar"></div>
+                        Last edited: {{ post.lastEdited }}
+                      </div>
+                    </div>
+                    <div class="mt-3 h-1.5 w-full bg-gray-200 dark:bg-neutral-700 rounded-full">
+                      <div class="h-1.5 bg-blue-600 rounded-full" :style="'width: ' + draftProgressWidth(post.id)"></div>
+                    </div>
+                    <div class="mt-1 text-gray-500 text-right text-xs dark:text-neutral-400">{{ draftProgressLabel(post.id) }}</div>
+                    <div class="flex mt-2 space-x-2">
+                      <button type="button" class="inline-flex items-center px-2.5 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-edit-01"></div>
+                        Edit
+                      </button>
+                      <button type="button" class="inline-flex items-center px-2.5 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-view"></div>
+                        Preview
+                      </button>
+                      <button type="button" class="inline-flex items-center px-2.5 py-1.5 font-semibold 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">
+                        <div class="mr-1 h-4 w-4 i-hugeicons-paper-plane"></div>
+                        Publish
+                      </button>
+                    </div>
+                  </li>
+                </template>
+              </ul>
+              <div class="flex items-center justify-between px-4 py-4 sm:px-6 bg-gray-50 dark:bg-neutral-700">
+                <a href="#" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">View all drafts<span aria-hidden="true"> &rarr;</span></a>
+                <div class="text-gray-500 text-sm dark:text-neutral-400">Showing 3 of 12 drafts</div>
+              </div>
+            </div>
+          </div>
+  </div>
+</PageLayout>
+
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+// Static demo data + view helpers — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const timeRanges = ['Today', 'Last 7 days', 'Last 30 days', 'Last 90 days', 'Last year', 'All time']
+
+const topPosts = [
+  { id: 1, title: '10 Tips for Better Code Quality', category: 'Tutorials', views: 12450, comments: 78, published: '2023-12-01', status: 'Published' },
+  { id: 2, title: 'The Future of JavaScript Frameworks', category: 'Technology', views: 9870, comments: 124, published: '2023-11-28', status: 'Published' },
+  { id: 3, title: 'Getting Started with STX', category: 'Tutorials', views: 8760, comments: 45, published: '2023-11-25', status: 'Published' },
+  { id: 4, title: 'Review: Latest MacBook Pro', category: 'Reviews', views: 7650, comments: 92, published: '2023-11-20', status: 'Published' },
+  { id: 5, title: 'Understanding Web Accessibility', category: 'Tutorials', views: 6540, comments: 31, published: '2023-11-15', status: 'Published' },
+]
+
+const recentComments = [
+  { id: 1, author: 'John Smith', email: 'john.smith@example.com', content: "Great article! This helped me solve a problem I've been stuck on for days.", post: '10 Tips for Better Code Quality', date: '2023-12-01', status: 'Approved' },
+  { id: 2, author: 'Sarah Johnson', email: 'sarah.j@example.com', content: 'I disagree with point #3. In my experience, that approach causes more problems than it solves.', post: 'The Future of JavaScript Frameworks', date: '2023-12-01', status: 'Pending' },
+  { id: 3, author: 'Michael Brown', email: 'mbrown@example.com', content: 'Thanks for the tutorial! Could you elaborate more on the setup process?', post: 'Getting Started with STX', date: '2023-11-30', status: 'Approved' },
+  { id: 4, author: 'Emily Davis', email: 'emily.davis@example.com', content: 'I found a typo in the third paragraph. It should be "their" not "there".', post: '10 Tips for Better Code Quality', date: '2023-11-30', status: 'Approved' },
+  { id: 5, author: 'David Wilson', email: 'dwilson@example.com', content: 'This review seems biased. Have you tried comparing it with the competition?', post: 'Review: Latest MacBook Pro', date: '2023-11-29', status: 'Spam' },
+]
+
+const draftPosts = [
+  { id: 6, title: 'Introduction to TypeScript', category: 'Tutorials', lastEdited: '2023-12-01', author: 'Jane Doe' },
+  { id: 7, title: 'Building a REST API with Node.js', category: 'Tutorials', lastEdited: '2023-11-29', author: 'John Smith' },
+  { id: 8, title: 'CSS Grid vs Flexbox', category: 'Tutorials', lastEdited: '2023-11-27', author: 'Jane Doe' },
+]
+
+const totalPosts = 127
+const totalViews = 256890
+const totalComments = 3427
+const averageEngagement = '4.2%'
+
+function commentStatusClass(status) {
+  const tone = status === 'Approved'
+    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+    : status === 'Spam'
+      ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
+      : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+  return `${tone} inline-flex items-center px-2 py-1 font-medium text-xs rounded-md`
+}
+
+function draftProgressWidth(id) {
+  if (id === 6) return '90%'
+  if (id === 7) return '65%'
+  return '40%'
+}
+
+function draftProgressLabel(id) {
+  if (id === 6) return 'Almost ready'
+  if (id === 7) return 'In progress'
+  return 'Just started'
+}
+
+// `timeRange` shadows the static `timeRanges` filter label list above.
+const timeRange = state('Last 30 days')
+
+const viewsData = {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  datasets: [{
+    label: 'Page Views',
+    backgroundColor: 'rgba(59, 130, 246, 0.2)',
+    borderColor: 'rgba(59, 130, 246, 1)',
+    borderWidth: 2,
+    pointBackgroundColor: 'rgba(59, 130, 246, 1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(59, 130, 246, 1)',
+    fill: true,
+    tension: 0.4,
+    data: [12500, 14200, 13800, 15600, 16800, 16200, 17500, 18200, 19100, 18600, 20100, 21500],
+  }],
+}
+
+const categoryData = {
+  labels: ['Technology', 'Tutorials', 'News', 'Reviews', 'Opinion'],
+  datasets: [{
+    backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(239, 68, 68, 0.8)', 'rgba(139, 92, 246, 0.8)'],
+    borderColor: ['rgba(59, 130, 246, 1)', 'rgba(16, 185, 129, 1)', 'rgba(245, 158, 11, 1)', 'rgba(239, 68, 68, 1)', 'rgba(139, 92, 246, 1)'],
+    borderWidth: 1,
+    data: [35, 25, 20, 15, 5],
+  }],
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: { legend: { display: false } },
+  scales: {
+    y: { beginAtZero: true, grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' } },
+    x: { grid: { display: false } },
+  },
+}
+
+const doughnutOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: { legend: { position: 'right', labels: { boxWidth: 15, padding: 15 } } },
+}
+
+let chartHandles: Array<{ destroy: () => void }> = []
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+  const views = useChart({ Chart: Ctor, id: 'content_views_chart', type: 'line', data: viewsData, options: chartOptions })
+  const category = useChart({ Chart: Ctor, id: 'content_category_chart', type: 'doughnut', data: categoryData, options: doughnutOptions })
+  chartHandles = [views.instance, category.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(c => c.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection