33 - Onboarding: CreateTrackerStep, update OnboardingFlow, fix dashboard fetch URLs
This commit is contained in:
parent
22e3394cb1
commit
5c1f3bb183
5 changed files with 256 additions and 117 deletions
|
|
@ -34,16 +34,16 @@ public function store(Request $request): JsonResponse
|
|||
|
||||
$user = User::default();
|
||||
|
||||
if ($user->tracker) {
|
||||
return response()->json(['error' => 'Tracker already exists.'], 409);
|
||||
}
|
||||
|
||||
$assetId = null;
|
||||
if (! empty($validated['symbol'])) {
|
||||
$asset = Asset::findOrCreateBySymbol($validated['symbol'], $validated['full_name'] ?? null);
|
||||
$assetId = $asset->id;
|
||||
}
|
||||
|
||||
if ($user->tracker) {
|
||||
return response()->json(['error' => 'Tracker already exists.'], 409);
|
||||
}
|
||||
|
||||
$tracker = $user->tracker()->create([
|
||||
'label' => $validated['label'],
|
||||
'unit' => $validated['unit'],
|
||||
|
|
@ -79,12 +79,19 @@ public function update(Request $request): JsonResponse
|
|||
}
|
||||
}
|
||||
|
||||
$update = array_filter([
|
||||
'label' => $validated['label'] ?? null,
|
||||
'unit' => $validated['unit'] ?? null,
|
||||
'price_tracking_enabled' => $validated['price_tracking_enabled'] ?? null,
|
||||
'asset_id' => $tracker->asset_id,
|
||||
], fn ($v) => $v !== null);
|
||||
$update = [];
|
||||
if (isset($validated['label'])) {
|
||||
$update['label'] = $validated['label'];
|
||||
}
|
||||
if (isset($validated['unit'])) {
|
||||
$update['unit'] = $validated['unit'];
|
||||
}
|
||||
if (array_key_exists('price_tracking_enabled', $validated)) {
|
||||
$update['price_tracking_enabled'] = $validated['price_tracking_enabled'];
|
||||
}
|
||||
if (array_key_exists('symbol', $validated)) {
|
||||
$update['asset_id'] = $tracker->asset_id;
|
||||
}
|
||||
|
||||
$tracker->update($update);
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ interface AssetSetupFormProps {
|
|||
}
|
||||
|
||||
export default function AssetSetupForm({ onSuccess, onCancel }: AssetSetupFormProps) {
|
||||
const { data, setData, post, processing, errors } = useForm<AssetFormData>({
|
||||
const { data, setData, patch, processing, errors } = useForm<AssetFormData>({
|
||||
symbol: '',
|
||||
full_name: '',
|
||||
});
|
||||
|
|
@ -28,13 +28,13 @@ export default function AssetSetupForm({ onSuccess, onCancel }: AssetSetupFormPr
|
|||
useEffect(() => {
|
||||
const fetchCurrentAsset = async () => {
|
||||
try {
|
||||
const response = await fetch('/assets/current');
|
||||
const response = await fetch('/tracker');
|
||||
if (response.ok) {
|
||||
const assetData = await response.json();
|
||||
if (assetData.asset) {
|
||||
const tracker = await response.json();
|
||||
if (tracker?.asset) {
|
||||
setData({
|
||||
symbol: assetData.asset.symbol || '',
|
||||
full_name: assetData.asset.full_name || '',
|
||||
symbol: tracker.asset.symbol || '',
|
||||
full_name: tracker.asset.full_name || '',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ export default function AssetSetupForm({ onSuccess, onCancel }: AssetSetupFormPr
|
|||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
post(route('assets.set-current'), {
|
||||
patch(route('tracker.update'), {
|
||||
onSuccess: () => {
|
||||
if (onSuccess) onSuccess();
|
||||
},
|
||||
|
|
|
|||
161
resources/js/components/Onboarding/CreateTrackerStep.tsx
Normal file
161
resources/js/components/Onboarding/CreateTrackerStep.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import InputError from '@/components/InputError';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
import { FormEventHandler, useState } from 'react';
|
||||
import ComponentTitle from '@/components/ui/ComponentTitle';
|
||||
|
||||
interface TrackerFormData {
|
||||
label: string;
|
||||
unit: string;
|
||||
price_tracking_enabled: string;
|
||||
symbol: string;
|
||||
full_name: string;
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
interface CreateTrackerStepProps {
|
||||
onSuccess: (priceTrackingEnabled: boolean) => void;
|
||||
}
|
||||
|
||||
export default function CreateTrackerStep({ onSuccess }: CreateTrackerStepProps) {
|
||||
const [priceTracking, setPriceTracking] = useState(false);
|
||||
|
||||
const { data, setData, post, processing, errors } = useForm<TrackerFormData>({
|
||||
label: '',
|
||||
unit: '',
|
||||
price_tracking_enabled: '0',
|
||||
symbol: '',
|
||||
full_name: '',
|
||||
});
|
||||
|
||||
const togglePriceTracking = (enabled: boolean) => {
|
||||
setPriceTracking(enabled);
|
||||
setData({
|
||||
...data,
|
||||
price_tracking_enabled: enabled ? '1' : '0',
|
||||
symbol: enabled ? data.symbol : '',
|
||||
full_name: enabled ? data.full_name : '',
|
||||
});
|
||||
};
|
||||
|
||||
const submit: FormEventHandler = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
post(route('tracker.store'), {
|
||||
onSuccess: () => {
|
||||
onSuccess(priceTracking);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="space-y-4">
|
||||
<ComponentTitle>SET UP YOUR TRACKER</ComponentTitle>
|
||||
<p className="text-sm text-red-400/60 font-mono">
|
||||
[SYSTEM] What are you tracking?
|
||||
</p>
|
||||
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="label" className="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||||
> Tracker Name
|
||||
</Label>
|
||||
<Input
|
||||
id="label"
|
||||
type="text"
|
||||
placeholder="My Portfolio"
|
||||
value={data.label}
|
||||
onChange={(e) => setData('label', e.target.value)}
|
||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none focus:shadow-[0_0_10px_rgba(239,68,68,0.5)] placeholder:text-red-400/40 transition-all"
|
||||
/>
|
||||
<p className="text-xs text-red-400/60 mt-1 font-mono">
|
||||
[REQUIRED] e.g. "My Portfolio", "Books Read", "KM Run"
|
||||
</p>
|
||||
<InputError message={errors.label} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="unit" className="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||||
> Unit
|
||||
</Label>
|
||||
<Input
|
||||
id="unit"
|
||||
type="text"
|
||||
placeholder="shares"
|
||||
value={data.unit}
|
||||
onChange={(e) => setData('unit', e.target.value)}
|
||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none focus:shadow-[0_0_10px_rgba(239,68,68,0.5)] placeholder:text-red-400/40 transition-all"
|
||||
/>
|
||||
<p className="text-xs text-red-400/60 mt-1 font-mono">
|
||||
[REQUIRED] e.g. "shares", "books", "km"
|
||||
</p>
|
||||
<InputError message={errors.unit} />
|
||||
</div>
|
||||
|
||||
<div className="border border-red-500/30 p-4 space-y-3">
|
||||
<label className="flex items-center gap-3 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={priceTracking}
|
||||
onChange={(e) => togglePriceTracking(e.target.checked)}
|
||||
className="w-4 h-4 accent-red-500"
|
||||
/>
|
||||
<span className="text-red-400 font-mono text-sm uppercase tracking-wider group-hover:text-red-300">
|
||||
Enable price tracking
|
||||
</span>
|
||||
</label>
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
Track market price, portfolio value, and P&L. Requires an asset symbol.
|
||||
</p>
|
||||
|
||||
{priceTracking && (
|
||||
<div className="space-y-3 pt-2">
|
||||
<div>
|
||||
<Label htmlFor="symbol" className="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||||
> Asset Symbol
|
||||
</Label>
|
||||
<Input
|
||||
id="symbol"
|
||||
type="text"
|
||||
placeholder="VWCE"
|
||||
value={data.symbol}
|
||||
onChange={(e) => setData('symbol', e.target.value.toUpperCase())}
|
||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none focus:shadow-[0_0_10px_rgba(239,68,68,0.5)] placeholder:text-red-400/40 transition-all"
|
||||
/>
|
||||
<InputError message={errors.symbol} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="full_name" className="text-red-400 font-mono text-xs uppercase tracking-wider">
|
||||
> Full Name (Optional)
|
||||
</Label>
|
||||
<Input
|
||||
id="full_name"
|
||||
type="text"
|
||||
placeholder="Vanguard FTSE All-World UCITS ETF"
|
||||
value={data.full_name}
|
||||
onChange={(e) => setData('full_name', e.target.value)}
|
||||
className="bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none focus:shadow-[0_0_10px_rgba(239,68,68,0.5)] placeholder:text-red-400/40 transition-all"
|
||||
/>
|
||||
<InputError message={errors.full_name} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={processing || !data.label || !data.unit || (priceTracking && !data.symbol)}
|
||||
className="w-full bg-red-500 hover:bg-red-500 text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red"
|
||||
>
|
||||
{processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
||||
[INITIALIZE]
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,44 +3,7 @@ import AssetSetupForm from '@/components/Assets/AssetSetupForm';
|
|||
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
|
||||
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
|
||||
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
|
||||
|
||||
type TrackerType = 'simple' | 'asset';
|
||||
|
||||
function TrackerTypeSelector({ onSelect }: { onSelect: (type: TrackerType) => void }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<p className="text-red-400 font-mono text-sm uppercase tracking-wider">
|
||||
[SELECT] What do you want to track?
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => onSelect('simple')}
|
||||
className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
|
||||
>
|
||||
<span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
|
||||
[01] Simple counter
|
||||
</span>
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
Track anything you accumulate — no price tracking, no asset setup.
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onSelect('asset')}
|
||||
className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
|
||||
>
|
||||
<span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
|
||||
[02] Asset tracker
|
||||
</span>
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
Track holdings with price tracking and P&L.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import CreateTrackerStep from '@/components/Onboarding/CreateTrackerStep';
|
||||
|
||||
function PriceTrackingStep({ onEnable, onSkip }: { onEnable: () => void; onSkip?: () => void }) {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
|
@ -70,7 +33,7 @@ function PriceTrackingStep({ onEnable, onSkip }: { onEnable: () => void; onSkip?
|
|||
|
||||
{!enabled && (
|
||||
<button
|
||||
onClick={onSkip}
|
||||
onClick={onSkip ?? (() => {})}
|
||||
className="w-full py-2 font-mono text-xs uppercase tracking-wider border border-red-500/50 text-red-400 hover:bg-red-950/30 hover:text-red-300 transition-colors"
|
||||
>
|
||||
Skip and finish
|
||||
|
|
@ -89,14 +52,13 @@ interface OnboardingStep {
|
|||
}
|
||||
|
||||
const ASSET_STEPS: OnboardingStep[] = [
|
||||
{ id: 'asset', title: 'SET ASSET', description: 'Choose the asset you want to track', completed: false, required: true },
|
||||
{ id: 'purchases', title: 'ADD PURCHASES', description: 'Enter your current holdings', completed: false, required: true },
|
||||
{ id: 'entries', title: 'ADD ENTRIES', description: 'Enter your current holdings', completed: false, required: true },
|
||||
{ id: 'milestones', title: 'SET MILESTONES', description: 'Define your goals', completed: false, required: true },
|
||||
{ id: 'price', title: 'CURRENT PRICE', description: 'Set current asset price (optional)', completed: false, required: false },
|
||||
];
|
||||
|
||||
const SIMPLE_STEPS: OnboardingStep[] = [
|
||||
{ id: 'purchases', title: 'STARTING AMOUNT', description: 'Enter your starting amount', completed: false, required: true },
|
||||
{ id: 'entries', title: 'STARTING AMOUNT', description: 'Enter your starting amount', completed: false, required: true },
|
||||
{ id: 'milestones', title: 'SET MILESTONES', description: 'Define your goals', completed: false, required: true },
|
||||
];
|
||||
|
||||
|
|
@ -105,29 +67,27 @@ interface OnboardingFlowProps {
|
|||
}
|
||||
|
||||
export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
||||
const [trackerType, setTrackerType] = useState<TrackerType | null>(null);
|
||||
const [trackerCreated, setTrackerCreated] = useState(false);
|
||||
const [priceTracking, setPriceTracking] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [steps, setSteps] = useState<OnboardingStep[]>([]);
|
||||
|
||||
const checkOnboardingStatus = useCallback(async (currentSteps: OnboardingStep[]) => {
|
||||
try {
|
||||
const [purchaseData, milestonesData, assetData, priceData] = await Promise.all([
|
||||
fetch('/purchases/summary').then(r => r.json()),
|
||||
const [entriesData, milestonesData, priceData] = await Promise.all([
|
||||
fetch('/entries/summary').then(r => r.json()),
|
||||
fetch('/milestones').then(r => r.json()),
|
||||
fetch('/assets/current').then(r => r.json()),
|
||||
fetch('/pricing/current').then(r => r.json()),
|
||||
]);
|
||||
|
||||
const hasPurchases = purchaseData.total_shares > 0;
|
||||
const hasEntries = entriesData.total_quantity > 0;
|
||||
const hasMilestones = milestonesData.length > 0;
|
||||
const hasAsset = !!assetData.asset;
|
||||
const hasPrice = !!priceData.current_price;
|
||||
|
||||
const freshSteps = currentSteps.map(step => ({
|
||||
...step,
|
||||
completed:
|
||||
(step.id === 'asset' && hasAsset) ||
|
||||
(step.id === 'purchases' && hasPurchases) ||
|
||||
(step.id === 'entries' && hasEntries) ||
|
||||
(step.id === 'milestones' && hasMilestones) ||
|
||||
(step.id === 'price' && hasPrice),
|
||||
}));
|
||||
|
|
@ -147,15 +107,18 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
}, [onComplete]);
|
||||
|
||||
useEffect(() => {
|
||||
if (trackerType === null) {
|
||||
return;
|
||||
}
|
||||
if (!trackerCreated) return;
|
||||
|
||||
const initialSteps = trackerType === 'simple' ? SIMPLE_STEPS : ASSET_STEPS;
|
||||
const initialSteps = priceTracking ? ASSET_STEPS : SIMPLE_STEPS;
|
||||
setSteps(initialSteps);
|
||||
setCurrentStep(0);
|
||||
checkOnboardingStatus(initialSteps);
|
||||
}, [trackerType, checkOnboardingStatus]);
|
||||
}, [trackerCreated, priceTracking, checkOnboardingStatus]);
|
||||
|
||||
const handleTrackerCreated = (withPriceTracking: boolean) => {
|
||||
setPriceTracking(withPriceTracking);
|
||||
setTrackerCreated(true);
|
||||
};
|
||||
|
||||
const handleStepComplete = async () => {
|
||||
const updatedSteps = steps.map((step, index) =>
|
||||
|
|
@ -171,14 +134,10 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
|
||||
const renderStepContent = () => {
|
||||
const step = steps[currentStep];
|
||||
if (!step) {
|
||||
return null;
|
||||
}
|
||||
if (!step) return null;
|
||||
|
||||
switch (step.id) {
|
||||
case 'asset':
|
||||
return <AssetSetupForm onSuccess={handleStepComplete} />;
|
||||
case 'purchases':
|
||||
case 'entries':
|
||||
return <AddPurchaseForm onSuccess={handleStepComplete} />;
|
||||
case 'milestones':
|
||||
return <AddMilestoneForm onSuccess={handleStepComplete} />;
|
||||
|
|
@ -198,13 +157,13 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
[SYSTEM] ONBOARDING SEQUENCE
|
||||
</h1>
|
||||
<p className="text-red-400/60 font-mono text-sm">
|
||||
{trackerType === null ? 'Choose how you want to track' : 'Set up your tracker'}
|
||||
{!trackerCreated ? 'Set up your tracker' : 'Configure your tracker'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{trackerType === null ? (
|
||||
{!trackerCreated ? (
|
||||
<div className="border border-red-500/30 bg-black/50 p-6">
|
||||
<TrackerTypeSelector onSelect={setTrackerType} />
|
||||
<CreateTrackerStep onSuccess={handleTrackerCreated} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import StatsBox from '@/components/Display/StatsBox';
|
|||
import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
|
||||
import TerminalSpinner from '@/components/ui/TerminalSpinner';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
interface PurchaseSummary {
|
||||
total_shares: number;
|
||||
|
|
@ -50,24 +50,28 @@ export default function Dashboard() {
|
|||
const [currentAsset, setCurrentAsset] = useState<CurrentAsset | null>(null);
|
||||
const [priceTrackingEnabled, setPriceTrackingEnabled] = useState(false);
|
||||
|
||||
// Fetch purchase summary, current price, milestones, and check onboarding
|
||||
// Fetch entry summary, current price, milestones, and check onboarding
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [purchaseResponse, priceResponse, milestonesResponse, assetResponse] = await Promise.all([
|
||||
fetch('/purchases/summary'),
|
||||
const [entriesResponse, priceResponse, milestonesResponse, trackerResponse] = await Promise.all([
|
||||
fetch('/entries/summary'),
|
||||
fetch('/pricing/current'),
|
||||
fetch('/milestones'),
|
||||
fetch('/assets/current'),
|
||||
fetch('/tracker'),
|
||||
]);
|
||||
|
||||
let totalShares = 0;
|
||||
let totalQuantity = 0;
|
||||
let milestonesCount = 0;
|
||||
|
||||
if (purchaseResponse.ok) {
|
||||
const purchases = await purchaseResponse.json();
|
||||
setPurchaseData(purchases);
|
||||
totalShares = purchases.total_shares;
|
||||
if (entriesResponse.ok) {
|
||||
const entries = await entriesResponse.json();
|
||||
setPurchaseData({
|
||||
total_shares: entries.total_quantity,
|
||||
total_investment: entries.total_cost,
|
||||
average_cost_per_share: entries.average_cost_per_unit,
|
||||
});
|
||||
totalQuantity = entries.total_quantity;
|
||||
}
|
||||
|
||||
if (priceResponse.ok) {
|
||||
|
|
@ -81,13 +85,13 @@ export default function Dashboard() {
|
|||
milestonesCount = milestonesData.length;
|
||||
}
|
||||
|
||||
if (assetResponse.ok) {
|
||||
const assetData = await assetResponse.json();
|
||||
setCurrentAsset(assetData.asset);
|
||||
setPriceTrackingEnabled(assetData.price_tracking_enabled ?? false);
|
||||
if (trackerResponse.ok) {
|
||||
const tracker = await trackerResponse.json();
|
||||
setCurrentAsset(tracker?.asset ?? null);
|
||||
setPriceTrackingEnabled(tracker?.price_tracking_enabled ?? false);
|
||||
}
|
||||
|
||||
setNeedsOnboarding(totalShares === 0 || milestonesCount === 0);
|
||||
setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch data:', error);
|
||||
} finally {
|
||||
|
|
@ -98,16 +102,20 @@ export default function Dashboard() {
|
|||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Refresh data after successful purchase
|
||||
// Refresh data after successful entry
|
||||
const handlePurchaseSuccess = async () => {
|
||||
try {
|
||||
const purchaseResponse = await fetch('/purchases/summary');
|
||||
if (purchaseResponse.ok) {
|
||||
const purchases = await purchaseResponse.json();
|
||||
setPurchaseData(purchases);
|
||||
const entriesResponse = await fetch('/entries/summary');
|
||||
if (entriesResponse.ok) {
|
||||
const entries = await entriesResponse.json();
|
||||
setPurchaseData({
|
||||
total_shares: entries.total_quantity,
|
||||
total_investment: entries.total_cost,
|
||||
average_cost_per_share: entries.average_cost_per_unit,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh purchase data:', error);
|
||||
console.error('Failed to refresh entry data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -193,21 +201,25 @@ export default function Dashboard() {
|
|||
};
|
||||
|
||||
// Handle onboarding completion
|
||||
const handleOnboardingComplete = async () => {
|
||||
const [purchaseResponse, priceResponse, milestonesResponse, assetResponse] = await Promise.all([
|
||||
fetch('/purchases/summary'),
|
||||
const handleOnboardingComplete = useCallback(async () => {
|
||||
const [entriesResponse, priceResponse, milestonesResponse, trackerResponse] = await Promise.all([
|
||||
fetch('/entries/summary'),
|
||||
fetch('/pricing/current'),
|
||||
fetch('/milestones'),
|
||||
fetch('/assets/current'),
|
||||
fetch('/tracker'),
|
||||
]);
|
||||
|
||||
let totalShares = 0;
|
||||
let totalQuantity = 0;
|
||||
let milestonesCount = 0;
|
||||
|
||||
if (purchaseResponse.ok) {
|
||||
const purchases = await purchaseResponse.json();
|
||||
setPurchaseData(purchases);
|
||||
totalShares = purchases.total_shares;
|
||||
if (entriesResponse.ok) {
|
||||
const entries = await entriesResponse.json();
|
||||
setPurchaseData({
|
||||
total_shares: entries.total_quantity,
|
||||
total_investment: entries.total_cost,
|
||||
average_cost_per_share: entries.average_cost_per_unit,
|
||||
});
|
||||
totalQuantity = entries.total_quantity;
|
||||
}
|
||||
|
||||
if (priceResponse.ok) {
|
||||
|
|
@ -221,14 +233,14 @@ export default function Dashboard() {
|
|||
milestonesCount = milestonesData.length;
|
||||
}
|
||||
|
||||
if (assetResponse.ok) {
|
||||
const assetData = await assetResponse.json();
|
||||
setCurrentAsset(assetData.asset);
|
||||
setPriceTrackingEnabled(assetData.price_tracking_enabled ?? false);
|
||||
if (trackerResponse.ok) {
|
||||
const tracker = await trackerResponse.json();
|
||||
setCurrentAsset(tracker?.asset ?? null);
|
||||
setPriceTrackingEnabled(tracker?.price_tracking_enabled ?? false);
|
||||
}
|
||||
|
||||
setNeedsOnboarding(totalShares === 0 || milestonesCount === 0);
|
||||
};
|
||||
setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
|
||||
}, []);
|
||||
|
||||
// Show onboarding if needed
|
||||
if (needsOnboarding) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue