diff --git a/resources/css/app.css b/resources/css/app.css index 912a683..1760079 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -16,6 +16,15 @@ .font-digital { font-family: '7Segment', monospace; } +.glow-red { + box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); + transition: box-shadow 300ms ease; +} + +.glow-red:hover { + box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); +} + @custom-variant dark (&:is(.dark *)); @theme { diff --git a/resources/js/components/Display/InlineForm.tsx b/resources/js/components/Display/InlineForm.tsx index fe189bc..7dd4ca8 100644 --- a/resources/js/components/Display/InlineForm.tsx +++ b/resources/js/components/Display/InlineForm.tsx @@ -2,7 +2,6 @@ import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm'; import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm'; import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm'; import { cn } from '@/lib/utils'; -import { X } from 'lucide-react'; import ComponentTitle from '@/components/ui/ComponentTitle'; interface InlineFormProps { @@ -35,18 +34,7 @@ export default function InlineForm({ )} > {/* Header */} -
-
- {title} - - -
+
{/* Form Content */}
@@ -56,6 +44,7 @@ export default function InlineForm({ if (onPurchaseSuccess) onPurchaseSuccess(); onClose(); }} + onCancel={onClose} /> ) : type === 'milestone' ? ( ) : ( )}
diff --git a/resources/js/components/Display/ProgressBar.tsx b/resources/js/components/Display/ProgressBar.tsx index 05fdf7e..4343cb5 100644 --- a/resources/js/components/Display/ProgressBar.tsx +++ b/resources/js/components/Display/ProgressBar.tsx @@ -43,7 +43,7 @@ export default function ProgressBar({ {/* Progress Bar Container */}
{/* Old-school progress bar with overlaid text */} -
+
{/* Inner container */}
{/* Progress fill */} diff --git a/resources/js/components/Display/StatsBox.tsx b/resources/js/components/Display/StatsBox.tsx index 1fc6a23..4d5a59f 100644 --- a/resources/js/components/Display/StatsBox.tsx +++ b/resources/js/components/Display/StatsBox.tsx @@ -70,7 +70,7 @@ export default function StatsBox({ className )} > -
+
{/* STATS Title and Current Price */}
Stats diff --git a/resources/js/components/Milestones/AddMilestoneForm.tsx b/resources/js/components/Milestones/AddMilestoneForm.tsx index 629831f..8433bf0 100644 --- a/resources/js/components/Milestones/AddMilestoneForm.tsx +++ b/resources/js/components/Milestones/AddMilestoneForm.tsx @@ -5,6 +5,7 @@ import InputError from '@/components/InputError'; import { useForm } from '@inertiajs/react'; import { LoaderCircle } from 'lucide-react'; import { FormEventHandler } from 'react'; +import ComponentTitle from '@/components/ui/ComponentTitle'; interface MilestoneFormData { target: string; @@ -14,9 +15,10 @@ interface MilestoneFormData { interface AddMilestoneFormProps { onSuccess?: () => void; + onCancel?: () => void; } -export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) { +export default function AddMilestoneForm({ onSuccess, onCancel }: AddMilestoneFormProps) { const { data, setData, post, processing, errors, reset } = useForm({ target: '', description: '', @@ -36,11 +38,12 @@ export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) { }; return ( -
+
+ ADD MILESTONE
- + setData('target', e.target.value)} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30" + 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" />
- + setData('description', e.target.value)} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30" + 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" />
- +
+ + {onCancel && ( + + )} +
); -} \ No newline at end of file +} diff --git a/resources/js/components/Pricing/UpdatePriceForm.tsx b/resources/js/components/Pricing/UpdatePriceForm.tsx index bd18cb9..fe99e3b 100644 --- a/resources/js/components/Pricing/UpdatePriceForm.tsx +++ b/resources/js/components/Pricing/UpdatePriceForm.tsx @@ -1,11 +1,11 @@ import { Button } from '@/components/ui/button'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; 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 } from 'react'; +import ComponentTitle from '@/components/ui/ComponentTitle'; interface PriceUpdateFormData { date: string; @@ -17,9 +17,10 @@ interface UpdatePriceFormProps { currentPrice?: number; className?: string; onSuccess?: () => void; + onCancel?: () => void; } -export default function UpdatePriceForm({ currentPrice, className, onSuccess }: UpdatePriceFormProps) { +export default function UpdatePriceForm({ currentPrice, className, onSuccess, onCancel }: UpdatePriceFormProps) { const { data, setData, post, processing, errors } = useForm({ date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format price: currentPrice?.toString() || '', @@ -38,31 +39,30 @@ export default function UpdatePriceForm({ currentPrice, className, onSuccess }: }; return ( - - - Update Asset Price +
+
+ UPDATE PRICE {currentPrice && ( -

- Current price: €{currentPrice.toFixed(4)} +

+ [CURRENT] €{currentPrice.toFixed(4)}

)} - -
- + 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" />
- + setData('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 focus:shadow-[0_0_10px_rgba(239,68,68,0.5)] placeholder:text-red-400/40 transition-all" /> -

- Price per unit/share of the asset +

+ [UNIT] price per share

- +
+ + {onCancel && ( + + )} +
- - +
+
); } diff --git a/resources/js/components/Transactions/AddPurchaseForm.tsx b/resources/js/components/Transactions/AddPurchaseForm.tsx index 68732b2..c360177 100644 --- a/resources/js/components/Transactions/AddPurchaseForm.tsx +++ b/resources/js/components/Transactions/AddPurchaseForm.tsx @@ -5,6 +5,7 @@ import InputError from '@/components/InputError'; import { useForm } from '@inertiajs/react'; import { LoaderCircle } from 'lucide-react'; import { FormEventHandler, useEffect } from 'react'; +import ComponentTitle from '@/components/ui/ComponentTitle'; interface PurchaseFormData { date: string; @@ -16,9 +17,10 @@ interface PurchaseFormData { interface AddPurchaseFormProps { onSuccess?: () => void; + onCancel?: () => void; } -export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) { +export default function AddPurchaseForm({ onSuccess, onCancel }: AddPurchaseFormProps) { const { data, setData, post, processing, errors, reset } = useForm({ date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format shares: '', @@ -31,7 +33,7 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) { 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); @@ -54,24 +56,25 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) { }; return ( -
+
+ ADD PURCHASE
- + setData('date', e.target.value)} max={new Date().toISOString().split('T')[0]} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400" + 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" />
- + setData('shares', e.target.value)} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30" + 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" />
- + setData('price_per_share', e.target.value)} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30" + 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" />
- + setData('total_cost', e.target.value)} - className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30" + 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" /> -

- Auto-calculated from shares × price +

+ [AUTO-CALC] shares × price

- +
+ + {onCancel && ( + + )} +
); -} \ No newline at end of file +}