import React, { useState, useRef, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useAuth } from '@/contexts/AuthContext'; import HeroSection from './HeroSection'; import TokenomicsSection from './TokenomicsSection'; import PalletsGrid from './PalletsGrid'; import ChainSpecs from './ChainSpecs'; import TrustScoreCalculator from './TrustScoreCalculator'; import { NetworkStats } from './NetworkStats'; import { LanguageSwitcher } from './LanguageSwitcher'; import NotificationBell from './notifications/NotificationBell'; import ProposalWizard from './proposals/ProposalWizard'; import DelegationManager from './delegation/DelegationManager'; import { ForumOverview } from './forum/ForumOverview'; import { ModerationPanel } from './forum/ModerationPanel'; import { TreasuryOverview } from './treasury/TreasuryOverview'; import { FundingProposal } from './treasury/FundingProposal'; import { SpendingHistory } from './treasury/SpendingHistory'; import { MultiSigApproval } from './treasury/MultiSigApproval'; import { ExternalLink, Award, FileEdit, Users2, MessageSquare, ShieldCheck, Wifi, WifiOff, Wallet, DollarSign, PiggyBank, History, Key, TrendingUp, ArrowRightLeft, Lock, LogIn, LayoutDashboard, Settings, Users, Droplet, Mail, Coins, Menu, X, ChevronDown } from 'lucide-react'; import GovernanceInterface from './GovernanceInterface'; import RewardDistribution from './RewardDistribution'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { useWebSocket } from '@/contexts/WebSocketContext'; import { StakingDashboard } from './staking/StakingDashboard'; import { MultiSigWallet } from './wallet/MultiSigWallet'; import { useWallet } from '@/contexts/WalletContext'; import { PezkuwiWalletButton } from './PezkuwiWalletButton'; import { DEXDashboard } from './dex/DEXDashboard'; import { P2PDashboard } from './p2p/P2PDashboard'; import EducationPlatform from '../pages/EducationPlatform'; const AppLayout: React.FC = () => { const navigate = useNavigate(); const { user, signOut } = useAuth(); const [showProposalWizard, setShowProposalWizard] = useState(false); const [showDelegation, setShowDelegation] = useState(false); const [showForum, setShowForum] = useState(false); const [showModeration, setShowModeration] = useState(false); const [showTreasury, setShowTreasury] = useState(false); const [treasuryTab, setTreasuryTab] = useState('overview'); const [showStaking, setShowStaking] = useState(false); const [showMultiSig, setShowMultiSig] = useState(false); const [showDEX, setShowDEX] = useState(false); const [showEducation, setShowEducation] = useState(false); const [showP2P, setShowP2P] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [openMenu, setOpenMenu] = useState(null); const gridRef = useRef(null); const { t } = useTranslation(); const { isConnected } = useWebSocket(); useWallet(); const [, _setIsAdmin] = useState(false); // Close dropdown on outside click useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (gridRef.current && !gridRef.current.contains(e.target as Node)) { setOpenMenu(null); } }; if (openMenu) { document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); } }, [openMenu]); // Admin status is handled by AuthContext via wallet whitelist // Supabase admin_roles is optional (table may not exist) React.useEffect(() => { _setIsAdmin(false); // Admin status managed by AuthContext }, [user]); return (
{/* Navigation */} {/* Button Grid (logged in only) */} {user && (
{/* Dashboard */} {/* Wallet */} {/* Be Citizen */} {/* PEZMessage */} {/* Trading (dropdown) */}
{openMenu === 'trading' && (
)}
{/* Education */} {/* Governance (dropdown) */}
{openMenu === 'governance' && (
)}
{/* Logout */}
)} {/* Mobile Menu Panel */} {mobileMenuOpen && (
setMobileMenuOpen(false)} />
{user ? ( <>
{t('nav.governance')}
{t('nav.trading')}
) : ( <> )}
)} {/* Main Content */}
{/* Conditional Rendering for Features */} {showDEX ? (
) : showProposalWizard ? (
{ if (import.meta.env.DEV) console.log('Proposal created:', proposal); setShowProposalWizard(false); }} onCancel={() => setShowProposalWizard(false)} />
) : showDelegation ? (
) : showForum ? (
) : showModeration ? (
) : showTreasury ? (

{t('treasury.title', 'Treasury Management')}

{t('treasury.subtitle', 'Track funds, submit proposals, and manage community resources')}

{t('treasury.overview', 'Overview')} {t('treasury.proposals', 'Funding Proposals')} {t('treasury.history', 'Spending History')} {t('treasury.approvals', 'Multi-Sig Approvals')}
) : showStaking ? (

{t('staking.title')}

{t('staking.subtitle')}

) : showMultiSig ? (

{t('multiSig.title')}

{t('multiSig.subtitle')}

) : showEducation ? (
) : showP2P ? (
) : ( <>
)} {(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showMultiSig || showEducation || showP2P) && (
)}
{/* Footer */}
); }; export default AppLayout;