frontend: brand dashboard page with KPI cards

2026-05-06 18:23:56 +00:00
parent b58b69bc3b
commit b08b15eb4c
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+import Link from 'next/link'
+
+interface Params { brand_slug: string }
+
+export default async function BrandDashboard({ params }: { params: Params }) {
+  const { brand_slug } = params
+
+  return (
+    <div className="min-h-screen flex" style={{ background: 'var(--bg)' }}>
+      <aside className="w-56 border-r border-white/5 flex flex-col p-4 gap-1" style={{ background: 'var(--bg2)' }}>
+        <div className="flex items-center gap-2 px-2 py-3 mb-4">
+          <div className="w-8 h-8 rounded-lg bg-brand-600 flex items-center justify-center text-sm font-bold text-white">م</div>
+          <span className="font-semibold text-white text-sm">Manar</span>
+        </div>
+        <Link href="/dashboard" className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-slate-200 hover:bg-white/5 transition-colors">◉ Overview</Link>
+        <Link href={`/dashboard/${brand_slug}`} className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm bg-brand-600/15 text-brand-400 font-medium">📊 Performance</Link>
+        <Link href={`/dashboard/${brand_slug}/recommendations`} className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-slate-200 hover:bg-white/5 transition-colors">⚡ Recommendations</Link>
+        <Link href={`/dashboard/${brand_slug}/alerts`} className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-slate-200 hover:bg-white/5 transition-colors">🔔 Alerts</Link>
+        <div className="mt-auto pt-4 border-t border-white/5">
+          <div className="px-3 py-2 text-xs text-slate-600 font-mono">{brand_slug}</div>
+        </div>
+      </aside>
+
+      <main className="flex-1 p-8 overflow-auto">
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-white capitalize">{brand_slug.replace(/_/g, ' ')}</h1>
+            <p className="text-sm text-slate-500 mt-1">Google Ads · Last 30 days</p>
+          </div>
+          <div className="flex gap-2">
+            {['7d','30d','90d'].map(r => (
+              <button key={r} className="px-3 py-1.5 rounded-lg text-xs font-medium border border-white/10 text-slate-400 hover:border-white/20 hover:text-slate-200 transition-colors">{r}</button>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
+          <KpiCard label="Spend" value="—" unit="SAR" />
+          <KpiCard label="Clicks" value="—" unit="" />
+          <KpiCard label="Conversions" value="—" unit="" />
+          <KpiCard label="ROAS" value="—" unit="x" />
+        </div>
+
+        <div className="rounded-2xl border border-white/5 overflow-hidden mb-6" style={{ background: 'var(--bg2)' }}>
+          <div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
+            <h2 className="text-sm font-semibold text-white">Campaign Performance</h2>
+            <span className="text-xs text-slate-500">ClickHouse · manar.ad_metrics_hourly</span>
+          </div>
+          <div className="p-8 text-center">
+            <div className="text-4xl mb-3">📈</div>
+            <p className="text-sm text-slate-400 mb-2">Connect Google Ads to start seeing data</p>
+            <p className="text-xs text-slate-600">Metrics appear after first ingestion run</p>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-white/5 overflow-hidden" style={{ background: 'var(--bg2)' }}>
+          <div className="px-5 py-4 border-b border-white/5 flex items-center justify-between">
+            <h2 className="text-sm font-semibold text-white">Pending Recommendations</h2>
+            <Link href={`/dashboard/${brand_slug}/recommendations`} className="text-xs text-brand-400 hover:text-brand-300 transition-colors">View all →</Link>
+          </div>
+          <div className="p-8 text-center">
+            <div className="text-4xl mb-3">⚡</div>
+            <p className="text-sm text-slate-500">No pending recommendations</p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
+
+function KpiCard({ label, value, unit }: { label: string; value: string; unit: string }) {
+  return (
+    <div className="rounded-2xl border border-white/5 p-5" style={{ background: 'var(--bg2)' }}>
+      <p className="text-xs text-slate-500 mb-2">{label}</p>
+      <div className="flex items-end gap-1">
+        <span className="text-2xl font-bold text-white">{value}</span>
+        {unit && <span className="text-sm text-slate-500 mb-0.5">{unit}</span>}
+      </div>
+    </div>
+  )
+}