ui: dashboard redesign, member management, dark mode fixes

- Simplified dashboard using PageHeader/page-layout
- Fixed dark mode live session banner
- Added AddMemberDialog component for study team management
- Study page now has working member add/remove
- Fixed toast imports to use sonner

src/app/dashboard/page.tsx

@@ -15,20 +15,13 @@ import {
   ChevronRight,
   Bot,
   Radio,
-  BarChart3,
-  Settings,
+  Building,
 } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { PageHeader } from "~/components/ui/page-layout";
 import { api } from "~/trpc/react";
 
 export default function DashboardPage() {
@@ -42,7 +35,6 @@ export default function DashboardPage() {
 
   const { data: recentTrials } = api.trials.list.useQuery({
     limit: 5,
-    status: undefined,
   });
 
   const { data: liveTrials } = api.dashboard.getLiveTrials.useQuery(
@@ -59,62 +51,57 @@ export default function DashboardPage() {
     return "Good evening";
   })();
 
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5 p-6 md:p-8">
-      {/* Header */}
-      <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 className="text-4xl font-bold tracking-tight">
-            {greeting}, {userName.split(" ")[0]}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            Ready to run your next session?
-          </p>
-        </div>
+  const firstStudy = userStudies?.studies?.[0];
 
-        <div className="flex gap-3">
-          <Button variant="outline" asChild>
-            <Link href="/studies/new">
-              <FlaskConical className="mr-2 h-4 w-4" />
-              New Study
-            </Link>
-          </Button>
-          <Button asChild className="glow-teal">
-            <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/trials/new` : "/studies/new"}>
-              <Play className="mr-2 h-4 w-4" />
-              Start Trial
-            </Link>
-          </Button>
-        </div>
-      </div>
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <PageHeader
+        title={`${greeting}, ${userName.split(" ")[0]}`}
+        description="Ready to run your next session?"
+        icon={Bot}
+        actions={
+          <div className="flex gap-2">
+            <Button variant="outline" asChild>
+              <Link href="/studies/new">
+                <Plus className="mr-2 h-4 w-4" />
+                New Study
+              </Link>
+            </Button>
+            <Button asChild className="glow-teal">
+              <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/trials/new` : "/studies/new"}>
+                <Play className="mr-2 h-4 w-4" />
+                Start Trial
+              </Link>
+            </Button>
+          </div>
+        }
+      />
 
       {/* Live Trials Banner */}
       {liveTrials && liveTrials.length > 0 && (
-        <Card className="border-red-200 bg-red-50/50 mb-6 dark:border-red-900 dark:bg-red-900/20">
-          <CardContent className="flex items-center gap-4 py-4">
-            <div className="relative">
-              <Radio className="h-8 w-8 text-red-600 animate-pulse" />
-              <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-500 animate-ping" />
-            </div>
-            <div className="flex-1">
-              <p className="font-semibold text-red-600 dark:text-red-400">
-                {liveTrials.length} Active Session{liveTrials.length > 1 ? "s" : ""}
-              </p>
-              <p className="text-sm text-red-600/70 dark:text-red-400/70">
-                {liveTrials.map((t) => t.participantCode).join(", ")}
-              </p>
-            </div>
-            <Button size="sm" variant="secondary" asChild>
-              <Link href={`/studies/${liveTrials?.[0]?.studyId}/trials/${liveTrials?.[0]?.id}/wizard`}>
-                View <ChevronRight className="ml-1 h-4 w-4" />
-              </Link>
-            </Button>
-          </CardContent>
-        </Card>
+        <div className="bg-destructive/10 border-border flex items-center gap-4 rounded-lg border p-4">
+          <div className="relative">
+            <Radio className="h-8 w-8 text-destructive animate-pulse" />
+          </div>
+          <div className="flex-1">
+            <p className="font-semibold">
+              {liveTrials.length} Active Session{liveTrials.length > 1 ? "s" : ""}
+            </p>
+            <p className="text-muted-foreground text-sm">
+              {liveTrials.map((t) => t.participantCode).join(", ")}
+            </p>
+          </div>
+          <Button size="sm" variant="secondary" asChild>
+            <Link href={`/studies/${liveTrials?.[0]?.studyId}/trials/${liveTrials?.[0]?.id}/wizard`}>
+              View <ChevronRight className="ml-1 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
       )}
 
       {/* Stats Row */}
-      <div className="mb-8 grid gap-4 md:grid-cols-4">
+      <div className="grid gap-4 md:grid-cols-4">
         <StatCard
           label="Active Trials"
           value={stats?.activeTrials ?? 0}
@@ -134,9 +121,9 @@ export default function DashboardPage() {
           color="blue"
         />
         <StatCard
-          label="Total Participants"
+          label="Scheduled"
           value={stats?.scheduledTrials ?? 0}
-          icon={Users}
+          icon={Clock}
           color="violet"
         />
       </div>
@@ -144,22 +131,19 @@ export default function DashboardPage() {
       {/* Main Grid */}
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Studies List */}
-        <Card className="lg:col-span-2">
-          <CardHeader className="flex flex-row items-center justify-between">
-            <div>
-              <CardTitle className="flex items-center gap-2">
-                <FlaskConical className="h-5 w-5 text-primary" />
-                Your Studies
-              </CardTitle>
-              <CardDescription>Recent studies and quick access</CardDescription>
+        <div className="bg-card rounded-lg border lg:col-span-2">
+          <div className="flex items-center justify-between border-b px-6 py-4">
+            <div className="flex items-center gap-3">
+              <FlaskConical className="text-primary h-5 w-5" />
+              <h2 className="font-semibold">Your Studies</h2>
             </div>
             <Button variant="ghost" size="sm" asChild>
               <Link href="/studies">
                 View all <ChevronRight className="ml-1 h-4 w-4" />
               </Link>
             </Button>
-          </CardHeader>
-          <CardContent>
+          </div>
+          <div className="p-6">
             <div className="space-y-3">
               {userStudies?.studies?.slice(0, 5).map((study) => (
                 <Link
@@ -204,17 +188,17 @@ export default function DashboardPage() {
                 </div>
               )}
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
 
         {/* Quick Links & Recent */}
         <div className="space-y-6">
           {/* Quick Actions */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg">Quick Actions</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2">
+          <div className="bg-card rounded-lg border">
+            <div className="border-b px-6 py-4">
+              <h2 className="font-semibold">Quick Actions</h2>
+            </div>
+            <div className="space-y-2 p-4">
               <Button variant="outline" className="w-full justify-start" asChild>
                 <Link href="/studies/new">
                   <Plus className="mr-3 h-4 w-4" />
@@ -222,35 +206,35 @@ export default function DashboardPage() {
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/experiments/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/experiments/new` : "/studies"}>
                   <FlaskConical className="mr-3 h-4 w-4" />
                   Design Experiment
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/participants/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/participants/new` : "/studies"}>
                   <Users className="mr-3 h-4 w-4" />
                   Add Participant
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/trials/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/trials/new` : "/studies"}>
                   <Play className="mr-3 h-4 w-4" />
                   Start Trial
                 </Link>
               </Button>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
 
           {/* Recent Trials */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-lg">
-                <Clock className="h-4 w-4" />
-                Recent Trials
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
+          <div className="bg-card rounded-lg border">
+            <div className="flex items-center justify-between border-b px-6 py-4">
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-muted-foreground" />
+                <h2 className="font-semibold">Recent Trials</h2>
+              </div>
+            </div>
+            <div className="p-4">
               <ScrollArea className="h-[200px]">
                 <div className="space-y-3">
                   {recentTrials?.slice(0, 5).map((trial) => (
@@ -292,8 +276,8 @@ export default function DashboardPage() {
                   )}
                 </div>
               </ScrollArea>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -312,15 +296,15 @@ function StatCard({
   color: "teal" | "emerald" | "blue" | "violet";
 }) {
   const colorClasses = {
-    teal: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+    teal: "bg-primary/10 text-primary",
     emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
     blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
     violet: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
   };
 
   return (
-    <Card>
-      <CardContent className="flex items-center gap-4 p-6">
+    <div className="bg-card rounded-lg border p-6">
+      <div className="flex items-center gap-4">
         <div className={`rounded-full p-3 ${colorClasses[color]}`}>
           <Icon className="h-6 w-6" />
         </div>
@@ -328,7 +312,7 @@ function StatCard({
           <p className="text-3xl font-bold">{value}</p>
           <p className="text-muted-foreground text-sm">{label}</p>
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }