537 lines
20 KiB
TypeScript
537 lines
20 KiB
TypeScript
import { useState, useEffect, useMemo } from "react";
|
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { aethexToast } from "@/lib/aethex-toast";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { Link } from "react-router-dom";
|
|
import OAuthConnections from "@/components/settings/OAuthConnections";
|
|
import RealmSwitcher, { RealmKey } from "@/components/settings/RealmSwitcher";
|
|
import {
|
|
User,
|
|
Settings,
|
|
TrendingUp,
|
|
Users,
|
|
Bell,
|
|
Star,
|
|
Trophy,
|
|
Rocket,
|
|
Code,
|
|
Database,
|
|
Shield,
|
|
ChevronRight,
|
|
Activity,
|
|
LogOut,
|
|
Sparkles,
|
|
CheckCircle,
|
|
ArrowRight,
|
|
Copy,
|
|
CheckCircle2,
|
|
} from "lucide-react";
|
|
|
|
const ARMS = [
|
|
{
|
|
id: "staff",
|
|
label: "Staff",
|
|
color: "#7c3aed",
|
|
href: "/staff/dashboard",
|
|
icon: Shield,
|
|
description: "Operations & Administration",
|
|
bgGradient: "from-purple-500/20 to-purple-900/20",
|
|
borderColor: "border-purple-500/30 hover:border-purple-500/60",
|
|
},
|
|
{
|
|
id: "labs",
|
|
label: "Labs",
|
|
color: "#FBBF24",
|
|
href: "/dashboard/labs",
|
|
icon: Code,
|
|
description: "Research & Development",
|
|
bgGradient: "from-amber-500/20 to-amber-900/20",
|
|
borderColor: "border-amber-500/30 hover:border-amber-500/60",
|
|
},
|
|
{
|
|
id: "gameforge",
|
|
label: "GameForge",
|
|
color: "#22C55E",
|
|
href: "/dashboard/gameforge",
|
|
icon: Rocket,
|
|
description: "Game Development",
|
|
bgGradient: "from-green-500/20 to-green-900/20",
|
|
borderColor: "border-green-500/30 hover:border-green-500/60",
|
|
},
|
|
{
|
|
id: "corp",
|
|
label: "Corp",
|
|
color: "#3B82F6",
|
|
href: "/hub/client",
|
|
icon: Users,
|
|
description: "Business & Consulting",
|
|
bgGradient: "from-blue-500/20 to-blue-900/20",
|
|
borderColor: "border-blue-500/30 hover:border-blue-500/60",
|
|
},
|
|
{
|
|
id: "foundation",
|
|
label: "Foundation",
|
|
color: "#EF4444",
|
|
href: "/dashboard/foundation",
|
|
icon: Trophy,
|
|
description: "Education & Mentorship",
|
|
bgGradient: "from-red-500/20 to-red-900/20",
|
|
borderColor: "border-red-500/30 hover:border-red-500/60",
|
|
},
|
|
{
|
|
id: "devlink",
|
|
label: "Dev-Link",
|
|
color: "#06B6D4",
|
|
href: "/dashboard/dev-link",
|
|
icon: Database,
|
|
description: "Developer Network",
|
|
bgGradient: "from-cyan-500/20 to-cyan-900/20",
|
|
borderColor: "border-cyan-500/30 hover:border-cyan-500/60",
|
|
},
|
|
{
|
|
id: "nexus",
|
|
label: "Nexus",
|
|
color: "#A855F7",
|
|
href: "/dashboard/nexus",
|
|
icon: Sparkles,
|
|
description: "Talent Marketplace",
|
|
bgGradient: "from-purple-500/20 to-fuchsia-900/20",
|
|
borderColor: "border-purple-500/30 hover:border-purple-500/60",
|
|
},
|
|
];
|
|
|
|
export default function Dashboard() {
|
|
const navigate = useNavigate();
|
|
const {
|
|
user,
|
|
profile,
|
|
loading: authLoading,
|
|
signOut,
|
|
profileComplete,
|
|
linkedProviders,
|
|
linkProvider,
|
|
unlinkProvider,
|
|
} = useAuth();
|
|
const [searchParams] = useSearchParams();
|
|
const [activeTab, setActiveTab] = useState(
|
|
() => searchParams.get("tab") ?? "realms",
|
|
);
|
|
const [displayName, setDisplayName] = useState("");
|
|
const [bio, setBio] = useState("");
|
|
const [website, setWebsite] = useState("");
|
|
const [linkedin, setLinkedin] = useState("");
|
|
const [github, setGithub] = useState("");
|
|
const [twitter, setTwitter] = useState("");
|
|
const [savingProfile, setSavingProfile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (profile) {
|
|
setDisplayName(profile.full_name || "");
|
|
setBio(profile.bio || "");
|
|
setWebsite(profile.website_url || "");
|
|
setLinkedin(profile.linkedin_url || "");
|
|
setGithub(profile.github_url || "");
|
|
setTwitter(profile.twitter_url || "");
|
|
}
|
|
}, [profile]);
|
|
|
|
const handleSaveProfile = async () => {
|
|
if (!user) return;
|
|
setSavingProfile(true);
|
|
try {
|
|
const { error } = await (window as any).supabaseClient
|
|
.from("user_profiles")
|
|
.update({
|
|
full_name: displayName,
|
|
bio: bio,
|
|
website_url: website,
|
|
linkedin_url: linkedin,
|
|
github_url: github,
|
|
twitter_url: twitter,
|
|
})
|
|
.eq("id", user.id);
|
|
|
|
if (error) throw error;
|
|
aethexToast({
|
|
message: "Profile updated successfully!",
|
|
type: "success",
|
|
});
|
|
} catch (error: any) {
|
|
aethexToast({
|
|
message: error?.message || "Failed to update profile",
|
|
type: "error",
|
|
});
|
|
} finally {
|
|
setSavingProfile(false);
|
|
}
|
|
};
|
|
|
|
if (authLoading) {
|
|
return <LoadingScreen message="Loading dashboard..." />;
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-gradient-to-b from-black via-purple-950/30 to-black flex items-center justify-center px-4">
|
|
<div className="max-w-md text-center space-y-6">
|
|
<div className="space-y-2">
|
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-purple-300 via-blue-300 to-purple-300 bg-clip-text text-transparent">
|
|
Welcome to AeThex
|
|
</h1>
|
|
<p className="text-gray-400 text-lg">
|
|
Sign in to access your personalized dashboard
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => navigate("/login")}
|
|
className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white text-lg py-6"
|
|
>
|
|
Sign In to Dashboard
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate("/onboarding")}
|
|
variant="outline"
|
|
className="w-full text-lg py-6 border-purple-500/30 text-purple-300 hover:bg-purple-500/10"
|
|
>
|
|
Create New Account
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
const showProfileSetup = !profileComplete;
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-gradient-to-b from-black via-purple-950/20 to-black py-8">
|
|
<div className="container mx-auto px-4 max-w-7xl space-y-8">
|
|
{/* Header Section */}
|
|
<div className="space-y-4 animate-slide-down">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-purple-300 via-blue-300 to-purple-300 bg-clip-text text-transparent">
|
|
Dashboard
|
|
</h1>
|
|
<p className="text-gray-400 text-lg">
|
|
Welcome back,{" "}
|
|
<span className="text-purple-300 font-semibold">
|
|
{profile?.full_name || user.email?.split("@")[0]}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{profileComplete && (
|
|
<Badge className="bg-gradient-to-r from-green-600 to-green-500 text-white border-green-500/50 text-sm py-1 px-3">
|
|
<CheckCircle className="h-3 w-3 mr-2" />
|
|
Profile Complete
|
|
</Badge>
|
|
)}
|
|
{profile?.level && (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-purple-500/30 text-purple-300 bg-purple-500/10 text-sm py-1 px-3"
|
|
>
|
|
<Star className="h-3 w-3 mr-1" />
|
|
Level {profile.level}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Setup Banner */}
|
|
{showProfileSetup && (
|
|
<Card className="bg-orange-500/10 border-orange-500/30">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<p className="font-semibold text-white">
|
|
Complete Your Profile
|
|
</p>
|
|
<p className="text-sm text-orange-200">
|
|
Set up your profile to unlock all AeThex features and
|
|
join the community
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setActiveTab("profile")}
|
|
className="bg-orange-600 hover:bg-orange-700 shrink-0"
|
|
>
|
|
Setup Now
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tabs Section */}
|
|
<Tabs
|
|
value={activeTab}
|
|
onValueChange={setActiveTab}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="grid w-full grid-cols-4 lg:grid-cols-4 bg-purple-950/30 border border-purple-500/20 p-1">
|
|
<TabsTrigger value="realms" className="text-sm md:text-base">
|
|
<span className="hidden sm:inline">Realms</span>
|
|
<span className="sm:hidden">Arms</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="profile" className="text-sm md:text-base">
|
|
Profile
|
|
</TabsTrigger>
|
|
<TabsTrigger value="connections" className="text-sm md:text-base">
|
|
Connections
|
|
</TabsTrigger>
|
|
<TabsTrigger value="settings" className="text-sm md:text-base">
|
|
Settings
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Realms Tab */}
|
|
<TabsContent value="realms" className="space-y-6 animate-fade-in">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{ARMS.map((arm) => {
|
|
const IconComponent = arm.icon;
|
|
return (
|
|
<button
|
|
key={arm.id}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
navigate(arm.href);
|
|
}}
|
|
className="group relative overflow-hidden"
|
|
>
|
|
<Card
|
|
className={`bg-gradient-to-br ${arm.bgGradient} border transition-all duration-300 h-full hover:shadow-lg hover:shadow-purple-500/20 ${arm.borderColor} cursor-pointer`}
|
|
>
|
|
<CardContent className="p-6 space-y-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-black/30 group-hover:bg-black/50 transition-colors">
|
|
<IconComponent
|
|
className="h-5 w-5"
|
|
style={{ color: arm.color }}
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">
|
|
{arm.label}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-400">
|
|
{arm.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="pt-2 flex items-center gap-2 text-purple-300 group-hover:gap-3 transition-all">
|
|
<span className="text-sm font-medium">Explore</span>
|
|
<ArrowRight className="h-4 w-4" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Profile Tab */}
|
|
<TabsContent value="profile" className="space-y-6 animate-fade-in">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Profile Card */}
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20 lg:col-span-1">
|
|
<CardContent className="p-6 space-y-4 text-center">
|
|
<div className="relative mx-auto w-24 h-24">
|
|
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-500/30 to-blue-500/30 blur-lg" />
|
|
<img
|
|
src={
|
|
profile?.avatar_url ||
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face"
|
|
}
|
|
alt="Profile"
|
|
className="w-24 h-24 rounded-full ring-4 ring-purple-500/40 relative"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-bold text-white">
|
|
{profile?.full_name || "User"}
|
|
</h3>
|
|
<p className="text-sm text-gray-400">{user.email}</p>
|
|
<Badge className="bg-purple-600/50 text-purple-100 mx-auto">
|
|
<Star className="h-3 w-3 mr-1" />
|
|
Level {profile?.level || 1}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Edit Profile Form */}
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20 lg:col-span-2">
|
|
<CardHeader>
|
|
<CardTitle>Edit Profile</CardTitle>
|
|
<CardDescription>
|
|
Update your public profile information
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="display-name">Display Name</Label>
|
|
<Input
|
|
id="display-name"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
placeholder="Your full name"
|
|
className="bg-purple-950/30 border-purple-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bio">Bio</Label>
|
|
<Textarea
|
|
id="bio"
|
|
value={bio}
|
|
onChange={(e) => setBio(e.target.value)}
|
|
placeholder="Tell us about yourself"
|
|
className="bg-purple-950/30 border-purple-500/20 resize-none h-24"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="website">Website</Label>
|
|
<Input
|
|
id="website"
|
|
value={website}
|
|
onChange={(e) => setWebsite(e.target.value)}
|
|
placeholder="https://example.com"
|
|
className="bg-purple-950/30 border-purple-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="github">GitHub</Label>
|
|
<Input
|
|
id="github"
|
|
value={github}
|
|
onChange={(e) => setGithub(e.target.value)}
|
|
placeholder="github.com/username"
|
|
className="bg-purple-950/30 border-purple-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="linkedin">LinkedIn</Label>
|
|
<Input
|
|
id="linkedin"
|
|
value={linkedin}
|
|
onChange={(e) => setLinkedin(e.target.value)}
|
|
placeholder="linkedin.com/in/username"
|
|
className="bg-purple-950/30 border-purple-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="twitter">Twitter/X</Label>
|
|
<Input
|
|
id="twitter"
|
|
value={twitter}
|
|
onChange={(e) => setTwitter(e.target.value)}
|
|
placeholder="@username"
|
|
className="bg-purple-950/30 border-purple-500/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleSaveProfile}
|
|
disabled={savingProfile}
|
|
className="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
|
|
>
|
|
{savingProfile ? "Saving..." : "Save Profile"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Connections Tab */}
|
|
<TabsContent
|
|
value="connections"
|
|
className="space-y-6 animate-fade-in"
|
|
>
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle>Connected Accounts</CardTitle>
|
|
<CardDescription>
|
|
Link external accounts to your AeThex profile
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<OAuthConnections
|
|
linkedProviders={linkedProviders}
|
|
linkProvider={linkProvider}
|
|
unlinkProvider={unlinkProvider}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
{/* Settings Tab */}
|
|
<TabsContent value="settings" className="space-y-6 animate-fade-in">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Realm Preference */}
|
|
<Card className="bg-gradient-to-br from-purple-950/40 to-purple-900/20 border-purple-500/20">
|
|
<CardHeader>
|
|
<CardTitle>Primary Realm</CardTitle>
|
|
<CardDescription>
|
|
Choose your primary area of focus
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RealmSwitcher />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Account Actions */}
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20">
|
|
<CardHeader>
|
|
<CardTitle>Account Actions</CardTitle>
|
|
<CardDescription>Manage your account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2 border-red-500/30 text-red-300 hover:bg-red-500/10 h-auto py-2"
|
|
onClick={() => signOut()}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Sign Out
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|