diff --git a/client/pages/Profile.tsx b/client/pages/Profile.tsx new file mode 100644 index 00000000..e8b4885d --- /dev/null +++ b/client/pages/Profile.tsx @@ -0,0 +1,615 @@ +import { useState, useEffect } from "react"; +import { useNavigate } 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 { Switch } from "@/components/ui/switch"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Separator } from "@/components/ui/separator"; +import LoadingScreen from "@/components/LoadingScreen"; +import { + User, + Settings, + Activity, + Globe, + Shield, + Bell, + Database, + Monitor, + Network, + Zap, + TrendingUp, + Users, + Server, + Eye, + Link2, + Wifi, + Cloud, + Lock, + ChevronRight, + RefreshCw, + AlertTriangle, + CheckCircle, + XCircle, + Circle, +} from "lucide-react"; + +interface SiteStatus { + name: string; + url: string; + status: 'online' | 'offline' | 'maintenance'; + lastCheck: string; + responseTime: number; + version: string; +} + +interface CrossSiteCommunication { + siteName: string; + lastSync: string; + dataExchanged: number; + status: 'connected' | 'disconnected' | 'syncing'; +} + +export default function Profile() { + const navigate = useNavigate(); + const { user, profile, loading: authLoading, updateProfile } = useAuth(); + const [isLoading, setIsLoading] = useState(true); + const [isSaving, setIsSaving] = useState(false); + + // Profile settings state + const [profileData, setProfileData] = useState({ + displayName: '', + bio: '', + company: '', + location: '', + website: '', + githubUsername: '', + twitterUsername: '', + linkedinUrl: '', + }); + + // Notification settings + const [notifications, setNotifications] = useState({ + emailNotifications: true, + pushNotifications: true, + projectUpdates: true, + marketingEmails: false, + securityAlerts: true, + }); + + // Privacy settings + const [privacy, setPrivacy] = useState({ + profileVisibility: 'public', + showEmail: false, + showProjects: true, + allowAnalytics: true, + }); + + // Overseer dashboard data + const [overseerData, setOverseerData] = useState({ + systemHealth: 98.5, + activeUsers: 1247, + totalProjects: 3592, + serverLoad: 23, + dataProcessed: 15.7, // GB + apiCalls: 45231, + errorRate: 0.03, + }); + + // Cross-site communication data + const [crossSiteData, setCrossSiteData] = useState([ + { + siteName: 'AeThex Labs', + lastSync: '2 minutes ago', + dataExchanged: 1.2, + status: 'connected', + }, + { + siteName: 'Development Portal', + lastSync: '5 minutes ago', + dataExchanged: 0.8, + status: 'syncing', + }, + { + siteName: 'Community Hub', + lastSync: '12 minutes ago', + dataExchanged: 2.1, + status: 'connected', + }, + ]); + + // Site monitoring data + const [siteStatuses, setSiteStatuses] = useState([ + { + name: 'Main Site', + url: 'https://core.aethex.biz', + status: 'online', + lastCheck: 'Just now', + responseTime: 245, + version: '1.0.0', + }, + { + name: 'API Gateway', + url: 'https://api.aethex.biz', + status: 'online', + lastCheck: '30 seconds ago', + responseTime: 123, + version: '2.1.3', + }, + { + name: 'Labs Portal', + url: 'https://labs.aethex.biz', + status: 'maintenance', + lastCheck: '2 minutes ago', + responseTime: 0, + version: '1.5.2', + }, + ]); + + useEffect(() => { + if (!authLoading && !user) { + navigate('/login'); + return; + } + + if (profile) { + setProfileData({ + displayName: profile.full_name || '', + bio: profile.bio || '', + company: profile.company || '', + location: profile.location || '', + website: profile.website || '', + githubUsername: profile.github_username || '', + twitterUsername: profile.twitter_username || '', + linkedinUrl: profile.linkedin_url || '', + }); + } + + setIsLoading(false); + }, [authLoading, user, profile, navigate]); + + const handleProfileSave = async () => { + if (!user) return; + + setIsSaving(true); + try { + await updateProfile({ + full_name: profileData.displayName, + bio: profileData.bio, + company: profileData.company, + location: profileData.location, + website: profileData.website, + github_username: profileData.githubUsername, + twitter_username: profileData.twitterUsername, + linkedin_url: profileData.linkedinUrl, + }); + + aethexToast({ + title: "Profile Updated", + description: "Your profile has been successfully updated.", + type: "success", + }); + } catch (error) { + aethexToast({ + title: "Update Failed", + description: "Failed to update profile. Please try again.", + type: "error", + }); + } finally { + setIsSaving(false); + } + }; + + const getStatusIcon = (status: string) => { + switch (status) { + case 'online': + case 'connected': + return ; + case 'offline': + case 'disconnected': + return ; + case 'maintenance': + case 'syncing': + return ; + default: + return ; + } + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'online': + case 'connected': + return 'bg-green-500'; + case 'offline': + case 'disconnected': + return 'bg-red-500'; + case 'maintenance': + case 'syncing': + return 'bg-yellow-500'; + default: + return 'bg-gray-400'; + } + }; + + if (authLoading || isLoading) { + return ; + } + + return ( + +
+
+ {/* Header */} +
+
+ + + + {profile?.full_name?.[0] || user?.email?.[0]?.toUpperCase()} + + +
+

+ {profile?.full_name || 'User Profile'} +

+

{user?.email}

+
+
+
+ + + + + + Profile + + + + Settings + + + + Overseer + + + + Network + + + + {/* Profile Settings Tab */} + + + + + + Profile Information + + + Update your profile information and social links. + + + +
+
+ + setProfileData({ ...profileData, displayName: e.target.value })} + className="bg-slate-900/50 border-slate-600 text-white" + /> +
+
+ + setProfileData({ ...profileData, company: e.target.value })} + className="bg-slate-900/50 border-slate-600 text-white" + /> +
+
+ + setProfileData({ ...profileData, location: e.target.value })} + className="bg-slate-900/50 border-slate-600 text-white" + /> +
+
+ + setProfileData({ ...profileData, website: e.target.value })} + className="bg-slate-900/50 border-slate-600 text-white" + /> +
+
+
+ +