// ============================================ // ALL REACT COMPONENTS FOR PROPTRACK // ============================================ const { useState, useEffect } = React; // ============================================ // ICONS // ============================================ const Icons = { TrendUp: () => ( ), Shield: () => ( ), Calendar: () => ( ), Target: () => ( ), ChartBar: () => ( ), Clipboard: () => ( ), Warning: () => ( ), Plus: () => ( ), Power: () => ( ), User: () => ( ), Menu: () => ( ), Close: () => ( ), Sun: () => ( ), Moon: () => ( ), Pencil: () => ( ), Trash: () => ( ), // Logo components LogoFull: () => (
PropTrack Prop Firm Management
), LogoMinimal: () => (
PropTrack
), }; // ============================================ // ONBOARDING TOUR COMPONENT // ============================================ function OnboardingTour({ onComplete }) { const [currentStep, setCurrentStep] = useState(0); const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 }); const [spotlightPosition, setSpotlightPosition] = useState({ top: 0, left: 0, width: 0, height: 0 }); const [arrowPosition, setArrowPosition] = useState('top'); const steps = [ { target: 'tour-filter-active', title: 'Active Accounts', description: 'This tab shows all your live prop firm challenges. Track your progress in real-time as you work towards getting funded!', position: 'bottom' }, { target: 'tour-filter-approved', title: 'Millionaire Loading...', description: 'When you pass a challenge, your account moves here! 🎉 This is your wall of victories.', position: 'bottom' }, { target: 'tour-filter-breached', title: 'Wall of Shame', description: 'Accounts that hit max drawdown end up here. Learn from them and come back stronger! 💪', position: 'bottom' }, { target: 'tour-add-account', title: 'Add New Account', description: 'Click this button to add a new prop firm account. Enter your challenge details and start tracking!', position: 'bottom' }, { target: 'tour-profile', title: 'Your Profile', description: 'View your profile, check your trial status, and see how much time you have left to use PropTrack.', position: 'bottom' } ]; useEffect(() => { positionTooltip(); window.addEventListener('resize', positionTooltip); return () => window.removeEventListener('resize', positionTooltip); }, [currentStep]); const positionTooltip = () => { const step = steps[currentStep]; const element = document.getElementById(step.target); if (!element) { console.warn('Tour element not found:', step.target); return; } const rect = element.getBoundingClientRect(); const padding = 8; // Set spotlight position setSpotlightPosition({ top: rect.top - padding, left: rect.left - padding, width: rect.width + (padding * 2), height: rect.height + (padding * 2) }); // Calculate tooltip position based on step's position preference const tooltipWidth = 320; const tooltipHeight = 180; let top, left, arrow; switch (step.position) { case 'bottom': top = rect.bottom + 20; left = Math.max(16, Math.min(rect.left + (rect.width / 2) - (tooltipWidth / 2), window.innerWidth - tooltipWidth - 16)); arrow = 'top'; break; case 'top': top = rect.top - tooltipHeight - 20; left = Math.max(16, Math.min(rect.left + (rect.width / 2) - (tooltipWidth / 2), window.innerWidth - tooltipWidth - 16)); arrow = 'bottom'; break; case 'left': top = rect.top + (rect.height / 2) - (tooltipHeight / 2); left = rect.left - tooltipWidth - 20; arrow = 'right'; break; case 'right': top = rect.top + (rect.height / 2) - (tooltipHeight / 2); left = rect.right + 20; arrow = 'left'; break; default: top = rect.bottom + 20; left = rect.left; arrow = 'top'; } // Keep tooltip in viewport if (top < 16) top = 16; if (top + tooltipHeight > window.innerHeight - 16) { top = rect.top - tooltipHeight - 20; arrow = 'bottom'; } setTooltipPosition({ top, left }); setArrowPosition(arrow); }; const handleNext = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1); } else { handleComplete(); } }; const handleSkip = () => { handleComplete(); }; const handleComplete = () => { localStorage.setItem('proptrack-tour-seen', 'true'); onComplete(); }; const step = steps[currentStep]; return (
{/* Dark overlay */}
{/* Spotlight */}
{/* Tooltip */}
{step.title}
{step.description}
{/* Step indicators */}
{steps.map((_, index) => (
))}
); } // ============================================ // LOGIN COMPONENT // ============================================ function LoginScreen({ onLogin }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const [resetEmail, setResetEmail] = useState(''); const [showReset, setShowReset] = useState(false); const [forceReset, setForceReset] = useState(false); const handleGoogleLogin = async () => { setError(''); setLoading(true); try { const provider = new firebase.auth.GoogleAuthProvider(); const result = await auth.signInWithPopup(provider); // Check if user document exists, create if not const userDoc = await db.collection('users').doc(result.user.uid).get(); if (!userDoc.exists) { // New Google user - create Firestore document await db.collection('users').doc(result.user.uid).set({ email: result.user.email, name: result.user.displayName, createdAt: firebase.firestore.FieldValue.serverTimestamp(), lastLogin: firebase.firestore.FieldValue.serverTimestamp(), accounts: [], trades: {} }); // Increment user count try { await db.collection('stats').doc('public').update({ totalUsers: firebase.firestore.FieldValue.increment(1), lastUpdated: firebase.firestore.FieldValue.serverTimestamp() }); } catch (err) { console.error('Error updating user count:', err); } } else { // Existing user - update last login await db.collection('users').doc(result.user.uid).update({ lastLogin: firebase.firestore.FieldValue.serverTimestamp() }); } onLogin(result.user); } catch (error) { console.error('Google login error:', error); if (error.code === 'auth/popup-closed-by-user') { setError('Login cancelled. Please try again.'); } else if (error.code === 'auth/popup-blocked') { setError('Popup blocked. Please enable popups for this site.'); } else { setError('Google login failed: ' + error.message); } } setLoading(false); }; const handleLogin = async (e) => { e.preventDefault(); setError(''); setLoading(true); try { const result = await auth.signInWithEmailAndPassword(email, password); try { const userDoc = await db.collection('users').doc(result.user.uid).get(); if (!userDoc.exists) { await db.collection('users').doc(result.user.uid).set({ email: result.user.email, createdAt: firebase.firestore.FieldValue.serverTimestamp(), needsPasswordReset: false, accounts: [], trades: {} }); // Increment user count for new email users try { await db.collection('stats').doc('public').set({ totalUsers: firebase.firestore.FieldValue.increment(1), lastUpdated: firebase.firestore.FieldValue.serverTimestamp() }, { merge: true }); } catch (err) { console.error('Error updating user count:', err); } onLogin(result.user); setLoading(false); return; } const userData = userDoc.data(); // Update last login await db.collection('users').doc(result.user.uid).update({ lastLogin: firebase.firestore.FieldValue.serverTimestamp() }); } catch (err) { console.error('User check error:', err); } onLogin(result.user); } catch (error) { console.error(error); if (error.code === 'auth/user-not-found') { setError('No account found. Please contact admin for access.'); } else if (error.code === 'auth/wrong-password') { setError('Incorrect password. Click "Reset Password" if you forgot it.'); } else if (error.code === 'auth/invalid-email') { setError('Please enter a valid email address.'); } else if (error.code === 'auth/too-many-requests') { setError('Too many failed attempts. Please try again later.'); } else { setError('Login failed: ' + error.message); } } setLoading(false); }; const handlePasswordReset = async () => { if (!resetEmail) { setError('Please enter your email address first'); return; } setLoading(true); setError(''); try { await auth.sendPasswordResetEmail(resetEmail, { url: window.location.origin, handleCodeInApp: false }); alert('Password reset email sent! Please check your inbox (and spam folder).'); if (forceReset) { setForceReset(false); setShowReset(false); setError('Check your email to set a new password, then login with your new password.'); } else { setShowReset(false); } setResetEmail(''); } catch (error) { console.error('Password reset error:', error); if (error.code === 'auth/user-not-found') { setError('No account found with this email address.'); } else { setError('Failed to send reset email. Please try again.'); } } setLoading(false); }; if (forceReset) { return (

Password Reset Required

First Time Login Detected

For security, please reset your password before continuing.

{error && (
{error}
)}
setResetEmail(e.target.value)} className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-800 border-0 rounded-lg text-slate-900 dark:text-slate-100" readOnly />
); } return (
{/* Marquee at top */}
Master Your Mind. Master Your Trades. Get Funded $$ Master Your Mind. Master Your Trades. Get Funded $$ Master Your Mind. Master Your Trades. Get Funded $$ Master Your Mind. Master Your Trades. Get Funded $$
{/* Login Form */}
{error && (
{error}
)} {!showReset ? (
{/* Google Sign-In Button (Primary) */} {/* Divider */}
OR
{/* Email/Password Form (Secondary) */}
{ setEmail(e.target.value); setResetEmail(e.target.value); }} required className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-800 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 dark:focus:ring-emerald-500 text-slate-900 dark:text-slate-100" placeholder="your@email.com" />
setPassword(e.target.value)} required className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-800 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 dark:focus:ring-emerald-500 text-slate-900 dark:text-slate-100" placeholder="••••••••" />
) : (
setResetEmail(e.target.value)} className="w-full px-4 py-3 bg-slate-50 dark:bg-slate-800 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 dark:focus:ring-emerald-500 text-slate-900 dark:text-slate-100" placeholder="your@email.com" />
)}

New users: Check email for password reset before login

{/* Marquee at bottom */}
Discipline Over Emotion. Strategy Over Chaos. Funded Over Failed $$ Discipline Over Emotion. Strategy Over Chaos. Funded Over Failed $$ Discipline Over Emotion. Strategy Over Chaos. Funded Over Failed $$ Discipline Over Emotion. Strategy Over Chaos. Funded Over Failed $$
); } // ============================================ // MAIN APP WITH AUTHENTICATION // ============================================ function App() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const unsubscribe = auth.onAuthStateChanged((user) => { setUser(user); setLoading(false); }); return () => unsubscribe(); }, []); const handleLogout = async () => { try { await auth.signOut(); setUser(null); } catch (error) { console.error('Error logging out:', error); } }; if (loading) { return (
); } if (!user) { return ; } return ; } // =================================================================== // PROPFIRMTRACKER - MAIN DASHBOARD COMPONENT // =================================================================== function PropFirmTracker({ user, onLogout }) { const [accounts, setAccounts] = useState([]); const [showForm, setShowForm] = useState(false); const [currentAccount, setCurrentAccount] = useState(null); const [viewingAccount, setViewingAccount] = useState(null); const [tradeJournals, setTradeJournals] = useState({}); const [saving, setSaving] = useState(false); const [filterStatus, setFilterStatus] = useState('ALL'); const [deleteConfirm, setDeleteConfirm] = useState(null); const [showProfile, setShowProfile] = useState(false); const [userData, setUserData] = useState(null); const [showMobileMenu, setShowMobileMenu] = useState(false); const [showWelcome, setShowWelcome] = useState(false); const [showTour, setShowTour] = useState(false); const [theme, setTheme] = useState(() => { // Initialize from localStorage or default to light const saved = localStorage.getItem('proptrack-theme'); return saved || 'light'; }); // Apply theme on mount and when it changes useEffect(() => { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('proptrack-theme', theme); }, [theme]); const toggleTheme = () => { setTheme(prev => prev === 'light' ? 'dark' : 'light'); }; const [formData, setFormData] = useState({ accountName: '', propFirmName: '', accountSize: '', accountBalance: '', peakBalance: '', // Track highest balance for trailing drawdown targetPercent: '', challengeStartDate: '', daysToPass: '', riskPerTrade: '', dailyDrawdownPercent: '', maxDrawdownType: 'static', maxDrawdownLevel: '' }); useEffect(() => { loadUserData(); }, [user]); const loadUserData = async () => { try { const userDoc = await db.collection('users').doc(user.uid).get(); if (userDoc.exists) { const data = userDoc.data(); setAccounts(data.accounts || []); setTradeJournals(data.trades || {}); setUserData(data); // Store full user data for profile // Check if first-time user (no accounts and hasn't seen welcome) const hasSeenWelcome = localStorage.getItem('proptrack-welcome-seen'); if (!hasSeenWelcome && (!data.accounts || data.accounts.length === 0)) { setShowWelcome(true); } } else { await db.collection('users').doc(user.uid).set({ email: user.email, createdAt: firebase.firestore.FieldValue.serverTimestamp(), accounts: [], trades: {} }); setUserData({ email: user.email, createdAt: new Date(), accounts: [], trades: {} }); // Show welcome for brand new users setShowWelcome(true); } } catch (error) { console.error('Error loading user data:', error); const savedAccounts = localStorage.getItem('propFirmAccounts'); const savedTrades = localStorage.getItem('tradeJournals'); if (savedAccounts) setAccounts(JSON.parse(savedAccounts)); if (savedTrades) setTradeJournals(JSON.parse(savedTrades)); } }; const saveToFirestore = async (newAccounts, newTrades) => { setSaving(true); try { await db.collection('users').doc(user.uid).update({ accounts: newAccounts, trades: newTrades, lastUpdated: firebase.firestore.FieldValue.serverTimestamp() }); localStorage.setItem('propFirmAccounts', JSON.stringify(newAccounts)); localStorage.setItem('tradeJournals', JSON.stringify(newTrades)); } catch (error) { console.error('Error saving to Firestore:', error); localStorage.setItem('propFirmAccounts', JSON.stringify(newAccounts)); localStorage.setItem('tradeJournals', JSON.stringify(newTrades)); } setSaving(false); }; useEffect(() => { if (accounts.length > 0 || Object.keys(tradeJournals).length > 0) { const debounceTimer = setTimeout(() => { saveToFirestore(accounts, tradeJournals); }, 1000); return () => clearTimeout(debounceTimer); } }, [accounts, tradeJournals]); const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault(); // Prepare account data let accountData = { ...formData }; // For new accounts: initialize peakBalance if (!currentAccount) { accountData.peakBalance = formData.accountBalance || formData.accountSize; } else { // For existing accounts: update peakBalance if balance increased const oldAccount = accounts.find(acc => acc.id === currentAccount.id); const oldBalance = parseFloat(oldAccount.accountBalance); const newBalance = parseFloat(formData.accountBalance); const currentPeak = parseFloat(oldAccount.peakBalance || oldBalance); // Update peak if new balance is higher accountData.peakBalance = Math.max(newBalance, currentPeak).toString(); const balanceChange = newBalance - oldBalance; // Auto-create trade entry if balance changed if (balanceChange !== 0 && !isNaN(balanceChange)) { const autoTrade = { id: Date.now(), date: new Date().toISOString().split('T')[0], pnl: balanceChange, mood: 'Balance Update', result: balanceChange >= 0 ? 'Win' : 'Loss' }; // Add auto-generated trade to journal setTradeJournals(prev => ({ ...prev, [currentAccount.id]: [...(prev[currentAccount.id] || []), autoTrade] })); } } const newAccount = { id: currentAccount ? currentAccount.id : Date.now(), ...accountData, createdAt: currentAccount ? currentAccount.createdAt : new Date().toISOString() }; if (currentAccount) { setAccounts(prev => prev.map(acc => acc.id === currentAccount.id ? newAccount : acc )); setCurrentAccount(null); window.toast.success('Account updated successfully!'); } else { setAccounts(prev => [...prev, newAccount]); window.toast.success('Account created successfully!'); } setShowForm(false); resetForm(); }; const resetForm = () => { setFormData({ accountName: '', propFirmName: '', accountSize: '', accountBalance: '', peakBalance: '', targetPercent: '', challengeStartDate: '', daysToPass: '', riskPerTrade: '', dailyDrawdownPercent: '', maxDrawdownType: 'static', maxDrawdownLevel: '' }); }; const editAccount = (account) => { setCurrentAccount(account); setFormData({ accountName: account.accountName, propFirmName: account.propFirmName, accountSize: account.accountSize, accountBalance: account.accountBalance, peakBalance: account.peakBalance || account.accountBalance, // Fallback for existing accounts targetPercent: account.targetPercent, challengeStartDate: account.challengeStartDate, daysToPass: account.daysToPass, riskPerTrade: account.riskPerTrade, dailyDrawdownPercent: account.dailyDrawdownPercent, maxDrawdownType: account.maxDrawdownType, maxDrawdownLevel: account.maxDrawdownLevel }); setShowForm(true); setViewingAccount(null); window.scrollTo({ top: 0, behavior: 'smooth' }); }; const deleteAccount = (id) => { setDeleteConfirm(id); setViewingAccount(null); // Exit detail view to show modal }; const confirmDelete = () => { if (deleteConfirm) { const accountName = accounts.find(acc => acc.id === deleteConfirm)?.accountName || 'Account'; setAccounts(prev => prev.filter(acc => acc.id !== deleteConfirm)); setTradeJournals(prev => { const updated = { ...prev }; delete updated[deleteConfirm]; return updated; }); setDeleteConfirm(null); setViewingAccount(null); window.toast.error(`${accountName} deleted`); } }; const cancelDelete = () => { setDeleteConfirm(null); }; const updateAccountBalance = (accountId, tradeAmount) => { setAccounts(prev => prev.map(acc => { if (acc.id === accountId) { const newBalance = parseFloat(acc.accountBalance) + tradeAmount; return { ...acc, accountBalance: newBalance.toFixed(2) }; } return acc; })); }; // Create demo accounts with sample data (one for each status) const createDemoAccount = () => { const now = Date.now(); // Account 1: ACTIVE - In progress const activeAccountId = now; const activeAccount = { id: activeAccountId, accountName: "FTMO Challenge - Active", propFirmName: "FTMO", accountSize: "10000", accountBalance: "10250", peakBalance: "10250", targetPercent: "10", challengeStartDate: new Date(now - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], daysToPass: "30", riskPerTrade: "1", dailyDrawdownPercent: "5", maxDrawdownType: "static", maxDrawdownLevel: "10", createdAt: new Date().toISOString() }; const activeTrades = [ { id: now + 1, date: new Date(now - 6 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 150, mood: "Confident", result: "Win" }, { id: now + 2, date: new Date(now - 5 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: -50, mood: "Frustrated", result: "Loss" }, { id: now + 3, date: new Date(now - 3 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 100, mood: "Disciplined", result: "Win" }, { id: now + 4, date: new Date(now - 1 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 50, mood: "Patient", result: "Win" } ]; // Account 2: APPROVED - Reached target! (Millionaire Loading) const approvedAccountId = now + 1000; const approvedAccount = { id: approvedAccountId, accountName: "MyForexFunds - Passed!", propFirmName: "MyForexFunds", accountSize: "5000", accountBalance: "5500", peakBalance: "5500", targetPercent: "10", challengeStartDate: new Date(now - 20 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], daysToPass: "30", riskPerTrade: "1", dailyDrawdownPercent: "5", maxDrawdownType: "trailing", maxDrawdownLevel: "10", createdAt: new Date().toISOString() }; const approvedTrades = [ { id: now + 5, date: new Date(now - 19 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 200, mood: "Confident", result: "Win" }, { id: now + 6, date: new Date(now - 15 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 150, mood: "Disciplined", result: "Win" }, { id: now + 7, date: new Date(now - 10 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: 150, mood: "Patient", result: "Win" } ]; // Account 3: BREACHED - Hit max drawdown (Wall of Shame) const breachedAccountId = now + 2000; const breachedAccount = { id: breachedAccountId, accountName: "FundedNext - Failed", propFirmName: "FundedNext", accountSize: "15000", accountBalance: "13400", peakBalance: "15000", targetPercent: "10", challengeStartDate: new Date(now - 15 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], daysToPass: "30", riskPerTrade: "2", dailyDrawdownPercent: "5", maxDrawdownType: "static", maxDrawdownLevel: "10", createdAt: new Date().toISOString() }; const breachedTrades = [ { id: now + 8, date: new Date(now - 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: -300, mood: "Overconfident", result: "Loss" }, { id: now + 9, date: new Date(now - 13 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: -400, mood: "Revenge Trading", result: "Loss" }, { id: now + 10, date: new Date(now - 12 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: -500, mood: "Emotional", result: "Loss" }, { id: now + 11, date: new Date(now - 11 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], pnl: -400, mood: "Desperate", result: "Loss" } ]; setAccounts(prev => [...prev, activeAccount, approvedAccount, breachedAccount]); setTradeJournals(prev => ({ ...prev, [activeAccountId]: activeTrades, [approvedAccountId]: approvedTrades, [breachedAccountId]: breachedTrades })); localStorage.setItem('proptrack-welcome-seen', 'true'); setShowWelcome(false); // Start tour after a short delay to let UI settle const hasSeenTour = localStorage.getItem('proptrack-tour-seen'); if (!hasSeenTour) { setTimeout(() => setShowTour(true), 500); } window.toast.success('3 demo accounts created! Try filtering by Active, Millionaire Loading, and Wall of Shame.'); }; const skipOnboarding = () => { localStorage.setItem('proptrack-welcome-seen', 'true'); setShowWelcome(false); // Start tour after a short delay to let UI settle const hasSeenTour = localStorage.getItem('proptrack-tour-seen'); if (!hasSeenTour) { setTimeout(() => setShowTour(true), 500); } }; if (viewingAccount) { return a.id === viewingAccount.id) || viewingAccount} trades={tradeJournals[viewingAccount.id] || []} onAddTrade={(trade) => { setTradeJournals(prev => ({ ...prev, [viewingAccount.id]: [...(prev[viewingAccount.id] || []), trade] })); updateAccountBalance(viewingAccount.id, trade.pnl); }} onDeleteTrade={(tradeId) => { const trades = tradeJournals[viewingAccount.id] || []; const tradeToDelete = trades.find(t => t.id === tradeId); if (tradeToDelete) { setTradeJournals(prev => ({ ...prev, [viewingAccount.id]: prev[viewingAccount.id].filter(t => t.id !== tradeId) })); updateAccountBalance(viewingAccount.id, -tradeToDelete.pnl); window.toast.error('Trade removed'); } }} onBack={() => setViewingAccount(null)} onEdit={editAccount} onDelete={deleteAccount} />; } return (
{/* Welcome Modal for First-Time Users */} {showWelcome && (

Welcome to PropTrack! 🎉

Your journey to prop firm success starts here

{/* Feature 1 */}
📊

Track Multiple Accounts

Manage all your prop firm challenges in one place. See real-time progress, risk metrics, and days remaining.

{/* Feature 2 */}
⚠️

Smart Risk Management

Know exactly how many trades you can lose before hitting max drawdown. Never blow another account.

{/* Feature 3 */}
📝

Trade Journal & Analytics

Log every trade with mood tracking. See your P&L graph and identify patterns in your trading psychology.

🎯 Pro Tip: Start with our demo account to explore features risk-free, or jump right in with your real challenge!

)} {/* Onboarding Tour */} {showTour && ( setShowTour(false)} /> )} {/* Header */}

{user.email}

{/* Desktop Navigation */}
{saving && (
Saving...
)} {!showForm && ( )}
{/* Mobile Hamburger Menu */}
{saving && (
)}
{/* Mobile Menu Dropdown */} {showMobileMenu && (
{!showForm && ( )}
)}
{/* Profile Modal */} {showProfile && userData && (

Profile

{/* Profile Photo & Name */}
{user.photoURL ? ( Profile ) : (
)}

{userData.name || user.displayName || 'PropTrack User'}

{user.email}

{/* Auth Type */}
Sign-in Method {userData.name ? ( <> Google ) : 'Email'}
{/* Account Info */}
Member Since {userData.createdAt && userData.createdAt.toDate ? new Date(userData.createdAt.toDate()).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Unknown'}
Last Login {userData.lastLogin && userData.lastLogin.toDate ? new Date(userData.lastLogin.toDate()).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'Just now'}
Total Accounts {accounts.length}
{/* Trial Status */} {userData.createdAt && userData.createdAt.toDate && !userData.isPaid && (
Free Trial {(() => { const createdDate = userData.createdAt.toDate(); const now = new Date(); const diffDays = Math.floor((now - createdDate) / (1000 * 60 * 60 * 24)); const daysRemaining = 30 - diffDays; return daysRemaining > 0 ? `${daysRemaining} days left` : 'Expired'; })()}
)} {userData.isPaid && (
Premium - Unlimited Access
)} {/* Logout Button */}
)} {/* Delete Confirmation Modal */} {deleteConfirm && (

Delete Account?

Are you sure you want to delete this account? This action cannot be undone and will permanently remove all associated trade history.

)} {/* Form Modal */} {showForm && (

{currentAccount ? 'Edit Account' : 'Add New Account'}

)} {/* Filter Tabs - Always show (needed for tour) */}
{/* Accounts Grid */}
{accounts.length === 0 && (

No accounts yet

Add your first prop firm account to get started

)} {(() => { const filteredAccounts = accounts.filter(account => { // Calculate account status for filtering const metrics = calculateMetrics(account); const size = parseFloat(account.accountSize); const balance = parseFloat(account.accountBalance); const targetInDollars = parseFloat(metrics.targetInDollars); const maxDrawdownAmount = parseFloat(metrics.maxDrawdownAmount); const minBalance = size - maxDrawdownAmount; let accountStatus = 'ACTIVE'; if (balance >= size + targetInDollars) { accountStatus = 'APPROVED'; } else if (balance <= minBalance || metrics.totalTradesBeforeBlowout === 0 || metrics.dailyTradesLeft === 0) { accountStatus = 'BREACHED'; } // Filter logic if (filterStatus === 'ALL') { return accountStatus === 'ACTIVE'; } return accountStatus === filterStatus; }); // Show empty state if no accounts match filter if (filteredAccounts.length === 0 && accounts.length > 0) { return (

{filterStatus === 'APPROVED' && '🎯 No millionaires yet!'} {filterStatus === 'BREACHED' && '🎉 No blown accounts!'} {filterStatus === 'ALL' && 'No active accounts'}

{filterStatus === 'APPROVED' && 'Keep grinding to reach your targets!'} {filterStatus === 'BREACHED' && 'Great job staying disciplined!'} {filterStatus === 'ALL' && 'All accounts have reached a final state'}

); } return filteredAccounts.map(account => { const metrics = calculateMetrics(account); const size = parseFloat(account.accountSize); const balance = parseFloat(account.accountBalance); const targetInDollars = parseFloat(metrics.targetInDollars); const maxDrawdownAmount = parseFloat(metrics.maxDrawdownAmount); // Calculate the progress bar scale // 0% = Max Drawdown hit (size - maxDD) // 50% = Break even (size) // 100% = Target reached (size + target) const minBalance = size - maxDrawdownAmount; // Max drawdown limit const maxBalance = size + targetInDollars; // Target const totalRange = maxDrawdownAmount + targetInDollars; // Current position from the bottom of the range let progress = ((balance - minBalance) / totalRange) * 100; progress = Math.min(Math.max(progress, 0), 100); const profitLoss = parseFloat(metrics.overallProfit); const profitLossPercent = ((profitLoss / size) * 100).toFixed(1); const buffer = parseFloat(metrics.remainingLossAllowed); const riskPerTrade = parseFloat(account.riskPerTrade || 0); const riskInDollars = (riskPerTrade / 100) * balance; // Determine account status let accountStatus = 'ACTIVE'; if (balance >= size + targetInDollars) { accountStatus = 'APPROVED'; } else if (balance <= minBalance || metrics.totalTradesBeforeBlowout === 0 || metrics.dailyTradesLeft === 0) { accountStatus = 'BREACHED'; } return (
setViewingAccount(account)} className="modern-card p-5 hover:shadow-lg transition-all cursor-pointer group relative overflow-hidden" > {/* Status Stamp */} {accountStatus !== 'ACTIVE' && (
{accountStatus}
)}

{account.accountName || `$${(size/1000).toFixed(0)}k Challenge`}

{account.propFirmName}

{/* P&L */}
P&L
= 0 ? 'text-emerald-600' : 'text-red-600'}`}> {profitLoss >= 0 ? '+' : '-'}${Math.abs(profitLoss).toLocaleString()} = 0 ? 'text-emerald-600' : 'text-red-600'}`}> ({profitLossPercent}%)
= 0 ? 'bg-emerald-500' : 'bg-red-500'}`} style={{width: `${progress}%`}} >
{/* Balance */}
Balance ${balance.toLocaleString()} / ${size.toLocaleString()}
{/* Key Metrics */}
Daily Target

${parseFloat(metrics.dailyProfitNeeded).toLocaleString()}

{metrics.daysRemaining} days left

Trades Left

{metrics.dailyTradesLeft} / {metrics.totalTradesBeforeBlowout}

Risk: ${riskInDollars.toFixed(2)} ({riskPerTrade}%)

); }); })()}
); } // NOTE: AccountDetailView component will be added in the next part due to character limit // Continuing in index.html with remaining components...