import LedCounter from '@/components/Display/LedCounter';
import MilestoneModal from '@/components/Display/MilestoneModal';
import PurchaseModal from '@/components/Display/PurchaseModal';
import StatsPanel from '@/components/Display/StatsPanel';
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 [showStats, setShowStats] = useState(false);
const [showPurchaseModal, setShowPurchaseModal] = useState(false);
const [showMilestoneModal, setShowMilestoneModal] = useState(false);
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 (
<>
);
}
return (
<>
{/* Main LED Display */}
setShowStats(!showStats)}
showStats={showStats}
onAddPurchase={() => setShowPurchaseModal(true)}
onAddMilestone={() => setShowMilestoneModal(true)}
/>
{/* Stats Panel */}
{/* Purchase Modal */}
setShowPurchaseModal(false)}
onSuccess={handlePurchaseSuccess}
/>
{/* Milestone Modal */}
setShowMilestoneModal(false)}
onSuccess={() => {
// Could refresh milestone data here if needed
console.log('Milestone added successfully');
}}
/>
);
}