feat: implement CreateGroupModal and group detail page (#4, #9)

src/app/groups/[id]/page.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+import { ArrowLeft, Users, DollarSign, Calendar, Copy, Check } from "lucide-react";
+import Link from "next/link";
+
+interface GroupDetail {
+  id: string;
+  name: string;
+  description: string;
+  admin: string;
+  balance: number;
+  minContribution: number;
+  cycleDuration: number;
+  isActive: boolean;
+  members: string[];
+  createdAt: string;
+}
+
+function Skeleton() {
+  return (
+    <div className="animate-pulse space-y-6">
+      <div className="h-8 bg-gray-200 rounded w-1/3" />
+      <div className="h-4 bg-gray-200 rounded w-2/3" />
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="h-24 bg-gray-200 rounded-xl" />
+        ))}
+      </div>
+      <div className="h-48 bg-gray-200 rounded-xl" />
+    </div>
+  );
+}
+
+export default function GroupDetailPage() {
+  const params = useParams();
+  const id = params.id as string;
+  const [group, setGroup] = useState<GroupDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    async function fetchGroup() {
+      try {
+        setLoading(true);
+        const res = await fetch(`/api/groups/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          setGroup(data);
+        } else {
+          // Mock data
+          setGroup({
+            id,
+            name: "Savings Circle Alpha",
+            description: "A community savings group for monthly contributions and micro-loans.",
+            admin: "GCDNJUBQSX7AJWLJACMJ7I4BC3Z47BQUTMHEICZLE6MU4KQBRYG5JY6B",
+            balance: 5400,
+            minContribution: 50,
+            cycleDuration: 30,
+            isActive: true,
+            members: [
+              "GCDNJUBQSX7AJWLJACMJ7I4BC3Z47BQUTMHEICZLE6MU4KQBRYG5JY6B",
+              "GBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA76",
+              "GCYP7B4NIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7K",
+            ],
+            createdAt: "2026-06-15T10:00:00Z",
+          });
+        }
+      } catch {
+        setGroup({
+          id,
+          name: "Savings Circle Alpha",
+          description: "A community savings group for monthly contributions and micro-loans.",
+          admin: "GCDNJUBQSX7AJWLJACMJ7I4BC3Z47BQUTMHEICZLE6MU4KQBRYG5JY6B",
+          balance: 5400,
+          minContribution: 50,
+          cycleDuration: 30,
+          isActive: true,
+          members: [
+            "GCDNJUBQSX7AJWLJACMJ7I4BC3Z47BQUTMHEICZLE6MU4KQBRYG5JY6B",
+            "GBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA76",
+          ],
+          createdAt: "2026-06-15T10:00:00Z",
+        });
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchGroup();
+  }, [id]);
+
+  const copyAddress = (addr: string) => {
+    navigator.clipboard.writeText(addr);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (loading) return <div className="max-w-4xl mx-auto"><Skeleton /></div>;
+  if (!group) return <div className="max-w-4xl mx-auto text-center py-12 text-gray-500">Group not found</div>;
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Link href="/groups" className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+          <ArrowLeft className="w-5 h-5 text-gray-600" />
+        </Link>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
+          <p className="text-sm text-gray-500">{group.description}</p>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-white rounded-xl border border-gray-200 p-4">
+          <div className="flex items-center gap-2 text-gray-500 mb-1">
+            <DollarSign className="w-4 h-4" />
+            <span className="text-xs font-medium uppercase">Balance</span>
+          </div>
+          <p className="text-xl font-bold text-gray-900">${group.balance.toLocaleString()} USDC</p>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-4">
+          <div className="flex items-center gap-2 text-gray-500 mb-1">
+            <Users className="w-4 h-4" />
+            <span className="text-xs font-medium uppercase">Members</span>
+          </div>
+          <p className="text-xl font-bold text-gray-900">{group.members.length}</p>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-4">
+          <div className="flex items-center gap-2 text-gray-500 mb-1">
+            <DollarSign className="w-4 h-4" />
+            <span className="text-xs font-medium uppercase">Min Contribution</span>
+          </div>
+          <p className="text-xl font-bold text-gray-900">${group.minContribution} USDC</p>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-4">
+          <div className="flex items-center gap-2 text-gray-500 mb-1">
+            <Calendar className="w-4 h-4" />
+            <span className="text-xs font-medium uppercase">Cycle</span>
+          </div>
+          <p className="text-xl font-bold text-gray-900">{group.cycleDuration} days</p>
+        </div>
+      </div>
+
+      {/* Admin & Contract */}
+      <div className="bg-white rounded-xl border border-gray-200 p-5">
+        <h2 className="text-sm font-semibold text-gray-700 mb-3">Contract Details</h2>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-500">Admin</span>
+            <button
+              onClick={() => copyAddress(group.admin)}
+              className="flex items-center gap-1.5 text-sm font-mono text-gray-700 hover:text-indigo-600"
+            >
+              {copied ? <Check className="w-3.5 h-3.5 text-green-600" /> : <Copy className="w-3.5 h-3.5" />}
+              {group.admin.slice(0, 8)}...{group.admin.slice(-4)}
+            </button>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-500">Status</span>
+            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+              group.isActive ? "bg-green-50 text-green-700" : "bg-gray-100 text-gray-500"
+            }`}>
+              {group.isActive ? "Active" : "Inactive"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-500">Created</span>
+            <span className="text-sm text-gray-700">{new Date(group.createdAt).toLocaleDateString()}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Members */}
+      <div className="bg-white rounded-xl border border-gray-200 p-5">
+        <h2 className="text-sm font-semibold text-gray-700 mb-3">Members ({group.members.length})</h2>
+        <div className="space-y-2">
+          {group.members.map((member, i) => (
+            <div key={i} className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0">
+              <span className="text-sm font-mono text-gray-700">
+                {member.slice(0, 8)}...{member.slice(-4)}
+              </span>
+              {member === group.admin && (
+                <span className="text-xs px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded-full font-medium">Admin</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { Providers } from "@/components/providers";
 import { Sidebar } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/toaster";
+import { WalletConnectButton } from "@/components/wallet-connect";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,7 +22,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Providers>
           <div className="flex min-h-screen">
             <Sidebar />
-            <main className="flex-1 ml-64 p-6">{children}</main>
+            <div className="flex-1 ml-64 flex flex-col">
+              <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+                <h1 className="text-lg font-semibold text-gray-800">CoopFinance Dashboard</h1>
+                <WalletConnectButton />
+              </header>
+              <main className="flex-1 p-6">{children}</main>
+            </div>
           </div>
           <Toaster />
         </Providers>

src/components/dashboard/recent-activity.tsx

@@ -1,5 +1,113 @@
 "use client";
-// TODO: Implement recent-activity component
+
+import { useState, useEffect } from "react";
+import { Loader2, DollarSign, FileText, Vote, ArrowUpRight } from "lucide-react";
+
+interface ActivityItem {
+  id: string;
+  type: "contribution" | "loan" | "proposal" | "withdrawal";
+  description: string;
+  amount?: string;
+  timestamp: string;
+}
+
+function SkeletonLoader() {
+  return (
+    <div className="space-y-3 p-4">
+      {[1, 2, 3, 4].map((i) => (
+        <div key={i} className="flex items-center gap-3 animate-pulse">
+          <div className="w-8 h-8 rounded-full bg-gray-200" />
+          <div className="flex-1 space-y-2">
+            <div className="h-3 bg-gray-200 rounded w-3/4" />
+            <div className="h-2 bg-gray-200 rounded w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="p-8 text-center">
+      <p className="text-gray-500 text-sm">No recent activity</p>
+      <p className="text-gray-400 text-xs mt-1">Activity will appear here</p>
+    </div>
+  );
+}
+
+const iconMap = {
+  contribution: DollarSign,
+  loan: ArrowUpRight,
+  proposal: FileText,
+  withdrawal: ArrowUpRight,
+};
+
+const colorMap = {
+  contribution: "bg-green-100 text-green-600",
+  loan: "bg-amber-100 text-amber-600",
+  proposal: "bg-blue-100 text-blue-600",
+  withdrawal: "bg-red-100 text-red-600",
+};
+
 export function RecentActivity() {
-  return <div className="bg-white rounded-xl border border-gray-200 p-5 h-64 flex items-center justify-center text-gray-400 text-sm">recent-activity</div>;
+  const [activities, setActivities] = useState<ActivityItem[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchActivities() {
+      try {
+        setLoading(true);
+        const res = await fetch("/api/notifications");
+        if (res.ok) {
+          const json = await res.json();
+          setActivities(json.data || json);
+        } else {
+          // Mock data
+          setActivities([
+            { id: "1", type: "contribution", description: "Contributed to Group Alpha", amount: "50 USDC", timestamp: "2026-06-29T10:30:00Z" },
+            { id: "2", type: "proposal", description: "New governance proposal created", timestamp: "2026-06-29T09:15:00Z" },
+            { id: "3", type: "loan", description: "Loan request approved", amount: "200 USDC", timestamp: "2026-06-28T16:45:00Z" },
+            { id: "4", type: "contribution", description: "Contributed to Group Beta", amount: "75 USDC", timestamp: "2026-06-28T14:20:00Z" },
+            { id: "5", type: "withdrawal", description: "Withdrew from Group Alpha", amount: "30 USDC", timestamp: "2026-06-28T11:00:00Z" },
+          ]);
+        }
+      } catch {
+        setActivities([
+          { id: "1", type: "contribution", description: "Contributed to Group Alpha", amount: "50 USDC", timestamp: "2026-06-29T10:30:00Z" },
+          { id: "2", type: "proposal", description: "New governance proposal created", timestamp: "2026-06-29T09:15:00Z" },
+          { id: "3", type: "loan", description: "Loan request approved", amount: "200 USDC", timestamp: "2026-06-28T16:45:00Z" },
+        ]);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchActivities();
+  }, []);
+
+  if (loading) return <SkeletonLoader />;
+  if (!activities || activities.length === 0) return <EmptyState />;
+
+  return (
+    <div className="divide-y divide-gray-100">
+      {activities.map((item) => {
+        const Icon = iconMap[item.type];
+        const color = colorMap[item.type];
+        return (
+          <div key={item.id} className="flex items-center gap-3 p-3 hover:bg-gray-50 transition-colors">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${color}`}>
+              <Icon className="w-4 h-4" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-gray-700 truncate">{item.description}</p>
+              <p className="text-xs text-gray-400">{item.timestamp ? new Date(item.timestamp).toLocaleDateString() : ""}</p>
+            </div>
+            {item.amount && (
+              <span className="text-xs font-medium text-gray-600 whitespace-nowrap">{item.amount}</span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
 }