import LedDisplay from '@/components/Display/LedDisplay'; import InlineForm from '@/components/Display/InlineForm'; import ProgressBar from '@/components/Display/ProgressBar'; import StatsBox from '@/components/Display/StatsBox'; import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; interface PurchaseSummary { total_shares: number; total_investment: number; average_cost_per_share: number; } interface CurrentPrice { current_price: number | null; } export default function Dashboard() { const [purchaseData, setPurchaseData] = useState({ total_shares: 0, total_investment: 0, average_cost_per_share: 0, }); const [priceData, setPriceData] = useState({ current_price: null, }); const [showProgressBar, setShowProgressBar] = useState(false); const [showStatsBox, setShowStatsBox] = useState(false); const [activeForm, setActiveForm] = useState<'purchase' | 'milestone' | null>(null); const [loading, setLoading] = useState(true); // Fetch purchase summary and current price useEffect(() => { const fetchData = async () => { try { const [purchaseResponse, priceResponse] = await Promise.all([ fetch('/purchases/summary'), fetch('/pricing/current'), ]); if (purchaseResponse.ok) { const purchases = await purchaseResponse.json(); setPurchaseData(purchases); } if (priceResponse.ok) { const price = await priceResponse.json(); setPriceData(price); } } catch (error) { console.error('Failed to fetch data:', error); } finally { setLoading(false); } }; fetchData(); }, []); // Refresh data after successful purchase const handlePurchaseSuccess = async () => { try { const purchaseResponse = await fetch('/purchases/summary'); if (purchaseResponse.ok) { const purchases = await purchaseResponse.json(); setPurchaseData(purchases); } } catch (error) { console.error('Failed to refresh purchase data:', error); } }; // Calculate portfolio stats const currentValue = priceData.current_price ? purchaseData.total_shares * priceData.current_price : undefined; const profitLoss = currentValue ? currentValue - purchaseData.total_investment : undefined; const profitLossPercentage = profitLoss && purchaseData.total_investment > 0 ? (profitLoss / purchaseData.total_investment) * 100 : undefined; const statsData = { totalShares: purchaseData.total_shares, totalInvestment: purchaseData.total_investment, averageCostPerShare: purchaseData.average_cost_per_share, currentPrice: priceData.current_price || undefined, currentValue, profitLoss, profitLossPercentage, }; if (loading) { return ( <>
LOADING...
); } // Toggle handlers with cascading behavior const handleLedClick = () => { const newShowProgressBar = !showProgressBar; setShowProgressBar(newShowProgressBar); if (!newShowProgressBar) { // If hiding progress bar, also hide stats box setShowStatsBox(false); } }; const handleProgressClick = () => { setShowStatsBox(!showStatsBox); }; return ( <> {/* Stacked Layout */}
{/* Box 1: LED Number Display */} {/* Box 2: Progress Bar (toggleable) */}
{/* Box 3: Stats Box (toggleable) */}
setActiveForm('purchase')} onAddMilestone={() => setActiveForm('milestone')} />
{/* Box 4: Forms (only when active form is set) */}
setActiveForm(null)} onPurchaseSuccess={handlePurchaseSuccess} onMilestoneSuccess={() => { console.log('Milestone added successfully'); }} />
); }