diff --git a/frontend/src/pages/PremiumPage.tsx b/frontend/src/pages/PremiumPage.tsx
new file mode 100644
index 0000000..db64144
--- /dev/null
+++ b/frontend/src/pages/PremiumPage.tsx
@@ -0,0 +1,217 @@
+import { useEffect, useState } from "react";
+import { Crown, Check, Zap, Star, TrendingUp, Shield, X } from "lucide-react";
+import { useAuth } from "../auth-context";
+import { api } from "../api";
+import "../styles/features.css";
+
+export function PremiumPage() {
+ const { user } = useAuth();
+ const [status, setStatus] = useState
(null);
+ const [expiryDate, setExpiryDate] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [processingPayment, setProcessingPayment] = useState(false);
+
+ useEffect(() => {
+ if (user) {
+ loadSubscriptionStatus();
+ }
+ }, [user]);
+
+ async function loadSubscriptionStatus() {
+ if (!user) return;
+ try {
+ const result = await api.getSubscriptionStatus(user.id);
+ setStatus(result.status);
+ setExpiryDate(result.expiryDate || null);
+ } catch (err) {
+ console.error("Failed to load subscription status:", err);
+ }
+ }
+
+ async function handleSubscribe() {
+ if (!user) {
+ setError("Please log in to subscribe");
+ return;
+ }
+
+ if (user.role !== "organizer") {
+ setError("Premium is currently only available for organizers");
+ return;
+ }
+
+ try {
+ setLoading(true);
+ setError(null);
+ setProcessingPayment(true);
+
+ const result = await api.createSubscription("price_premium_monthly");
+
+ // In a real app, this would redirect to Stripe Checkout with the clientSecret
+ // For demo purposes, we'll simulate a successful payment
+ setTimeout(() => {
+ setProcessingPayment(false);
+ setStatus("active");
+ loadSubscriptionStatus();
+ }, 2000);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to create subscription");
+ setProcessingPayment(false);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ const isActive = status === "active";
+ const isPending = status === "pending";
+
+ return (
+
+
+
+
+
+ PREMIUM
+
+
Unlock Your Tournament Potential
+
Advanced features for serious organizers and competitors
+
+
+
+ {!user ? (
+
+ Please log in to view premium subscription options
+
+ ) : user.role !== "organizer" ? (
+
+ Premium subscriptions are currently only available for tournament organizers
+
+ ) : null}
+
+ {isActive && (
+
+
+
+ Premium Active
+ {expiryDate && (
+
+ • Renews {new Date(expiryDate).toLocaleDateString()}
+
+ )}
+
+
+ )}
+
+ {isPending && (
+
+
+ Payment processing...
+
+ )}
+
+ {error && (
+
+
+ {error}
+
+ )}
+
+
+
$9.99
+
per month
+ {!isActive && user && user.role === "organizer" && (
+
+ )}
+
+
+
+
+
+
+
+
+
Priority Match Notifications
+
Get instant alerts for your upcoming matches with real-time updates
+
+
+
+
+
+
+
+
+
Advanced Analytics
+
Deep insights into player performance, match statistics, and tournament trends
+
+
+
+
+
+
+
+
+
Custom Branding
+
Personalize your tournaments with custom logos, colors, and themes
+
+
+
+
+
+
+
+
+
Premium Support
+
24/7 priority support from our tournament operations team
+
+
+
+
+
+
+
+
+
Unlimited Replays
+
Store and share unlimited match replays with no file size restrictions
+
+
+
+
+
+
+
+
+
Early Access
+
Be the first to try new features and beta functionality
+
+
+
+
+ {isActive && (
+
+
+ Need to make changes? Contact support or manage your subscription in settings.
+
+
+ )}
+
+
+
+ Please log in to upload replays
+
+
+
+
+ Only tournament organizers can upload replays
+
+
+
+
+
+ Upload Replay
+
+
+ Share match footage with the community
+
+
+
+ {error && (
+
+ )}
+
+ {success && (
+
+
+ Replay uploaded successfully! Redirecting...
+
+ )}
+
+
+
+
+
+
+
+ Match Replays
+
+
Relive the greatest moments. Study the best plays. Learn from the pros.
+
+
+
+
+
+
+
+
+
+ {error && (
+
+ Error: {error}
+
+ )}
+
+ {loading ? (
+
+ ) : replays.length === 0 ? (
+
+
+
+
+
No replays found
+
Try adjusting your filters or check back later for new content
+
+ ) : (
+ <>
+
+ {replays.map((replay) => (
+
window.open(replay.videoUrl, "_blank")}
+ >
+
+
+
{replay.title}
+
+
+
+ {replay.game}
+
+
+
+ {replay.playerNames.join(" vs ")}
+
+
+
+
+
+ {formatDate(replay.uploadedAt)}
+
+ {formatFileSize(replay.fileSizeBytes)}
+
+
+
+ ))}
+
+
+ {totalPages > 1 && (
+
+
+
+ Page {page} of {totalPages}
+
+
+
+ )}
+
+ )}
+
@@ -403,6 +460,116 @@ export function TournamentBracketPage() {
{nextMatchLabel(bracket, liveId)}
+
+ {/* Score Tracking Panel (Organizers Only) */}
+ {isOrganizer && activeBracketMatches.length > 0 && (
+
+
+
+
+ Report Match Score
+
+
+
+ {scoreSuccess && (
+
+
+ Score reported successfully!
+
+ )}
+
+ {scoreError && (
+
+
+ {scoreError}
+
+ )}
+
+ {!selectedMatch ? (
+
+
+
+
+ ) : (
+ <>
+
+
+
{selectedMatch.player1?.displayName}
+
setPlayer1Score(e.target.value)}
+ placeholder="0"
+ min="0"
+ />
+
+
VS
+
+
{selectedMatch.player2?.displayName}
+
setPlayer2Score(e.target.value)}
+ placeholder="0"
+ min="0"
+ />
+
+
+
+
+
+
+
+
+ )}
+