frontend: dashboard home — brand selector + system status

frontend/src/app/dashboard/page.tsx

@@ -0,0 +1,98 @@
+import Link from 'next/link'
+
+const brands = [
+  { slug: 'alsalama', name: 'Al Salama Medical', platform: 'Google Ads', status: 'active' },
+  { slug: 'asktam',   name: 'Ask Tam',           platform: 'Google Ads', status: 'active' },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-[#0a0a0f] text-[#e2e2f0]">
+      {/* Top nav */}
+      <nav className="border-b border-[#1e1e2e] px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-7 h-7 rounded-md bg-indigo-500 flex items-center justify-center text-white font-bold text-sm">م</div>
+          <span className="font-semibold text-lg tracking-tight">Manar</span>
+          <span className="text-xs text-[#6b6b8a] ml-1">منار</span>
+        </div>
+        <div className="flex items-center gap-4 text-sm text-[#6b6b8a]">
+          <span>Super Admin</span>
+          <div className="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-semibold">T</div>
+        </div>
+      </nav>
+
+      <div className="max-w-6xl mx-auto px-6 py-10">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-semibold text-white mb-1">Brands</h1>
+          <p className="text-[#6b6b8a] text-sm">Select a brand to view its paid media dashboard.</p>
+        </div>
+
+        {/* Brand cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
+          {brands.map((brand) => (
+            <Link
+              key={brand.slug}
+              href={`/dashboard/${brand.slug}`}
+              className="group block bg-[#12121a] border border-[#1e1e2e] rounded-xl p-5 hover:border-indigo-500/60 hover:bg-[#14141f] transition-all duration-150"
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div className="w-10 h-10 rounded-lg bg-indigo-500/15 border border-indigo-500/25 flex items-center justify-center">
+                  <span className="text-indigo-400 font-bold text-lg">{brand.name[0]}</span>
+                </div>
+                <span className="text-xs bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">
+                  {brand.status}
+                </span>
+              </div>
+              <div className="font-medium text-white text-sm mb-1">{brand.name}</div>
+              <div className="text-[#6b6b8a] text-xs">{brand.platform}</div>
+            </Link>
+          ))}
+
+          {/* Add brand CTA */}
+          <div className="bg-[#12121a] border border-dashed border-[#1e1e2e] rounded-xl p-5 flex flex-col items-center justify-center gap-2 text-[#6b6b8a] hover:border-indigo-500/40 hover:text-indigo-400 transition-all cursor-pointer">
+            <span className="text-2xl">+</span>
+            <span className="text-xs">Add Brand</span>
+          </div>
+        </div>
+
+        {/* System status */}
+        <div className="bg-[#12121a] border border-[#1e1e2e] rounded-xl p-5">
+          <h2 className="text-sm font-medium text-white mb-4">System Status</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            {[
+              { label: 'ClickHouse',   status: 'live' },
+              { label: 'Core DB',      status: 'live' },
+              { label: 'Tenants DB',   status: 'live' },
+              { label: 'MCP Server',   status: 'building' },
+            ].map(({ label, status }) => (
+              <div key={label} className="flex items-center gap-2 text-xs">
+                <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                  status === 'live'     ? 'bg-emerald-400' :
+                  status === 'building' ? 'bg-amber-400'   :
+                                         'bg-red-400'
+                }`} />
+                <span className="text-[#6b6b8a]">{label}</span>
+                <span className={`ml-auto font-mono ${
+                  status === 'live'     ? 'text-emerald-400' :
+                  status === 'building' ? 'text-amber-400'   :
+                                         'text-red-400'
+                }`}>{status}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Capabilities */}
+        <div className="mt-6 grid grid-cols-5 gap-3">
+          {['Monitor', 'Diagnose', 'Recommend', 'Execute', 'Report'].map((cap, i) => (
+            <div key={cap} className="bg-[#12121a] border border-[#1e1e2e] rounded-lg px-3 py-2 text-center">
+              <div className="text-[10px] text-[#6b6b8a] mb-0.5">0{i + 1}</div>
+              <div className="text-xs font-medium text-white">{cap}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}