33 - Onboarding: CreateTrackerStep, update OnboardingFlow, fix dashboard fetch URLs

app/Http/Controllers/TrackerController.php

@@ -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([
+        $update = [];
-            'label' => $validated['label'] ?? null,
+        if (isset($validated['label'])) {
-            'unit' => $validated['unit'] ?? null,
+            $update['label'] = $validated['label'];
-            'price_tracking_enabled' => $validated['price_tracking_enabled'] ?? null,
+        }
-            'asset_id' => $tracker->asset_id,
+        if (isset($validated['unit'])) {
-        ], fn ($v) => $v !== null);
+            $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);
 

resources/js/components/Assets/AssetSetupForm.tsx

@@ -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();
+                    const tracker = await response.json();
-                    if (assetData.asset) {
+                    if (tracker?.asset) {
                         setData({
-                            symbol: assetData.asset.symbol || '',
+                            symbol: tracker.asset.symbol || '',
-                            full_name: assetData.asset.full_name || '',
+                            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();
             },

resources/js/components/Onboarding/CreateTrackerStep.tsx

@@ -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">
+                            &gt; 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">
+                            &gt; 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&amp;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">
+                                        &gt; 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">
+                                        &gt; 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>
+    );
+}

resources/js/components/Onboarding/OnboardingFlow.tsx

@@ -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';
-
+import CreateTrackerStep from '@/components/Onboarding/CreateTrackerStep';
-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&amp;L.
-                    </p>
-                </button>
-            </div>
-        </div>
-    );
-}
 
 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: 'entries', title: 'ADD ENTRIES', description: 'Enter your current holdings', completed: false, required: true },
-    { id: 'purchases', title: 'ADD PURCHASES', 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([
+            const [entriesData, milestonesData, priceData] = await Promise.all([
-                fetch('/purchases/summary').then(r => r.json()),
+                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 === 'entries' && hasEntries) ||
-                    (step.id === 'purchases' && hasPurchases) ||
                     (step.id === 'milestones' && hasMilestones) ||
                     (step.id === 'price' && hasPrice),
             }));
@@ -147,15 +107,18 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
     }, [onComplete]);
 
     useEffect(() => {
-        if (trackerType === null) {
+        if (!trackerCreated) return;
-            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) {
+        if (!step) return null;
-            return null;
-        }
 
         switch (step.id) {
-            case 'asset':
+            case 'entries':
-                return <AssetSetupForm onSuccess={handleStepComplete} />;
-            case 'purchases':
                 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>
                     ) : (
                         <>

resources/js/pages/dashboard.tsx

@@ -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([
+                const [entriesResponse, priceResponse, milestonesResponse, trackerResponse] = await Promise.all([
-                    fetch('/purchases/summary'),
+                    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) {
+                if (entriesResponse.ok) {
-                    const purchases = await purchaseResponse.json();
+                    const entries = await entriesResponse.json();
-                    setPurchaseData(purchases);
+                    setPurchaseData({
-                    totalShares = purchases.total_shares;
+                        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) {
+                if (trackerResponse.ok) {
-                    const assetData = await assetResponse.json();
+                    const tracker = await trackerResponse.json();
-                    setCurrentAsset(assetData.asset);
+                    setCurrentAsset(tracker?.asset ?? null);
-                    setPriceTrackingEnabled(assetData.price_tracking_enabled ?? false);
+                    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');
+            const entriesResponse = await fetch('/entries/summary');
-            if (purchaseResponse.ok) {
+            if (entriesResponse.ok) {
-                const purchases = await purchaseResponse.json();
+                const entries = await entriesResponse.json();
-                setPurchaseData(purchases);
+                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 handleOnboardingComplete = useCallback(async () => {
-        const [purchaseResponse, priceResponse, milestonesResponse, assetResponse] = await Promise.all([
+        const [entriesResponse, priceResponse, milestonesResponse, trackerResponse] = await Promise.all([
-            fetch('/purchases/summary'),
+            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) {
+        if (entriesResponse.ok) {
-            const purchases = await purchaseResponse.json();
+            const entries = await entriesResponse.json();
-            setPurchaseData(purchases);
+            setPurchaseData({
-            totalShares = purchases.total_shares;
+                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) {
+        if (trackerResponse.ok) {
-            const assetData = await assetResponse.json();
+            const tracker = await trackerResponse.json();
-            setCurrentAsset(assetData.asset);
+            setCurrentAsset(tracker?.asset ?? null);
-            setPriceTrackingEnabled(assetData.price_tracking_enabled ?? false);
+            setPriceTrackingEnabled(tracker?.price_tracking_enabled ?? false);
         }
 
-        setNeedsOnboarding(totalShares === 0 || milestonesCount === 0);
+        setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
-    };
+    }, []);
 
     // Show onboarding if needed
     if (needsOnboarding) {