feat: add CoopCredits Solana media rewards ecosystem

Add complete token system with Plex/Tautulli/Overseer integration: - Anchor program for SPL token mint/burn/transfer - Express backend with OAuth, webhooks, Solana integration - Next.js frontend with dashboard, admin panel, wallet management - Docker deployment for 172.20.1.0/24 infrastructure - Production configs with SSL, Nginx, health monitoring Tautulli webhooks auto-mint on watch events. Overseer integration burns for content requests.
2026-04-14 11:09:50 -04:00
parent f106328f6a
commit e8d9b1fd42
69 changed files with 11382 additions and 0 deletions
@@ -0,0 +1,232 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useStore } from '@/lib/store';
+import { walletApi, transactionApi, overseerApi } from '@/lib/api';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { 
+  Wallet, 
+  TrendingUp, 
+  TrendingDown, 
+  Clock, 
+  Film,
+  ExternalLink,
+  Plus,
+  History
+} from 'lucide-react';
+import { formatNumber, truncateAddress } from '@/lib/utils';
+import { toast } from 'sonner';
+import { TransactionList } from './components/TransactionList';
+import { WatchHistory } from './components/WatchHistory';
+import { CreateWalletModal } from './components/CreateWalletModal';
+
+interface WalletData {
+  hasWallet: boolean;
+  address?: string;
+  balance: number;
+  totalEarned: number;
+  totalSpent: number;
+  explorerUrl?: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const { user, isAuthenticated, logout } = useStore();
+  const [wallet, setWallet] = useState<WalletData | null>(null);
+  const [requestCosts, setRequestCosts] = useState({ movie: 100, tv: 200 });
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push('/login');
+      return;
+    }
+
+    loadData();
+  }, [isAuthenticated, router]);
+
+  const loadData = async () => {
+    try {
+      const [walletRes, costsRes] = await Promise.all([
+        walletApi.getWallet(),
+        overseerApi.getCosts().catch(() => ({ data: { movie: 100, tv: 200 } }))
+      ]);
+      
+      setWallet(walletRes.data);
+      setRequestCosts(costsRes.data);
+    } catch (error) {
+      toast.error('Failed to load wallet data');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!isAuthenticated || !user) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <h1 className="text-2xl font-bold">CoopCredits</h1>
+            <Badge variant="secondary">{user.plexUsername}</Badge>
+            {user.isAdmin && (
+              <Button variant="outline" size="sm" onClick={() => router.push('/admin')}>
+                Admin
+              </Button>
+            )}
+          </div>
+          <Button variant="ghost" onClick={logout}>
+            Sign Out
+          </Button>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium">Balance</CardTitle>
+              <Wallet className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {wallet ? formatNumber(wallet.balance) : '--'} $COOP
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {wallet?.hasWallet ? 'Ready to spend' : 'Create wallet to start'}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium">Total Earned</CardTitle>
+              <TrendingUp className="h-4 w-4 text-green-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {wallet ? formatNumber(wallet.totalEarned) : '--'} $COOP
+              </div>
+              <p className="text-xs text-muted-foreground">
+                From watching content
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium">Total Spent</CardTitle>
+              <TrendingDown className="h-4 w-4 text-red-500" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {wallet ? formatNumber(wallet.totalSpent) : '--'} $COOP
+              </div>
+              <p className="text-xs text-muted-foreground">
+                On content requests
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium">Request Cost</CardTitle>
+              <Film className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{requestCosts.movie} $COOP</div>
+              <p className="text-xs text-muted-foreground">
+                Per movie request
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Wallet Section */}
+        {!wallet?.hasWallet && (
+          <Card className="mb-8 border-dashed border-2">
+            <CardContent className="py-8 text-center">
+              <Wallet className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No Wallet Connected</h3>
+              <p className="text-muted-foreground mb-4">
+                Create a Solana wallet to start earning and spending $COOP tokens
+              </p>
+              <Button onClick={() => setIsCreateModalOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Wallet
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {wallet?.hasWallet && (
+          <Card className="mb-8">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Wallet className="h-5 w-5" />
+                Your Wallet
+              </CardTitle>
+              <CardDescription>
+                Manage your Solana wallet and $COOP tokens
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+                <div>
+                  <p className="text-sm text-muted-foreground">Address</p>
+                  <p className="font-mono font-medium">
+                    {truncateAddress(wallet.address!)}
+                  </p>
+                </div>
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm" onClick={() => setIsCreateModalOpen(true)}>
+                    <History className="mr-2 h-4 w-4" />
+                    Backup
+                  </Button>
+                  <Button variant="outline" size="sm" asChild>
+                    <a href={wallet.explorerUrl} target="_blank" rel="noopener noreferrer">
+                      <ExternalLink className="mr-2 h-4 w-4" />
+                      Explorer
+                    </a>
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Tabs */}
+        <Tabs defaultValue="transactions" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="transactions">Transactions</TabsTrigger>
+            <TabsTrigger value="history">Watch History</TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="transactions">
+            <TransactionList />
+          </TabsContent>
+          
+          <TabsContent value="history">
+            <WatchHistory />
+          </TabsContent>
+        </Tabs>
+      </main>
+
+      <CreateWalletModal 
+        open={isCreateModalOpen} 
+        onClose={() => setIsCreateModalOpen(false)}
+        onCreated={loadData}
+      />
+    </div>
+  );
+}