Initial commit: add .gitignore and README

frontend/components/dashboard/BalanceDisplay.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAccount, useBalance } from "wagmi";
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { gsap } from "gsap";
+import { formatBalance } from "@/lib/utils";
+
+export function BalanceDisplay() {
+  const { address } = useAccount();
+  const { data: balance, isLoading } = useBalance({ address });
+  const displayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (displayRef.current && balance) {
+      gsap.from(displayRef.current, {
+        opacity: 0,
+        y: 20,
+        duration: 0.8,
+        ease: "power3.out",
+      });
+    }
+  }, [balance]);
+
+  if (isLoading) {
+    return (
+      <div className="bg-gray-900 rounded-xl p-8 h-64 flex items-center justify-center">
+        <div className="text-gray-400">Loading balance...</div>
+      </div>
+    );
+  }
+
+  const balanceValue = balance?.value || BigInt(0);
+  const formattedBalance = formatBalance(balanceValue);
+
+  return (
+    <div ref={displayRef} className="relative bg-gray-900 rounded-xl p-8 overflow-hidden border border-gray-800">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]" />
+      <div className="relative z-10">
+        <h2 className="text-2xl font-semibold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+          Total Balance
+        </h2>
+        <div className="flex items-center gap-8">
+          <div className="flex-1">
+            <div className="text-5xl font-bold mb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+              {formattedBalance}
+            </div>
+            <div className="text-gray-400">{balance?.symbol || "ETH"}</div>
+          </div>
+          <div className="w-64 h-64">
+            <Canvas camera={{ position: [0, 0, 5] }}>
+              <ambientLight intensity={0.5} />
+              <pointLight position={[10, 10, 10]} intensity={1.5} />
+              <pointLight position={[-10, -10, -10]} intensity={0.5} color="#8b5cf6" />
+              <mesh>
+                <torusGeometry args={[1, 0.3, 16, 100]} />
+                <meshStandardMaterial 
+                  color="#3b82f6" 
+                  metalness={0.8}
+                  roughness={0.2}
+                  emissive="#1e40af"
+                  emissiveIntensity={0.2}
+                />
+              </mesh>
+              <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={2} />
+            </Canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

frontend/components/dashboard/Dashboard.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useAccount } from "wagmi";
+import { BalanceDisplay } from "./BalanceDisplay";
+import { QuickActions } from "./QuickActions";
+import { RecentActivity } from "./RecentActivity";
+import { PendingApprovals } from "./PendingApprovals";
+
+export function Dashboard() {
+  const { isConnected } = useAccount();
+
+  if (!isConnected) {
+    return (
+      <div className="text-center py-20">
+        <h2 className="text-2xl mb-4">Please connect your wallet to continue</h2>
+        <p className="text-gray-400">
+          Connect your Web3 wallet to access the treasury management dashboard
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <PendingApprovals />
+      <BalanceDisplay />
+      <QuickActions />
+      <RecentActivity />
+    </div>
+  );
+}
+

frontend/components/dashboard/PendingApprovals.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function PendingApprovals() {
+  const router = useRouter();
+  // TODO: Fetch pending approvals from contract/backend
+  const pendingCount = 0; // Placeholder
+
+  if (pendingCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="bg-yellow-900/20 border border-yellow-600 rounded-xl p-4 flex justify-between items-center">
+      <div>
+        <h3 className="font-semibold text-yellow-400">
+          {pendingCount} transaction{pendingCount !== 1 ? "s" : ""} pending approval
+        </h3>
+        <p className="text-sm text-yellow-300/70">
+          Review and approve pending transactions
+        </p>
+      </div>
+      <button
+        onClick={() => router.push("/approvals")}
+        className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg transition-colors"
+      >
+        Review
+      </button>
+    </div>
+  );
+}
+

frontend/components/dashboard/QuickActions.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { gsap } from "gsap";
+import { useEffect, useRef } from "react";
+
+const actions = [
+  { label: "Receive", path: "/receive", icon: "↓", color: "from-green-500 to-emerald-600" },
+  { label: "Send", path: "/send", icon: "↑", color: "from-blue-500 to-cyan-600" },
+  {
+    label: "Transfer",
+    path: "/transfer",
+    icon: "⇄",
+    color: "from-purple-500 to-pink-600",
+  },
+  {
+    label: "Approvals",
+    path: "/approvals",
+    icon: "✓",
+    color: "from-orange-500 to-red-600",
+  },
+];
+
+export function QuickActions() {
+  const router = useRouter();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const cards = containerRef.current.children;
+      gsap.from(cards, {
+        opacity: 0,
+        y: 30,
+        duration: 0.6,
+        stagger: 0.1,
+        ease: "power3.out",
+      });
+    }
+  }, []);
+
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold mb-4">Quick Actions</h2>
+      <div ref={containerRef} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {actions.map((action) => (
+          <button
+            key={action.path}
+            onClick={() => router.push(action.path)}
+            className={`relative bg-gradient-to-br ${action.color} rounded-xl p-6 hover:scale-105 transition-transform duration-200 overflow-hidden group`}
+          >
+            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
+            <div className="relative z-10">
+              <div className="text-4xl mb-2">{action.icon}</div>
+              <div className="text-xl font-semibold">{action.label}</div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+

frontend/components/dashboard/RecentActivity.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useRef, useMemo } from "react";
+import { formatAddress } from "@/lib/utils";
+import { format } from "date-fns";
+import { gsap } from "gsap";
+
+interface Transaction {
+  id: string;
+  proposalId: number;
+  to: string;
+  value: string;
+  status: "pending" | "executed" | "rejected";
+  createdAt: Date;
+}
+
+export function RecentActivity() {
+  // TODO: Fetch recent transactions from backend/indexer
+  const transactions = useMemo<Transaction[]>(() => [], []); // Placeholder
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current && transactions.length > 0) {
+      const items = containerRef.current.children;
+      gsap.from(items, {
+        opacity: 0,
+        x: -20,
+        duration: 0.5,
+        stagger: 0.1,
+        ease: "power2.out",
+      });
+    }
+  }, [transactions]);
+
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold mb-4">Recent Activity</h2>
+      <div className="bg-gray-900 rounded-xl p-6">
+        {transactions.length === 0 ? (
+          <div className="text-center py-8 text-gray-400">
+            No recent transactions
+          </div>
+        ) : (
+          <div ref={containerRef} className="space-y-4">
+            {transactions.map((tx) => (
+              <div
+                key={tx.id}
+                className="bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors"
+              >
+                <div className="flex justify-between items-start">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <span className="text-sm font-mono text-gray-400">
+                        #{tx.proposalId}
+                      </span>
+                      <span
+                        className={`px-2 py-1 rounded text-xs font-semibold ${
+                          tx.status === "executed"
+                            ? "bg-green-900/30 text-green-400"
+                            : tx.status === "pending"
+                            ? "bg-yellow-900/30 text-yellow-400"
+                            : "bg-red-900/30 text-red-400"
+                        }`}
+                      >
+                        {tx.status}
+                      </span>
+                    </div>
+                    <div className="text-sm text-gray-300">
+                      <span className="text-gray-500">To:</span> {formatAddress(tx.to)}
+                    </div>
+                    <div className="text-sm text-gray-400 mt-1">
+                      {format(new Date(tx.createdAt), "MMM dd, yyyy HH:mm")}
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-semibold">{tx.value} ETH</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/components/layout/Navigation.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { label: "Dashboard", href: "/" },
+  { label: "Receive", href: "/receive" },
+  { label: "Send", href: "/send" },
+  { label: "Transfer", href: "/transfer" },
+  { label: "Approvals", href: "/approvals" },
+  { label: "Activity", href: "/activity" },
+  { label: "Settings", href: "/settings" },
+];
+
+export function Navigation() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="bg-gray-900 border-b border-gray-800">
+      <div className="max-w-7xl mx-auto px-8">
+        <div className="flex items-center gap-8">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "px-4 py-4 text-sm font-medium transition-colors border-b-2",
+                  isActive
+                    ? "border-blue-500 text-blue-400"
+                    : "border-transparent text-gray-400 hover:text-gray-200 hover:border-gray-700"
+                )}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}
+

frontend/components/ui/AnimatedCard.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { cn } from "@/lib/utils";
+
+interface AnimatedCardProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+}
+
+export function AnimatedCard({
+  children,
+  className,
+  delay = 0,
+}: AnimatedCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!cardRef.current) return;
+
+    const ctx = gsap.context(() => {
+      gsap.from(cardRef.current, {
+        opacity: 0,
+        y: 30,
+        rotationX: -15,
+        duration: 0.8,
+        delay,
+        ease: "power3.out",
+      });
+    });
+
+    return () => ctx.revert();
+  }, [delay]);
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn(
+        "transform-gpu perspective-1000",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+

frontend/components/ui/ParallaxSection.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+interface ParallaxSectionProps {
+  children: React.ReactNode;
+  speed?: number;
+  className?: string;
+}
+
+export function ParallaxSection({
+  children,
+  speed = 0.5,
+  className = "",
+}: ParallaxSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || typeof window === "undefined") return;
+
+    const element = ref.current;
+    gsap.to(element, {
+      y: -100 * speed,
+      ease: "none",
+      scrollTrigger: {
+        trigger: element,
+        start: "top bottom",
+        end: "bottom top",
+        scrub: true,
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => {
+        if (trigger.vars.trigger === element) {
+          trigger.kill();
+        }
+      });
+    };
+  }, [speed]);
+
+  return (
+    <div ref={ref} className={className}>
+      {children}
+    </div>
+  );
+}

frontend/components/ui/ParticleBackground.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Points, PointMaterial } from "@react-three/drei";
+import * as THREE from "three";
+
+function ParticleField() {
+  const ref = useRef<THREE.Points>(null);
+
+  // Generate random points in a sphere
+  const particleCount = 5000;
+  const positions = new Float32Array(particleCount * 3);
+  for (let i = 0; i < particleCount * 3; i += 3) {
+    const radius = Math.random() * 1.5;
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.acos(Math.random() * 2 - 1);
+    
+    positions[i] = radius * Math.sin(phi) * Math.cos(theta);
+    positions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
+    positions[i + 2] = radius * Math.cos(phi);
+  }
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      ref.current.rotation.x -= delta / 10;
+      ref.current.rotation.y -= delta / 15;
+    }
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={positions} stride={3} frustumCulled={false}>
+        <PointMaterial
+          transparent
+          color="#3b82f6"
+          size={0.005}
+          sizeAttenuation={true}
+          depthWrite={false}
+        />
+      </Points>
+    </group>
+  );
+}
+
+export function ParticleBackground() {
+  return (
+    <div className="fixed inset-0 -z-10 opacity-30 pointer-events-none">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <ParticleField />
+      </Canvas>
+    </div>
+  );
+}

frontend/components/web3/ChainIndicator.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useChainId } from "wagmi";
+
+export function ChainIndicator() {
+  const chainId = useChainId();
+
+  const getChainName = (id: number): string => {
+    switch (id) {
+      case 1:
+        return "Ethereum Mainnet";
+      case 11155111:
+        return "Sepolia Testnet";
+      case 138:
+        return "Solace Chain 138";
+      default:
+        return `Chain ${id}`;
+    }
+  };
+
+  const getChainColor = (id: number): string => {
+    switch (id) {
+      case 1:
+        return "text-blue-400";
+      case 11155111:
+        return "text-purple-400";
+      case 138:
+        return "text-green-400";
+      default:
+        return "text-gray-400";
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className={`text-sm font-medium ${getChainColor(chainId)}`}>
+        {getChainName(chainId)}
+      </div>
+      <div className="text-xs text-gray-500">({chainId})</div>
+    </div>
+  );
+}
+

frontend/components/web3/WalletConnect.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { formatAddress } from "@/lib/utils";
+
+export function WalletConnect() {
+  const { address, isConnected } = useAccount();
+  const { connectors, connect } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  if (isConnected && address) {
+    return (
+      <div className="flex items-center gap-4">
+        <div className="text-sm">
+          <span className="text-gray-400">Connected:</span>{" "}
+          <span className="font-mono">{formatAddress(address)}</span>
+        </div>
+        <button
+          onClick={() => disconnect()}
+          className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
+        >
+          Disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2">
+      {connectors.map((connector) => (
+        <button
+          key={connector.uid}
+          onClick={() => connect({ connector })}
+          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+        >
+          Connect {connector.name}
+        </button>
+      ))}
+    </div>
+  );
+}
+