Compare commits

..

No commits in common. "221a0f879dc28f06aef62625c950463256d163b7" and "6e76ce9c68ea8b724b00906da79a37aca1dfdd45" have entirely different histories.

9 changed files with 237 additions and 50 deletions

View file

@ -3,14 +3,14 @@ import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm'; import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
type FormType = 'purchase' | 'milestone' | 'price';
interface InlineFormProps { interface InlineFormProps {
type: FormType | null; type: 'purchase' | 'milestone' | 'price' | null;
unit?: string; unit?: string;
priceTrackingEnabled?: boolean; priceTrackingEnabled?: boolean;
onClose: () => void; onClose: () => void;
onSuccess?: (type: FormType) => void; onPurchaseSuccess?: () => void;
onMilestoneSuccess?: () => void;
onPriceSuccess?: () => void;
className?: string; className?: string;
} }
@ -19,16 +19,13 @@ export default function InlineForm({
unit = 'units', unit = 'units',
priceTrackingEnabled = false, priceTrackingEnabled = false,
onClose, onClose,
onSuccess, onPurchaseSuccess,
onMilestoneSuccess,
onPriceSuccess,
className, className,
}: InlineFormProps) { }: InlineFormProps) {
if (!type) return null; if (!type) return null;
const handleSuccess = () => {
if (onSuccess) onSuccess(type);
onClose();
};
return ( return (
<div <div
className={cn( className={cn(
@ -43,17 +40,26 @@ export default function InlineForm({
<AddEntryForm <AddEntryForm
unit={unit} unit={unit}
priceTrackingEnabled={priceTrackingEnabled} priceTrackingEnabled={priceTrackingEnabled}
onSuccess={handleSuccess} onSuccess={() => {
if (onPurchaseSuccess) onPurchaseSuccess();
onClose();
}}
onCancel={onClose} onCancel={onClose}
/> />
) : type === 'milestone' ? ( ) : type === 'milestone' ? (
<AddMilestoneForm <AddMilestoneForm
onSuccess={handleSuccess} onSuccess={() => {
if (onMilestoneSuccess) onMilestoneSuccess();
onClose();
}}
onCancel={onClose} onCancel={onClose}
/> />
) : ( ) : (
<UpdatePriceForm <UpdatePriceForm
onSuccess={handleSuccess} onSuccess={() => {
if (onPriceSuccess) onPriceSuccess();
onClose();
}}
onCancel={onClose} onCancel={onClose}
/> />
)} )}

View file

@ -1,5 +1,10 @@
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import type { Milestone } from '@/types/domain';
interface Milestone {
target: number;
description: string;
created_at: string;
}
interface ProgressBarProps { interface ProgressBarProps {
currentQuantity: number; currentQuantity: number;

View file

@ -2,7 +2,12 @@ import { cn } from '@/lib/utils';
import { Plus, ChevronRight } from 'lucide-react'; import { Plus, ChevronRight } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle'; import ComponentTitle from '@/components/ui/ComponentTitle';
import type { Milestone } from '@/types/domain';
interface Milestone {
target: number;
description: string;
created_at: string;
}
interface StatsBoxProps { interface StatsBoxProps {
stats: { stats: {

View file

@ -3,7 +3,6 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import InputError from '@/components/InputError'; import InputError from '@/components/InputError';
import { useForm } from '@inertiajs/react'; import { useForm } from '@inertiajs/react';
import { todayISO } from '@/lib/utils';
import { LoaderCircle } from 'lucide-react'; import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react'; import { FormEventHandler } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle'; import ComponentTitle from '@/components/ui/ComponentTitle';
@ -23,7 +22,7 @@ interface UpdatePriceFormProps {
export default function UpdatePriceForm({ currentPrice, className, onSuccess, onCancel }: UpdatePriceFormProps) { export default function UpdatePriceForm({ currentPrice, className, onSuccess, onCancel }: UpdatePriceFormProps) {
const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({ const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({
date: todayISO(), // Today's date in YYYY-MM-DD format date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
price: currentPrice?.toString() || '100.00', price: currentPrice?.toString() || '100.00',
}); });
@ -61,7 +60,7 @@ export default function UpdatePriceForm({ currentPrice, className, onSuccess, on
type="date" type="date"
value={data.date} value={data.date}
onChange={(e) => setData('date', e.target.value)} onChange={(e) => setData('date', e.target.value)}
max={todayISO()} max={new Date().toISOString().split('T')[0]}
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 transition-all glow-red" 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 transition-all glow-red"
/> />
<InputError message={errors.date} /> <InputError message={errors.date} />

View file

@ -3,7 +3,6 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import InputError from '@/components/InputError'; import InputError from '@/components/InputError';
import { useForm } from '@inertiajs/react'; import { useForm } from '@inertiajs/react';
import { todayISO } from '@/lib/utils';
import { LoaderCircle } from 'lucide-react'; import { LoaderCircle } from 'lucide-react';
import { FormEventHandler, useEffect, useState } from 'react'; import { FormEventHandler, useEffect, useState } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle'; import ComponentTitle from '@/components/ui/ComponentTitle';
@ -31,7 +30,7 @@ interface EntrySummary {
export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = false, onSuccess, onCancel }: AddEntryFormProps) { export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = false, onSuccess, onCancel }: AddEntryFormProps) {
const { data, setData, post, processing, errors, reset } = useForm<EntryFormData>({ const { data, setData, post, processing, errors, reset } = useForm<EntryFormData>({
date: todayISO(), date: new Date().toISOString().split('T')[0],
quantity: '', quantity: '',
unit_price: '', unit_price: '',
total_cost: '', total_cost: '',
@ -73,7 +72,7 @@ export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = fa
post(route('entries.store'), { post(route('entries.store'), {
onSuccess: () => { onSuccess: () => {
reset(); reset();
setData('date', todayISO()); setData('date', new Date().toISOString().split('T')[0]);
if (onSuccess) onSuccess(); if (onSuccess) onSuccess();
}, },
}); });
@ -97,7 +96,7 @@ export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = fa
type="date" type="date"
value={data.date} value={data.date}
onChange={(e) => setData('date', e.target.value)} onChange={(e) => setData('date', e.target.value)}
max={todayISO()} max={new Date().toISOString().split('T')[0]}
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 transition-all glow-red" 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 transition-all glow-red"
/> />
<InputError message={errors.date} /> <InputError message={errors.date} />

View file

@ -0,0 +1,178 @@
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, useEffect, useState } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface PurchaseFormData {
date: string;
shares: string;
price_per_share: string;
total_cost: string;
[key: string]: string;
}
interface AddPurchaseFormProps {
onSuccess?: () => void;
onCancel?: () => void;
}
interface PurchaseSummary {
total_shares: number;
total_investment: number;
average_cost_per_share: number;
}
export default function AddPurchaseForm({ onSuccess, onCancel }: AddPurchaseFormProps) {
const { data, setData, post, processing, errors, reset } = useForm<PurchaseFormData>({
date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
shares: '',
price_per_share: '',
total_cost: '',
});
const [currentHoldings, setCurrentHoldings] = useState<PurchaseSummary | null>(null);
// Load existing holdings data on mount
useEffect(() => {
const fetchCurrentHoldings = async () => {
try {
const response = await fetch('/purchases/summary');
if (response.ok) {
const summary = await response.json();
setCurrentHoldings(summary);
}
} catch (error) {
console.error('Failed to fetch current holdings:', error);
}
};
fetchCurrentHoldings();
}, []);
// Auto-calculate total cost when shares or price changes
useEffect(() => {
if (data.shares && data.price_per_share) {
const shares = parseFloat(data.shares);
const pricePerShare = parseFloat(data.price_per_share);
if (!isNaN(shares) && !isNaN(pricePerShare)) {
const totalCost = (shares * pricePerShare).toFixed(2);
setData('total_cost', totalCost);
}
}
}, [data.shares, data.price_per_share, setData]);
const submit: FormEventHandler = (e) => {
e.preventDefault();
post(route('purchases.store'), {
onSuccess: () => {
reset();
setData('date', new Date().toISOString().split('T')[0]);
if (onSuccess) {
onSuccess();
}
},
});
};
return (
<div className="w-full">
<div className="space-y-4">
<ComponentTitle>ADD PURCHASE</ComponentTitle>
{currentHoldings && currentHoldings.total_shares > 0 && (
<p className="text-sm text-red-400/60 font-mono">
[CURRENT] {currentHoldings.total_shares.toFixed(6)} shares {currentHoldings.total_investment.toFixed(2)} invested
</p>
)}
<form onSubmit={submit} className="space-y-4">
<div>
<Label htmlFor="date" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Purchase Date</Label>
<Input
id="date"
type="date"
value={data.date}
onChange={(e) => setData('date', e.target.value)}
max={new Date().toISOString().split('T')[0]}
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 transition-all glow-red"
/>
<InputError message={errors.date} />
</div>
<div>
<Label htmlFor="shares" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Number of Shares</Label>
<Input
id="shares"
type="number"
step="0.000001"
min="0"
placeholder="1.234567"
value={data.shares}
onChange={(e) => setData('shares', 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={errors.shares} />
</div>
<div>
<Label htmlFor="price_per_share" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Price per Share ()</Label>
<Input
id="price_per_share"
type="number"
step="0.01"
min="0"
placeholder="123.45"
value={data.price_per_share}
onChange={(e) => setData('price_per_share', 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={errors.price_per_share} />
</div>
<div>
<Label htmlFor="total_cost" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Total Cost ()</Label>
<Input
id="total_cost"
type="number"
step="0.01"
min="0"
placeholder="1234.56"
value={data.total_cost}
onChange={(e) => setData('total_cost', 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"
/>
<p className="text-xs text-red-400/60 mt-1 font-mono">
[AUTO-CALC] shares × price
</p>
<InputError message={errors.total_cost} />
</div>
<div className="flex gap-3 pt-2">
<Button
type="submit"
disabled={processing}
className="flex-1 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" />}
[EXECUTE]
</Button>
{onCancel && (
<Button
type="button"
variant="outline"
onClick={onCancel}
className="flex-1 bg-black border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300 font-mono text-sm font-bold rounded-none border-2 uppercase tracking-wider transition-all glow-red"
>
[ABORT]
</Button>
)}
</div>
</form>
</div>
</div>
);
}

View file

@ -4,5 +4,3 @@ import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
} }
export const todayISO = (): string => new Date().toISOString().split('T')[0];

View file

@ -6,7 +6,6 @@ import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
import TerminalSpinner from '@/components/ui/TerminalSpinner'; import TerminalSpinner from '@/components/ui/TerminalSpinner';
import { Head } from '@inertiajs/react'; import { Head } from '@inertiajs/react';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import type { Milestone, Tracker, TrackerAsset } from '@/types/domain';
interface PurchaseSummary { interface PurchaseSummary {
total_shares: number; total_shares: number;
@ -18,6 +17,26 @@ interface CurrentPrice {
current_price: number | null; current_price: number | null;
} }
interface Milestone {
target: number;
description: string;
created_at: string;
}
interface TrackerAsset {
id: number;
symbol: string;
full_name: string | null;
}
interface Tracker {
id: number;
label: string;
unit: string;
price_tracking_enabled: boolean;
asset: TrackerAsset | null;
}
export default function Dashboard() { export default function Dashboard() {
const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({ const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({
total_shares: 0, total_shares: 0,
@ -292,11 +311,9 @@ export default function Dashboard() {
unit={tracker?.unit} unit={tracker?.unit}
priceTrackingEnabled={priceTrackingEnabled} priceTrackingEnabled={priceTrackingEnabled}
onClose={() => setActiveForm(null)} onClose={() => setActiveForm(null)}
onSuccess={(type) => { onPurchaseSuccess={handlePurchaseSuccess}
if (type === 'purchase') handlePurchaseSuccess(); onMilestoneSuccess={handleMilestoneSuccess}
else if (type === 'milestone') handleMilestoneSuccess(); onPriceSuccess={handlePriceSuccess}
else if (type === 'price') handlePriceSuccess();
}}
/> />
</div> </div>
</div> </div>

View file

@ -1,20 +0,0 @@
export interface Milestone {
id?: number;
target: number;
description: string;
created_at: string;
}
export interface TrackerAsset {
id: number;
symbol: string;
full_name: string | null;
}
export interface Tracker {
id: number;
label: string;
unit: string;
price_tracking_enabled: boolean;
asset: TrackerAsset | null;
}