website refactor

apps/website/templates/SponsorDashboardTemplate.tsx

@@ -0,0 +1,336 @@
+import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import StatusBadge from '@/components/ui/StatusBadge';
+import InfoBanner from '@/components/ui/InfoBanner';
+import MetricCard from '@/components/sponsors/MetricCard';
+import SponsorshipCategoryCard from '@/components/sponsors/SponsorshipCategoryCard';
+import ActivityItem from '@/components/sponsors/ActivityItem';
+import RenewalAlert from '@/components/sponsors/RenewalAlert';
+import {
+  BarChart3,
+  Eye,
+  Users,
+  Trophy,
+  TrendingUp,
+  Calendar,
+  DollarSign,
+  Target,
+  ArrowUpRight,
+  ArrowDownRight,
+  ExternalLink,
+  Loader2,
+  Car,
+  Flag,
+  Megaphone,
+  ChevronRight,
+  Plus,
+  Bell,
+  Settings,
+  CreditCard,
+  FileText,
+  RefreshCw
+} from 'lucide-react';
+import Link from 'next/link';
+import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
+
+interface SponsorDashboardTemplateProps {
+  viewData: SponsorDashboardViewData;
+}
+
+export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  const categoryData = viewData.categoryData;
+
+  return (
+    <div className="max-w-7xl mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div>
+          <h2 className="text-2xl font-bold text-white">Sponsor Dashboard</h2>
+          <p className="text-gray-400">Welcome back, {viewData.sponsorName}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Time Range Selector */}
+          <div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
+            {(['7d', '30d', '90d', 'all'] as const).map((range) => (
+              <button
+                key={range}
+                onClick={() => {}}
+                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                  false
+                    ? 'bg-primary-blue text-white'
+                    : 'text-gray-400 hover:text-white'
+                }`}
+              >
+                {range === 'all' ? 'All' : range}
+              </button>
+            ))}
+          </div>
+
+          {/* Quick Actions */}
+          <Button variant="secondary" className="hidden sm:flex">
+            <RefreshCw className="w-4 h-4" />
+          </Button>
+          <Link href=routes.sponsor.settings>
+            <Button variant="secondary" className="hidden sm:flex">
+              <Settings className="w-4 h-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <MetricCard
+          title="Total Impressions"
+          value={viewData.totalImpressions}
+          change={viewData.metrics.impressionsChange}
+          icon={Eye}
+          delay={0}
+        />
+        <MetricCard
+          title="Unique Viewers"
+          value="12.5k" // Mock
+          change={viewData.metrics.viewersChange}
+          icon={Users}
+          delay={0.1}
+        />
+        <MetricCard
+          title="Engagement Rate"
+          value="4.2%" // Mock
+          change={viewData.metrics.exposureChange}
+          icon={TrendingUp}
+          suffix="%"
+          delay={0.2}
+        />
+        <MetricCard
+          title="Total Investment"
+          value={viewData.totalInvestment}
+          icon={DollarSign}
+          prefix="$"
+          delay={0.3}
+        />
+      </div>
+
+      {/* Sponsorship Categories */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-white">Your Sponsorships</h3>
+          <Link href=routes.sponsor.campaigns>
+            <Button variant="secondary" className="text-sm">
+              View All
+              <ChevronRight className="w-4 h-4 ml-1" />
+            </Button>
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <SponsorshipCategoryCard
+            icon={Trophy}
+            title="Leagues"
+            count={categoryData.leagues.count}
+            impressions={categoryData.leagues.impressions}
+            color="text-primary-blue"
+            href="/sponsor/campaigns?type=leagues"
+          />
+          <SponsorshipCategoryCard
+            icon={Users}
+            title="Teams"
+            count={categoryData.teams.count}
+            impressions={categoryData.teams.impressions}
+            color="text-purple-400"
+            href="/sponsor/campaigns?type=teams"
+          />
+          <SponsorshipCategoryCard
+            icon={Car}
+            title="Drivers"
+            count={categoryData.drivers.count}
+            impressions={categoryData.drivers.impressions}
+            color="text-performance-green"
+            href="/sponsor/campaigns?type=drivers"
+          />
+          <SponsorshipCategoryCard
+            icon={Flag}
+            title="Races"
+            count={categoryData.races.count}
+            impressions={categoryData.races.impressions}
+            color="text-warning-amber"
+            href="/sponsor/campaigns?type=races"
+          />
+          <SponsorshipCategoryCard
+            icon={Megaphone}
+            title="Platform Ads"
+            count={categoryData.platform.count}
+            impressions={categoryData.platform.impressions}
+            color="text-racing-red"
+            href="/sponsor/campaigns?type=platform"
+          />
+        </div>
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Sponsored Entities */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Top Performing Sponsorships */}
+          <Card>
+            <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
+              <h3 className="text-lg font-semibold text-white">Top Performing</h3>
+              <Link href="/leagues">
+                <Button variant="secondary" className="text-sm">
+                  <Plus className="w-4 h-4 mr-1" />
+                  Find More
+                </Button>
+              </Link>
+            </div>
+            <div className="divide-y divide-charcoal-outline/50">
+              {/* Mock data for now */}
+              <div className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                <div className="flex items-center gap-4">
+                  <div className="px-2 py-1 rounded text-xs font-medium bg-primary-blue/20 text-primary-blue border border-primary-blue/30">
+                    Main
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <Trophy className="w-4 h-4 text-gray-500" />
+                      <span className="font-medium text-white">Sample League</span>
+                    </div>
+                    <div className="text-sm text-gray-500">Sample details</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="text-right">
+                    <div className="font-semibold text-white">1.2k</div>
+                    <div className="text-xs text-gray-500">impressions</div>
+                  </div>
+                  <Button variant="secondary" className="text-xs">
+                    <ExternalLink className="w-3 h-3" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Upcoming Events */}
+          <Card>
+            <div className="p-4 border-b border-charcoal-outline">
+              <h3 className="text-lg font-semibold text-white flex items-center gap-2">
+                <Calendar className="w-5 h-5 text-warning-amber" />
+                Upcoming Sponsored Events
+              </h3>
+            </div>
+            <div className="p-4">
+              <div className="text-center py-8 text-gray-500">
+                <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                <p>No upcoming sponsored events</p>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Right Column - Activity & Quick Actions */}
+        <div className="space-y-6">
+          {/* Quick Actions */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
+            <div className="space-y-2">
+              <Link href="/leagues" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Target className="w-4 h-4 mr-2" />
+                  Find Leagues to Sponsor
+                </Button>
+              </Link>
+              <Link href="/teams" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Users className="w-4 h-4 mr-2" />
+                  Browse Teams
+                </Button>
+              </Link>
+              <Link href="/drivers" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Car className="w-4 h-4 mr-2" />
+                  Discover Drivers
+                </Button>
+              </Link>
+              <Link href=routes.sponsor.billing className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <CreditCard className="w-4 h-4 mr-2" />
+                  Manage Billing
+                </Button>
+              </Link>
+              <Link href=routes.sponsor.campaigns className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <BarChart3 className="w-4 h-4 mr-2" />
+                  View Analytics
+                </Button>
+              </Link>
+            </div>
+          </Card>
+
+          {/* Renewal Alerts */}
+          {viewData.upcomingRenewals.length > 0 && (
+            <Card className="p-4">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Bell className="w-5 h-5 text-warning-amber" />
+                Upcoming Renewals
+              </h3>
+              <div className="space-y-3">
+                {viewData.upcomingRenewals.map((renewal: any) => (
+                  <RenewalAlert key={renewal.id} renewal={renewal} />
+                ))}
+              </div>
+            </Card>
+          )}
+
+          {/* Recent Activity */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
+            <div>
+              {viewData.recentActivity.map((activity: any) => (
+                <ActivityItem key={activity.id} activity={activity} />
+              ))}
+            </div>
+          </Card>
+
+          {/* Investment Summary */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <FileText className="w-5 h-5 text-primary-blue" />
+              Investment Summary
+            </h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Active Sponsorships</span>
+                <span className="font-medium text-white">{viewData.activeSponsorships}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Total Investment</span>
+                <span className="font-medium text-white">{viewData.formattedTotalInvestment}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Cost per 1K Views</span>
+                <span className="font-medium text-performance-green">
+                  {viewData.costPerThousandViews}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Next Invoice</span>
+                <span className="font-medium text-white">Jan 1, 2026</span>
+              </div>
+              <div className="pt-3 border-t border-charcoal-outline">
+                <Link href=routes.sponsor.billing>
+                  <Button variant="secondary" className="w-full text-sm">
+                    <CreditCard className="w-4 h-4 mr-2" />
+                    View Billing Details
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}