Implement academy analytics, billing, and web stories updates

resources/js/components/academy/billing/AccessBadge.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const LABELS = {
+  free: 'Free',
+  creator: 'Creator',
+  pro: 'Pro',
+  admin: 'Admin',
+}
+
+const CLASSES = {
+  free: 'border-white/12 bg-white/[0.06] text-slate-200',
+  creator: 'border-amber-300/25 bg-amber-300/12 text-amber-100',
+  pro: 'border-sky-300/25 bg-sky-300/12 text-sky-100',
+  admin: 'border-emerald-300/25 bg-emerald-300/12 text-emerald-100',
+}
+
+export default function AccessBadge({ tier = 'free', className = '' }) {
+  const normalizedTier = typeof tier === 'string' ? tier.toLowerCase() : 'free'
+  const label = LABELS[normalizedTier] || 'Free'
+  const tone = CLASSES[normalizedTier] || CLASSES.free
+
+  return (
+    <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${tone} ${className}`.trim()}>
+      {label}
+    </span>
+  )
+}