@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/inbox/activity.stx

@@ -0,0 +1,350 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Mail - Activity Dashboard')
+<div class="min-h-screen dark:bg-neutral-800">
+  <div class="flex h-screen">
+    <EmailSidebar :activeFolder="activeFolder" :folders="folders" :unreadCounts="unreadCounts" @update:active-folder="handleFolderChange" @compose="handleCompose" />
+
+    <div class="flex overflow-hidden flex-1 flex-col">
+      <div class="px-6 py-4 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+        <div class="flex items-center justify-between">
+          <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Email Activity</h1>
+          <div class="flex space-x-2">
+            <button @click="changeTimeRange('day')" class="px-3 py-1.5 text-sm font-medium rounded-md {{ timeRange() === 'day' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100' : 'text-gray-700 hover:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-600' }}">Day</button>
+            <button @click="changeTimeRange('week')" class="px-3 py-1.5 text-sm font-medium rounded-md {{ timeRange() === 'week' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100' : 'text-gray-700 hover:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-600' }}">Week</button>
+            <button @click="changeTimeRange('month')" class="px-3 py-1.5 text-sm font-medium rounded-md {{ timeRange() === 'month' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100' : 'text-gray-700 hover:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-600' }}">Month</button>
+            <button @click="changeTimeRange('year')" class="px-3 py-1.5 text-sm font-medium rounded-md {{ timeRange() === 'year' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100' : 'text-gray-700 hover:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-600' }}">Year</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 p-6">
+        @foreach(stats as stat, index)
+          <div class="p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <div class="flex items-center">
+              <div class="flex-shrink-0 p-3 bg-gray-100 dark:bg-neutral-600 rounded-md">
+                <i class="text-xl {{ stat.icon }}"></i>
+              </div>
+              <div class="ml-4">
+                <p class="font-medium text-gray-500 text-sm dark:text-neutral-400">{{ stat.name }}</p>
+                <div class="flex items-baseline">
+                  <p class="font-semibold text-2xl text-gray-900 dark:text-white">{{ stat.value }}</p>
+                  <p class="ml-2 text-sm font-medium {{ stat.change.startsWith('+') ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ stat.change }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        @endforeach
+      </div>
+
+      <div class="overflow-y-auto flex-1 p-6 space-y-6">
+        <div class="p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">Email Volume</h2>
+          </div>
+          <div class="relative h-80">
+            <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="inbox_activity_volume"></canvas>
+          </div>
+        </div>
+
+        <div class="p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">Average Response Time</h2>
+          </div>
+          <div class="relative h-64">
+            <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="inbox_activity_response"></canvas>
+          </div>
+        </div>
+
+        <div class="grid gap-6 grid-cols-1 md:grid-cols-2">
+          <div class="p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">Email Categories</h2>
+            </div>
+            <div class="relative h-64">
+              <canvas id="inbox_activity_category"></canvas>
+            </div>
+          </div>
+
+          <div class="p-4 bg-white dark:bg-neutral-700 rounded-lg shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="font-medium text-gray-900 text-lg dark:text-neutral-100">Device Usage</h2>
+            </div>
+            <div class="relative h-64">
+              <canvas id="inbox_activity_device"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-700 rounded-lg shadow">
+          <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-neutral-600">
+            <h3 class="font-medium text-gray-900 text-lg dark:text-neutral-100">Recent Activity</h3>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-600">
+              <thead class="bg-gray-50 dark:bg-neutral-600">
+                <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">Action</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">Email</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">Time</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>
+                </tr>
+              </thead>
+              <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+                <tr>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 bg-blue-100 rounded-full">
+                        <i class="text-blue-600 i-hugeicons-mail-receive-02"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="font-medium text-gray-900 text-sm dark:text-white">Received Email</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-gray-900 text-sm dark:text-white">New Project Roadmap</div>
+                    <div class="text-gray-500 text-xs dark:text-neutral-400">From: Chris Breuer</div>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">10 minutes ago</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-100 bg-green-100 dark:bg-green-900 rounded-full">Delivered</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 bg-green-100 rounded-full">
+                        <i class="text-green-600 i-hugeicons-mail-send-02"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="font-medium text-gray-900 text-sm dark:text-white">Sent Email</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-gray-900 text-sm dark:text-white">Re: Design Review Scheduled</div>
+                    <div class="text-gray-500 text-xs dark:text-neutral-400">To: Blake</div>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">1 hour ago</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-100 bg-green-100 dark:bg-green-900 rounded-full">Sent</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 bg-red-100 rounded-full">
+                        <i class="text-red-600 i-hugeicons-spam"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="font-medium text-gray-900 text-sm dark:text-white">Spam Detected</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-gray-900 text-sm dark:text-white">Special Offer: Limited Time</div>
+                    <div class="text-gray-500 text-xs dark:text-neutral-400">From: marketing@example.com</div>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">3 hours ago</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex px-2 font-semibold leading-5 text-red-800 text-xs dark:text-red-100 bg-red-100 dark:bg-red-900 rounded-full">Blocked</span>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="flex flex-shrink-0 items-center justify-center h-8 w-8 bg-yellow-100 rounded-full">
+                        <i class="text-yellow-600 i-hugeicons-star"></i>
+                      </div>
+                      <div class="ml-4">
+                        <div class="font-medium text-gray-900 text-sm dark:text-white">Starred Email</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-gray-900 text-sm dark:text-white">Weekly Team Update</div>
+                    <div class="text-gray-500 text-xs dark:text-neutral-400">From: Sarah Johnson</div>
+                  </td>
+                  <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">Yesterday</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="inline-flex px-2 font-semibold leading-5 text-blue-800 text-xs dark:text-blue-100 bg-blue-100 dark:bg-blue-900 rounded-full">Read</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ data: number[] }> } }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const folders = [
+  { id: 'inbox', name: 'Inbox', icon: 'inbox' },
+  { id: 'starred', name: 'Starred', icon: 'star' },
+  { id: 'sent', name: 'Sent', icon: 'mail-send-01' },
+  { id: 'drafts', name: 'Drafts', icon: 'license-draft' },
+  { id: 'archive', name: 'Archive', icon: 'archive' },
+  { id: 'spam', name: 'Spam', icon: 'spam' },
+  { id: 'trash', name: 'Trash', icon: 'waste' },
+]
+
+const unreadCounts = {
+  inbox: 2,
+  starred: 1,
+  sent: 0,
+  drafts: 0,
+  archive: 0,
+  spam: 1,
+  trash: 0,
+}
+
+const stats = [
+  { name: 'Total Emails', value: '1,284', change: '+12.3%', icon: 'i-hugeicons-mail-02 text-blue-500' },
+  { name: 'Average Response Time', value: '28 min', change: '-8.1%', icon: 'i-hugeicons-clock-01 text-green-500' },
+  { name: 'Spam Detected', value: '124', change: '+3.2%', icon: 'i-hugeicons-spam text-red-500' },
+  { name: 'Attachments', value: '256', change: '+18.7%', icon: 'i-hugeicons-attachment-01 text-purple-500' },
+]
+
+const timeRange = state('week')
+const activeFolder = state('inbox')
+const isLoading = state(false)
+
+let charts: ChartLike[] = []
+
+const lineChartOptions = {
+  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" } } },
+    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: { mode: 'index', intersect: false },
+  },
+}
+
+const barChartOptions = {
+  ...lineChartOptions,
+  plugins: { ...lineChartOptions.plugins, legend: { ...lineChartOptions.plugins.legend, display: false } },
+}
+
+const doughnutChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: true, position: 'right', labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 } },
+    tooltip: { mode: 'index', intersect: false },
+  },
+}
+
+function rangeMeta(): { labels: string[], dataPoints: number } {
+  const range = timeRange()
+  if (range === 'day')
+    return { labels: Array.from({ length: 24 }, (_, i) => `${i}:00`), dataPoints: 24 }
+  if (range === 'week')
+    return { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], dataPoints: 7 }
+  if (range === 'month')
+    return { labels: Array.from({ length: 30 }, (_, i) => `${i + 1}`), dataPoints: 30 }
+  return { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], dataPoints: 12 }
+}
+
+function getEmailActivityData() {
+  const { labels, dataPoints } = rangeMeta()
+  return {
+    labels,
+    datasets: [
+      { label: 'Received', data: Array.from({ length: dataPoints }, () => Math.floor(Math.random() * 50) + 20), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true },
+      { label: 'Sent', data: Array.from({ length: dataPoints }, () => Math.floor(Math.random() * 30) + 10), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'Spam', data: Array.from({ length: dataPoints }, () => Math.floor(Math.random() * 10)), borderColor: 'rgb(239, 68, 68)', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true },
+    ],
+  }
+}
+
+function getResponseTimeData() {
+  const { labels, dataPoints } = rangeMeta()
+  return {
+    labels,
+    datasets: [{ label: 'Response Time (minutes)', data: Array.from({ length: dataPoints }, () => Math.floor(Math.random() * 60) + 5), backgroundColor: 'rgba(99, 102, 241, 0.8)' }],
+  }
+}
+
+const emailCategoryData = {
+  labels: ['Work', 'Personal', 'Promotions', 'Updates', 'Forums'],
+  datasets: [{ data: [45, 25, 15, 10, 5], backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(99, 102, 241, 0.8)', 'rgba(239, 68, 68, 0.8)'], borderWidth: 0 }],
+}
+
+const deviceUsageData = {
+  labels: ['Desktop', 'Mobile', 'Tablet'],
+  datasets: [{ data: [65, 30, 5], backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(245, 158, 11, 0.8)'], borderWidth: 0 }],
+}
+
+async function changeTimeRange(newRange: string): Promise<void> {
+  timeRange.set(newRange)
+  isLoading.set(true)
+  await new Promise(resolve => setTimeout(resolve, 500))
+  if (charts[0]) {
+    const data = getEmailActivityData()
+    charts[0].data.labels = data.labels
+    data.datasets.forEach((ds, i) => {
+      if (charts[0]?.data.datasets[i])
+        charts[0].data.datasets[i].data = ds.data
+    })
+    charts[0].update()
+  }
+  if (charts[1]) {
+    const data = getResponseTimeData()
+    charts[1].data.labels = data.labels
+    if (charts[1].data.datasets[0])
+      charts[1].data.datasets[0].data = data.datasets[0]?.data ?? []
+    charts[1].update()
+  }
+  isLoading.set(false)
+}
+
+function handleFolderChange(folder: string): void {
+  activeFolder.set(folder)
+  navigate(`/inbox?folder=${encodeURIComponent(folder)}`)
+}
+
+function handleCompose(): void {
+  navigate('/inbox?compose=true')
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const volume = useChart({ Chart: Ctor, id: 'inbox_activity_volume', type: 'line', data: getEmailActivityData(), options: lineChartOptions })
+  const response = useChart({ Chart: Ctor, id: 'inbox_activity_response', type: 'bar', data: getResponseTimeData(), options: barChartOptions })
+  const category = useChart({ Chart: Ctor, id: 'inbox_activity_category', type: 'doughnut', data: emailCategoryData, options: doughnutChartOptions })
+  const device = useChart({ Chart: Ctor, id: 'inbox_activity_device', type: 'doughnut', data: deviceUsageData, options: doughnutChartOptions })
+
+  charts = [volume.instance, response.instance, category.instance, device.instance].filter((c): c is ChartLike => c !== null)
+  await new Promise(resolve => setTimeout(resolve, 500))
+  isLoading.set(false)
+})
+
+onDestroy(() => {
+  charts.forEach(c => c.destroy())
+  charts = []
+})
+</script>
+
+@endsection