99 lines
5.3 KiB
JavaScript
99 lines
5.3 KiB
JavaScript
import React from 'react'
|
|
import { Head } from '@inertiajs/react'
|
|
import AdminLayout from '../../../Layouts/AdminLayout'
|
|
import AnalyticsNav from './AnalyticsNav'
|
|
|
|
function MetricCell({ value, suffix = '' }) {
|
|
return <span className="font-semibold text-white">{value}{suffix}</span>
|
|
}
|
|
|
|
function StatCard({ label, value, suffix = '' }) {
|
|
return (
|
|
<div className="rounded-2xl border border-white/[0.08] bg-white/[0.04] p-5">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{label}</p>
|
|
<p className="mt-3 text-3xl font-bold text-white">{value}{suffix}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function AcademyAnalyticsContent({ nav = [], range, title, subtitle, summary = null, rows = [] }) {
|
|
return (
|
|
<AdminLayout title={title} subtitle={subtitle}>
|
|
<Head title={`Admin · ${title}`} />
|
|
|
|
<div className="space-y-6">
|
|
<AnalyticsNav items={nav} />
|
|
|
|
<div className="rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Range</p>
|
|
<p className="mt-3 text-sm text-slate-300">{range?.from} to {range?.to}</p>
|
|
</div>
|
|
|
|
{summary ? (
|
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
<StatCard label="Views" value={Number(summary.views || 0).toLocaleString()} />
|
|
<StatCard label="Unique Visitors" value={Number(summary.uniqueVisitors || 0).toLocaleString()} />
|
|
<StatCard label="Engaged Views" value={Number(summary.engagedViews || 0).toLocaleString()} />
|
|
<StatCard label="Engagement Rate" value={Number(summary.engagementRate || 0).toLocaleString()} suffix="%" />
|
|
<StatCard label="Avg Engaged Seconds" value={Number(summary.avgEngagedSeconds || 0).toLocaleString()} suffix="s" />
|
|
<StatCard label="Scroll 50%" value={Number(summary.scroll50 || 0).toLocaleString()} />
|
|
<StatCard label="Scroll 100%" value={Number(summary.scroll100 || 0).toLocaleString()} />
|
|
<StatCard label="Deep Scroll Rate" value={Number(summary.deepScrollRate || 0).toLocaleString()} suffix="%" />
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="overflow-hidden rounded-[28px] border border-white/[0.08] bg-white/[0.03]">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="border-b border-white/[0.08] bg-black/20 text-[11px] uppercase tracking-[0.18em] text-slate-500">
|
|
<tr>
|
|
<th className="px-4 py-3">Title</th>
|
|
<th className="px-4 py-3">Type</th>
|
|
<th className="px-4 py-3">Access</th>
|
|
<th className="px-4 py-3">Views</th>
|
|
<th className="px-4 py-3">Unique</th>
|
|
<th className="px-4 py-3">Engaged</th>
|
|
<th className="px-4 py-3">Likes</th>
|
|
<th className="px-4 py-3">Saves</th>
|
|
<th className="px-4 py-3">Copies</th>
|
|
<th className="px-4 py-3">Starts</th>
|
|
<th className="px-4 py-3">Completions</th>
|
|
<th className="px-4 py-3">Upgrade Clicks</th>
|
|
<th className="px-4 py-3">Popularity</th>
|
|
<th className="px-4 py-3">Trend</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.length ? rows.map((row) => (
|
|
<tr key={`${row.content_type}-${row.content_id || 'none'}`} className="border-b border-white/[0.06] align-top text-slate-300">
|
|
<td className="px-4 py-4">
|
|
<p className="font-semibold text-white">{row.title}</p>
|
|
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">ID {row.content_id || 'n/a'}</p>
|
|
</td>
|
|
<td className="px-4 py-4">{row.content_type_label}</td>
|
|
<td className="px-4 py-4">{row.access_level || 'n/a'}</td>
|
|
<td className="px-4 py-4"><MetricCell value={row.views} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.unique_visitors} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.engaged_views} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.likes} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.saves} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.prompt_copies} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.starts} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.completions} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.upgrade_clicks} /></td>
|
|
<td className="px-4 py-4"><MetricCell value={row.popularity_score} /></td>
|
|
<td className="px-4 py-4">{row.trend}</td>
|
|
</tr>
|
|
)) : (
|
|
<tr>
|
|
<td colSpan={14} className="px-4 py-10 text-center text-slate-400">No rollup data available yet for this view.</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
} |