lvl0/incr
lvl0/incr
1
0
Fork 0
Code Issues Pull requests Releases 5 Packages Activity Actions

51 - Trim onboarding to a single starting-value input

Browse source
This commit is contained in:
myrmidex 2026-08-15 14:32:03 +02:00
parent 1a7b9132f7
commit 8ce8a20d35
4 changed files with 112 additions and 227 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/Http/Controllers/TrackerController.php
View file

@ -26,8 +26,8 @@ public function show(): JsonResponse
public function store(Request $request): JsonResponse
{
$validated = $request->validate([
'label' => 'required|string|max:255',
'unit' => 'required|string|max:50',
'label' => 'sometimes|string|max:255',
'unit' => 'sometimes|string|max:50',
'price_tracking_enabled' => 'boolean',
'symbol' => 'nullable|string|max:10',
'full_name' => 'nullable|string|max:255',
@ -46,8 +46,8 @@ public function store(Request $request): JsonResponse
}
$tracker = $user->tracker()->create([
'label' => $validated['label'],
'unit' => $validated['unit'],
'label' => $validated['label'] ?? 'Counter',
'unit' => $validated['unit'] ?? 'units',
'price_tracking_enabled' => $validated['price_tracking_enabled'] ?? false,
'asset_id' => $assetId,
]);

16
resources/js/components/Display/LedDisplay.tsx
View file

@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
interface LedDisplayProps {
value: number;
unit?: string;
className?: string;
animate?: boolean;
onClick?: () => void;
@ -11,7 +10,6 @@ interface LedDisplayProps {
export default function LedDisplay({
value,
unit,
className,
onClick
}: LedDisplayProps) {
@ -23,14 +21,7 @@ export default function LedDisplay({
return;
}, [value]);
// Format number with zero-padding for consistent width
const formatValue = (value: number) => {
// Always pad to 5 digits for consistent display width
const integerPart = Math.floor(value);
return integerPart.toString().padStart(5, '0');
};
const formattedValue = formatValue(displayValue);
const formattedValue = Math.floor(displayValue).toString();
return (
<div
@ -57,11 +48,6 @@ export default function LedDisplay({
{formattedValue}
</div>
</div>
{unit && (
<div className="text-red-500/50 font-mono text-sm uppercase tracking-widest mt-2">
{unit}
</div>
)}
</div>
);
}

227
resources/js/components/Onboarding/OnboardingFlow.tsx
View file

@ -1,175 +1,102 @@
import { useState, useEffect, useCallback } from 'react';
import AddEntryForm from '@/components/Transactions/AddEntryForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import CreateTrackerStep from '@/components/Onboarding/CreateTrackerStep';
interface OnboardingStep {
id: string;
title: string;
description: string;
completed: boolean;
required: boolean;
}
const STEPS: OnboardingStep[] = [
{ 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 },
];
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import InputError from '@/components/InputError';
import { todayISO } from '@/lib/utils';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler, useState } from 'react';
interface OnboardingFlowProps {
onComplete?: () => void;
}
function csrfToken(): string {
return (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? '';
}
export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
const [trackerCreated, setTrackerCreated] = useState(false);
const [currentStep, setCurrentStep] = useState(0);
const [steps, setSteps] = useState<OnboardingStep[]>([]);
const [startingValue, setStartingValue] = useState('0');
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>();
// On mount: check if a tracker already exists and skip step 1 if so
useEffect(() => {
fetch('/tracker')
.then(r => r.ok ? r.json() : null)
.then(data => {
if (data?.tracker) {
setTrackerCreated(true);
}
})
.catch(() => {});
}, []);
const submit: FormEventHandler = async (e) => {
e.preventDefault();
setProcessing(true);
setError(undefined);
const headers = {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrfToken(),
Accept: 'application/json',
};
const checkOnboardingStatus = useCallback(async (currentSteps: OnboardingStep[]) => {
try {
const [entriesData, milestonesData] = await Promise.all([
fetch('/entries/summary').then(r => r.json()),
fetch('/milestones').then(r => r.json()),
]);
const trackerResponse = await fetch(route('tracker.store'), {
method: 'POST',
headers,
body: JSON.stringify({}),
});
const hasEntries = entriesData.total_quantity > 0;
const hasMilestones = milestonesData.length > 0;
const freshSteps = currentSteps.map(step => ({
...step,
completed:
(step.id === 'entries' && hasEntries) ||
(step.id === 'milestones' && hasMilestones),
}));
setSteps(freshSteps);
const firstIncompleteRequired = freshSteps.findIndex(s => s.required && !s.completed);
if (firstIncompleteRequired !== -1) {
setCurrentStep(firstIncompleteRequired);
} else if (onComplete) {
onComplete();
if (!trackerResponse.ok && trackerResponse.status !== 409) {
setError('Could not create the counter. Please try again.');
return;
}
} catch (error) {
console.error('Failed to check onboarding status:', error);
}
}, [onComplete]);
useEffect(() => {
if (!trackerCreated) return;
const quantity = Number(startingValue);
setSteps(STEPS);
setCurrentStep(0);
checkOnboardingStatus(STEPS);
}, [trackerCreated, checkOnboardingStatus]);
if (quantity > 0) {
const entryResponse = await fetch(route('entries.store'), {
method: 'POST',
headers,
body: JSON.stringify({ date: todayISO(), quantity }),
});
const handleTrackerCreated = () => {
setTrackerCreated(true);
};
if (!entryResponse.ok) {
setError('Could not save the starting value. Please try again.');
return;
}
}
const handleStepComplete = async () => {
const updatedSteps = steps.map((step, index) =>
index === currentStep ? { ...step, completed: true } : step
);
setSteps(updatedSteps);
await checkOnboardingStatus(updatedSteps);
};
const handleStepSelect = (stepIndex: number) => {
setCurrentStep(stepIndex);
};
const renderStepContent = () => {
const step = steps[currentStep];
if (!step) return null;
switch (step.id) {
case 'entries':
return <AddEntryForm onSuccess={handleStepComplete} />;
case 'milestones':
return <AddMilestoneForm onSuccess={handleStepComplete} />;
default:
return null;
onComplete?.();
} catch {
setError('Something went wrong. Please try again.');
} finally {
setProcessing(false);
}
};
return (
<div className="min-h-screen bg-black flex items-center justify-center p-4">
<div className="w-full max-w-4xl">
<div className="w-full max-w-md">
<div className="border-2 border-red-500 bg-black shadow-[0_0_20px_rgba(239,68,68,0.3)] p-8">
<div className="mb-8">
<h1 className="text-red-400 font-mono text-2xl font-bold uppercase tracking-wider mb-2">
[SYSTEM] ONBOARDING SEQUENCE
</h1>
<p className="text-red-400/60 font-mono text-sm">
{!trackerCreated ? 'Set up your tracker' : 'Configure your tracker'}
</p>
</div>
<form onSubmit={submit} className="space-y-4">
<Label
htmlFor="starting-value"
className="text-red-400 font-mono text-xs uppercase tracking-wider"
>
&gt; Starting Value
</Label>
<Input
id="starting-value"
type="number"
min="0"
step="1"
autoFocus
value={startingValue}
onChange={(e) => setStartingValue(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 placeholder:text-red-400/40 transition-all glow-red"
/>
<InputError message={error} />
{!trackerCreated ? (
<div className="border border-red-500/30 bg-black/50 p-6">
<CreateTrackerStep onSuccess={handleTrackerCreated} />
</div>
) : (
<>
<div className="mb-8">
<div className="flex items-center justify-between mb-4">
{steps.map((step, index) => (
<button
key={step.id}
onClick={() => handleStepSelect(index)}
className={`flex-1 px-4 py-2 font-mono text-xs uppercase tracking-wider border border-red-500/50 transition-all ${
index === currentStep
? 'bg-red-500 text-black border-red-500'
: step.completed
? 'bg-red-950/50 text-red-300 border-red-400'
: 'bg-black text-red-400/60 hover:text-red-400 hover:border-red-400'
} ${index > 0 ? 'ml-2' : ''}`}
>
{step.completed ? '[✓]' : '[REQ]'} {step.title}
</button>
))}
</div>
<div className="text-center">
<p className="text-red-400 font-mono text-sm">
{steps[currentStep]?.description}
</p>
<p className="text-red-400/60 font-mono text-xs mt-1">
STEP {currentStep + 1}/{steps.length}
</p>
</div>
</div>
<div className="border border-red-500/30 bg-black/50 p-6">
{renderStepContent()}
</div>
<div className="mt-6 pt-4 border-t border-red-500/30">
<div className="flex justify-between items-center">
<p className="text-red-400/60 font-mono text-xs">
[STATUS] {steps.filter(s => s.completed).length}/{steps.length} STEPS COMPLETE
</p>
<p className="text-red-400/60 font-mono text-xs">
{steps.filter(s => !s.completed).length} REQUIRED REMAINING
</p>
</div>
</div>
</>
)}
<Button
type="submit"
disabled={processing || startingValue === ''}
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>
</div>

88
resources/js/pages/dashboard.tsx
View file

@ -19,36 +19,37 @@ export default function Dashboard() {
const [needsOnboarding, setNeedsOnboarding] = useState(false);
const [tracker, setTracker] = useState<Tracker | null>(null);
const loadData = useCallback(async () => {
const [entriesResponse, milestonesResponse, trackerResponse] = await Promise.all([
fetch('/entries/summary'),
fetch('/milestones'),
fetch('/tracker'),
]);
if (entriesResponse.ok) {
const entries = await entriesResponse.json();
setTotalShares(entries.total_quantity);
}
if (milestonesResponse.ok) {
setMilestones(await milestonesResponse.json());
}
let trackerExists = false;
if (trackerResponse.ok) {
const { exists, tracker: trackerData } = await trackerResponse.json();
setTracker(trackerData ?? null);
trackerExists = Boolean(exists);
}
setNeedsOnboarding(!trackerExists);
}, []);
useEffect(() => {
const fetchData = async () => {
try {
const [entriesResponse, milestonesResponse, trackerResponse] = await Promise.all([
fetch('/entries/summary'),
fetch('/milestones'),
fetch('/tracker'),
]);
let totalQuantity = 0;
let milestonesCount = 0;
if (entriesResponse.ok) {
const entries = await entriesResponse.json();
setTotalShares(entries.total_quantity);
totalQuantity = entries.total_quantity;
}
if (milestonesResponse.ok) {
const milestonesData = await milestonesResponse.json();
setMilestones(milestonesData);
milestonesCount = milestonesData.length;
}
if (trackerResponse.ok) {
const { tracker: trackerData } = await trackerResponse.json();
setTracker(trackerData ?? null);
}
setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
await loadData();
} catch (error) {
console.error('Failed to fetch data:', error);
} finally {
@ -57,7 +58,7 @@ export default function Dashboard() {
};
fetchData();
}, []);
}, [loadData]);
const handlePurchaseSuccess = async () => {
try {
@ -88,35 +89,7 @@ export default function Dashboard() {
setSelectedMilestoneIndex(index);
};
const handleOnboardingComplete = useCallback(async () => {
const [entriesResponse, milestonesResponse, trackerResponse] = await Promise.all([
fetch('/entries/summary'),
fetch('/milestones'),
fetch('/tracker'),
]);
let totalQuantity = 0;
let milestonesCount = 0;
if (entriesResponse.ok) {
const entries = await entriesResponse.json();
setTotalShares(entries.total_quantity);
totalQuantity = entries.total_quantity;
}
if (milestonesResponse.ok) {
const milestonesData = await milestonesResponse.json();
setMilestones(milestonesData);
milestonesCount = milestonesData.length;
}
if (trackerResponse.ok) {
const { tracker: trackerData } = await trackerResponse.json();
setTracker(trackerData ?? null);
}
setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
}, []);
const handleOnboardingComplete = loadData;
if (loading) {
return (
@ -158,7 +131,6 @@ export default function Dashboard() {
<div className="pt-32">
<LedDisplay
value={totalShares}
unit={tracker?.unit}
onClick={handleLedClick}
/>
</div>