optimizations

resources/js/Pages/Studio/StudioCardAnalytics.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Link, usePage } from '@inertiajs/react'
+import StudioLayout from '../../Layouts/StudioLayout'
+
+const kpiItems = [
+  { key: 'views', label: 'Views', icon: 'fa-eye', color: 'text-emerald-400' },
+  { key: 'likes', label: 'Likes', icon: 'fa-heart', color: 'text-pink-400' },
+  { key: 'saves', label: 'Saves', icon: 'fa-bookmark', color: 'text-amber-400' },
+  { key: 'remixes', label: 'Remixes', icon: 'fa-code-branch', color: 'text-cyan-400' },
+  { key: 'comments', label: 'Comments', icon: 'fa-comment', color: 'text-blue-400' },
+  { key: 'challenge_entries', label: 'Challenges', icon: 'fa-trophy', color: 'text-violet-400' },
+]
+
+const secondaryItems = [
+  { key: 'favorites', label: 'Favorites', icon: 'fa-star' },
+  { key: 'shares', label: 'Shares', icon: 'fa-share-nodes' },
+  { key: 'downloads', label: 'Downloads', icon: 'fa-download' },
+]
+
+export default function StudioCardAnalytics() {
+  const { props } = usePage()
+  const { card, analytics } = props
+
+  return (
+    <StudioLayout title={`Analytics: ${card?.title || 'Nova Card'}`}>
+      <Link href="/studio/cards" className="mb-6 inline-flex items-center gap-2 text-sm text-slate-400 transition-colors hover:text-white">
+        <i className="fa-solid fa-arrow-left" />
+        Back to Cards
+      </Link>
+
+      <div className="mb-8 flex items-center gap-4 rounded-2xl border border-white/10 bg-nova-900/60 p-4">
+        {card?.preview_url ? <img src={card.preview_url} alt={card.title} className="h-20 w-20 rounded-xl object-cover bg-nova-800" /> : null}
+        <div>
+          <h2 className="text-lg font-bold text-white">{card?.title}</h2>
+          <p className="mt-1 text-xs text-slate-500">/{card?.slug}</p>
+          <p className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-400">{card?.status} • {card?.visibility}</p>
+        </div>
+      </div>
+
+      <div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
+        {kpiItems.map((item) => (
+          <div key={item.key} className="rounded-2xl border border-white/10 bg-nova-900/60 p-5">
+            <div className="mb-2 flex items-center gap-2">
+              <i className={`fa-solid ${item.icon} ${item.color}`} />
+              <span className="text-xs font-medium uppercase tracking-wider text-slate-400">{item.label}</span>
+            </div>
+            <p className="text-2xl font-bold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
+        <div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Ranking signals</h3>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Trending score</div>
+              <div className="mt-2 text-3xl font-bold tabular-nums text-white">{Number(analytics?.trending_score ?? 0).toFixed(2)}</div>
+            </div>
+            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+              <div className="text-xs uppercase tracking-[0.18em] text-slate-400">Last engaged</div>
+              <div className="mt-2 text-sm text-white">{analytics?.last_engaged_at || 'No activity yet'}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
+          <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Secondary metrics</h3>
+          <div className="space-y-3">
+            {secondaryItems.map((item) => (
+              <div key={item.key} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
+                <div className="flex items-center gap-2 text-sm text-slate-300">
+                  <i className={`fa-solid ${item.icon} text-slate-500`} />
+                  {item.label}
+                </div>
+                <div className="text-base font-semibold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </StudioLayout>
+  )
+}