lvl0/incr
lvl0/incr
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 3 Packages Wiki Activity Actions

v0.3.0 #45

Merged
myrmidex merged 37 commits from release/0.3.0 into main 2026-05-09 15:08:38 +02:00
Conversation 0 Commits 37 Files changed 96 +234 -32
7 changed files with 234 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6e76ce9c68 - Show all commits

24
resources/js/components/Display/InlineForm.tsx
View file

@ -1,11 +1,12 @@
import AddEntryForm from '@/components/Transactions/AddEntryForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import { cn } from '@/lib/utils';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface InlineFormProps {
type: 'purchase' | 'milestone' | 'price' | null;
unit?: string;
priceTrackingEnabled?: boolean;
onClose: () => void;
onPurchaseSuccess?: () => void;
onMilestoneSuccess?: () => void;
@ -15,31 +16,30 @@ interface InlineFormProps {
export default function InlineForm({
type,
unit = 'units',
priceTrackingEnabled = false,
onClose,
onPurchaseSuccess,
onMilestoneSuccess,
onPriceSuccess,
className
className,
}: InlineFormProps) {
if (!type) return null;
const title = type === 'purchase' ? 'ADD PURCHASE' : type === 'milestone' ? 'ADD MILESTONE' : 'UPDATE PRICE';
return (
<div
className={cn(
"bg-black p-8",
"transition-all duration-300",
className
'bg-black p-8',
'transition-all duration-300',
className,
)}
>
{/* Header */}
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4 glow-red">
{/* Form Content */}
<div className="flex justify-center">
{type === 'purchase' ? (
<AddPurchaseForm
<AddEntryForm
unit={unit}
priceTrackingEnabled={priceTrackingEnabled}
onSuccess={() => {
if (onPurchaseSuccess) onPurchaseSuccess();
onClose();

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

@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
interface LedDisplayProps {
value: number;
unit?: string;
className?: string;
animate?: boolean;
onClick?: () => void;
@ -10,6 +11,7 @@ interface LedDisplayProps {
export default function LedDisplay({
value,
unit,
className,
onClick
}: LedDisplayProps) {
@ -55,6 +57,11 @@ 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>
);
}

18
resources/js/components/Display/ProgressBar.tsx
View file

@ -7,28 +7,26 @@ interface Milestone {
}
interface ProgressBarProps {
currentShares: number;
currentQuantity: number;
milestones: Milestone[];
selectedMilestoneIndex?: number;
className?: string;
onClick?: () => void;
}
export default function ProgressBar({
currentShares,
export default function ProgressBar({
currentQuantity,
milestones,
selectedMilestoneIndex = 0,
className,
onClick
}: ProgressBarProps) {
// Get the selected milestone for progress calculation
const selectedMilestone = milestones.length > 0 && selectedMilestoneIndex < milestones.length
? milestones[selectedMilestoneIndex]
const selectedMilestone = milestones.length > 0 && selectedMilestoneIndex < milestones.length
? milestones[selectedMilestoneIndex]
: null;
// Calculate progress percentage
const progressPercentage = selectedMilestone
? Math.min((currentShares / selectedMilestone.target) * 100, 100)
const progressPercentage = selectedMilestone
? Math.min((currentQuantity / selectedMilestone.target) * 100, 100)
: 0;
return (
<div

6
resources/js/components/Display/StatsBox.tsx
View file

@ -19,6 +19,7 @@ interface StatsBoxProps {
profitLoss?: number;
profitLossPercentage?: number;
};
unit?: string;
milestones?: Milestone[];
selectedMilestoneIndex?: number;
onMilestoneSelect?: (index: number) => void;
@ -32,6 +33,7 @@ interface StatsBoxProps {
export default function StatsBox({
stats,
unit = 'units',
milestones = [],
selectedMilestoneIndex = 0,
onMilestoneSelect,
@ -107,7 +109,7 @@ export default function StatsBox({
}}
className="w-full text-left px-4 py-2 text-red-400 hover:bg-red-600/20 hover:text-red-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
>
ADD PURCHASE
ADD ENTRY
</button>
)}
{onAddMilestone && (
@ -157,7 +159,7 @@ export default function StatsBox({
<thead>
<tr>
<th className="text-left text-red-500 text-xs py-2">DESCRIPTION</th>
<th className="text-right text-red-500 text-xs py-2">SHARES</th>
<th className="text-right text-red-500 text-xs py-2">{unit.toUpperCase()}</th>
{priceTrackingEnabled && <th className="text-right text-red-500 text-xs py-2 pr-4">SWR 3%</th>}
{priceTrackingEnabled && <th className="text-right text-red-500 text-xs py-2">SWR 4%</th>}
</tr>

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

@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from 'react';
import AssetSetupForm from '@/components/Assets/AssetSetupForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import AddEntryForm from '@/components/Transactions/AddEntryForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import CreateTrackerStep from '@/components/Onboarding/CreateTrackerStep';
@ -138,7 +138,7 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
switch (step.id) {
case 'entries':
return <AddPurchaseForm onSuccess={handleStepComplete} />;
return <AddEntryForm onSuccess={handleStepComplete} priceTrackingEnabled={priceTracking} />;
case 'milestones':
return <AddMilestoneForm onSuccess={handleStepComplete} />;
case 'price':

181
resources/js/components/Transactions/AddEntryForm.tsx Normal file
View file

@ -0,0 +1,181 @@
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 EntryFormData {
date: string;
quantity: string;
unit_price: string;
total_cost: string;
[key: string]: string;
}
interface AddEntryFormProps {
unit?: string;
priceTrackingEnabled?: boolean;
onSuccess?: () => void;
onCancel?: () => void;
}
interface EntrySummary {
total_quantity: number;
total_cost: number;
average_cost_per_unit: number;
}
export default function AddEntryForm({ unit = 'units', priceTrackingEnabled = false, onSuccess, onCancel }: AddEntryFormProps) {
const { data, setData, post, processing, errors, reset } = useForm<EntryFormData>({
date: new Date().toISOString().split('T')[0],
quantity: '',
unit_price: '',
total_cost: '',
});
const [currentHoldings, setCurrentHoldings] = useState<EntrySummary | null>(null);
useEffect(() => {
const fetchSummary = async () => {
try {
const response = await fetch('/entries/summary');
if (response.ok) {
const summary = await response.json();
setCurrentHoldings(summary);
}
} catch (error) {
console.error('Failed to fetch entry summary:', error);
}
};
fetchSummary();
}, []);
// Auto-calculate total cost when quantity or unit_price changes
useEffect(() => {
if (data.quantity && data.unit_price) {
const quantity = parseFloat(data.quantity);
const unitPrice = parseFloat(data.unit_price);
if (!isNaN(quantity) && !isNaN(unitPrice)) {
setData('total_cost', (quantity * unitPrice).toFixed(2));
}
}
}, [data.quantity, data.unit_price, setData]);
const submit: FormEventHandler = (e) => {
e.preventDefault();
post(route('entries.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 ENTRY</ComponentTitle>
{currentHoldings && currentHoldings.total_quantity > 0 && (
<p className="text-sm text-red-400/60 font-mono">
[CURRENT] {currentHoldings.total_quantity.toFixed(6)} {unit}
{priceTrackingEnabled && ` • €${currentHoldings.total_cost.toFixed(2)} spent`}
</p>
)}
<form onSubmit={submit} className="space-y-4">
<div>
<Label htmlFor="date" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; 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="quantity" className="text-red-400 font-mono text-xs uppercase tracking-wider">
&gt; Quantity ({unit})
</Label>
<Input
id="quantity"
type="number"
step="0.000001"
min="0"
placeholder="1.234567"
value={data.quantity}
onChange={(e) => setData('quantity', 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.quantity} />
</div>
{priceTrackingEnabled && (
<>
<div>
<Label htmlFor="unit_price" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Price per {unit} (€)</Label>
<Input
id="unit_price"
type="number"
step="0.01"
min="0"
placeholder="123.45"
value={data.unit_price}
onChange={(e) => setData('unit_price', 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.unit_price} />
</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] quantity × 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>
);
}

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

@ -23,12 +23,20 @@ interface Milestone {
created_at: string;
}
interface CurrentAsset {
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() {
const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({
total_shares: 0,
@ -47,7 +55,8 @@ export default function Dashboard() {
const [activeForm, setActiveForm] = useState<'purchase' | 'milestone' | 'price' | null>(null);
const [loading, setLoading] = useState(true);
const [needsOnboarding, setNeedsOnboarding] = useState(false);
const [currentAsset, setCurrentAsset] = useState<CurrentAsset | null>(null);
const [tracker, setTracker] = useState<Tracker | null>(null);
const [currentAsset, setCurrentAsset] = useState<TrackerAsset | null>(null);
const [priceTrackingEnabled, setPriceTrackingEnabled] = useState(false);
// Fetch entry summary, current price, milestones, and check onboarding
@ -86,9 +95,10 @@ export default function Dashboard() {
}
if (trackerResponse.ok) {
const tracker = await trackerResponse.json();
setCurrentAsset(tracker?.asset ?? null);
setPriceTrackingEnabled(tracker?.price_tracking_enabled ?? false);
const trackerData = await trackerResponse.json();
setTracker(trackerData);
setCurrentAsset(trackerData?.asset ?? null);
setPriceTrackingEnabled(trackerData?.price_tracking_enabled ?? false);
}
setNeedsOnboarding(totalQuantity === 0 || milestonesCount === 0);
@ -263,6 +273,7 @@ export default function Dashboard() {
<div className="pt-32">
<LedDisplay
value={purchaseData.total_shares}
unit={tracker?.unit}
onClick={handleLedClick}
/>
</div>
@ -270,7 +281,7 @@ export default function Dashboard() {
{/* Box 2: Progress Bar (toggleable) */}
<div style={{ display: showProgressBar ? 'block' : 'none' }}>
<ProgressBar
currentShares={purchaseData.total_shares}
currentQuantity={purchaseData.total_shares}
milestones={milestones}
selectedMilestoneIndex={selectedMilestoneIndex}
onClick={handleProgressClick}
@ -281,6 +292,7 @@ export default function Dashboard() {
<div style={{ display: showStatsBox ? 'block' : 'none' }}>
<StatsBox
stats={statsData}
unit={tracker?.unit}
milestones={milestones}
selectedMilestoneIndex={selectedMilestoneIndex}
onMilestoneSelect={handleMilestoneSelect}
@ -296,6 +308,8 @@ export default function Dashboard() {
<div style={{ display: activeForm && showProgressBar && showStatsBox ? 'block' : 'none' }}>
<InlineForm
type={activeForm}
unit={tracker?.unit}
priceTrackingEnabled={priceTrackingEnabled}
onClose={() => setActiveForm(null)}
onPurchaseSuccess={handlePurchaseSuccess}
onMilestoneSuccess={handleMilestoneSuccess}