34 - Frontend: AddEntryForm, generalize unit labels, update LedDisplay/StatsBox/ProgressBar/InlineForm

resources/js/components/Display/InlineForm.tsx

@@ -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",
+                'bg-black p-8',
-                "transition-all duration-300",
+                'transition-all duration-300',
-                className
+                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();

resources/js/components/Display/LedDisplay.tsx

@@ -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>
     );
 }

resources/js/components/Display/ProgressBar.tsx

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

resources/js/components/Display/StatsBox.tsx

@@ -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>

resources/js/components/Onboarding/OnboardingFlow.tsx

@@ -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':

resources/js/components/Transactions/AddEntryForm.tsx

@@ -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>
+    );
+}

resources/js/pages/dashboard.tsx

@@ -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();
+                    const trackerData = await trackerResponse.json();
-                    setCurrentAsset(tracker?.asset ?? null);
+                    setTracker(trackerData);
-                    setPriceTrackingEnabled(tracker?.price_tracking_enabled ?? false);
+                    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}