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

Style forms

Browse source
This commit is contained in:
myrmidex 2025-07-13 04:06:37 +02:00
parent 19afa660da
commit c4c21f689c
7 changed files with 118 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/css/app.css
View file

@ -16,6 +16,15 @@ .font-digital {
font-family: '7Segment', monospace; 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 *)); @custom-variant dark (&:is(.dark *));
@theme { @theme {

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

@ -2,7 +2,6 @@ import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm'; import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm'; import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { X } from 'lucide-react';
import ComponentTitle from '@/components/ui/ComponentTitle'; import ComponentTitle from '@/components/ui/ComponentTitle';
interface InlineFormProps { interface InlineFormProps {
@ -35,18 +34,7 @@ export default function InlineForm({
)} )}
> >
{/* Header */} {/* Header */}
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4"> <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4 glow-red">
<div className="flex items-center justify-between mb-6">
<ComponentTitle>{title}</ComponentTitle>
<button
onClick={onClose}
className="text-red-400 hover:text-red-300 transition-colors p-1"
aria-label="Close form"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Form Content */} {/* Form Content */}
<div className="flex justify-center"> <div className="flex justify-center">
@ -56,6 +44,7 @@ export default function InlineForm({
if (onPurchaseSuccess) onPurchaseSuccess(); if (onPurchaseSuccess) onPurchaseSuccess();
onClose(); onClose();
}} }}
onCancel={onClose}
/> />
) : type === 'milestone' ? ( ) : type === 'milestone' ? (
<AddMilestoneForm <AddMilestoneForm
@ -63,6 +52,7 @@ export default function InlineForm({
if (onMilestoneSuccess) onMilestoneSuccess(); if (onMilestoneSuccess) onMilestoneSuccess();
onClose(); onClose();
}} }}
onCancel={onClose}
/> />
) : ( ) : (
<UpdatePriceForm <UpdatePriceForm
@ -70,6 +60,7 @@ export default function InlineForm({
if (onPriceSuccess) onPriceSuccess(); if (onPriceSuccess) onPriceSuccess();
onClose(); onClose();
}} }}
onCancel={onClose}
/> />
)} )}
</div> </div>

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

@ -43,7 +43,7 @@ export default function ProgressBar({
{/* Progress Bar Container */} {/* Progress Bar Container */}
<div className="w-full"> <div className="w-full">
{/* Old-school progress bar with overlaid text */} {/* Old-school progress bar with overlaid text */}
<div className="w-full border-4 border-red-500 p-2 bg-black relative overflow-hidden"> <div className="w-full border-4 border-red-500 p-2 bg-black relative overflow-hidden glow-red">
{/* Inner container */} {/* Inner container */}
<div className="relative h-8"> <div className="relative h-8">
{/* Progress fill */} {/* Progress fill */}

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

@ -70,7 +70,7 @@ export default function StatsBox({
className className
)} )}
> >
<div className="w-full border-4 border-red-500 p-2 bg-black space-y-4"> <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4 glow-red">
{/* STATS Title and Current Price */} {/* STATS Title and Current Price */}
<div className="flex justify-between items-center mb-6 relative"> <div className="flex justify-between items-center mb-6 relative">
<ComponentTitle>Stats</ComponentTitle> <ComponentTitle>Stats</ComponentTitle>

31
resources/js/components/Milestones/AddMilestoneForm.tsx
View file

@ -5,6 +5,7 @@ import InputError from '@/components/InputError';
import { useForm } from '@inertiajs/react'; import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react'; import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react'; import { FormEventHandler } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface MilestoneFormData { interface MilestoneFormData {
target: string; target: string;
@ -14,9 +15,10 @@ interface MilestoneFormData {
interface AddMilestoneFormProps { interface AddMilestoneFormProps {
onSuccess?: () => void; 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<MilestoneFormData>({ const { data, setData, post, processing, errors, reset } = useForm<MilestoneFormData>({
target: '', target: '',
description: '', description: '',
@ -36,11 +38,12 @@ export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) {
}; };
return ( return (
<div className="w-full max-w-md"> <div className="w-full">
<div className="space-y-4"> <div className="space-y-4">
<ComponentTitle>ADD MILESTONE</ComponentTitle>
<form onSubmit={submit} className="space-y-4"> <form onSubmit={submit} className="space-y-4">
<div> <div>
<Label htmlFor="target" className="text-red-400">Target Number</Label> <Label htmlFor="target" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Target Number</Label>
<Input <Input
id="target" id="target"
type="number" type="number"
@ -49,32 +52,44 @@ export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) {
placeholder="1500" placeholder="1500"
value={data.target} value={data.target}
onChange={(e) => setData('target', e.target.value)} onChange={(e) => 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"
/> />
<InputError message={errors.target} /> <InputError message={errors.target} />
</div> </div>
<div> <div>
<Label htmlFor="description" className="text-red-400">Description</Label> <Label htmlFor="description" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Description</Label>
<Input <Input
id="description" id="description"
type="text" type="text"
placeholder="First milestone" placeholder="First milestone"
value={data.description} value={data.description}
onChange={(e) => setData('description', e.target.value)} onChange={(e) => 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"
/> />
<InputError message={errors.description} /> <InputError message={errors.description} />
</div> </div>
<div className="flex gap-3 pt-2">
<Button <Button
type="submit" type="submit"
disabled={processing} disabled={processing}
className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500" 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" />} {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
Add Milestone [EXECUTE]
</Button> </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> </form>
</div> </div>
</div> </div>

47
resources/js/components/Pricing/UpdatePriceForm.tsx
View file

@ -1,11 +1,11 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input'; 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 { LoaderCircle } from 'lucide-react'; import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react'; import { FormEventHandler } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface PriceUpdateFormData { interface PriceUpdateFormData {
date: string; date: string;
@ -17,9 +17,10 @@ interface UpdatePriceFormProps {
currentPrice?: number; currentPrice?: number;
className?: string; className?: string;
onSuccess?: () => void; 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<PriceUpdateFormData>({ const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({
date: new Date().toISOString().split('T')[0], // 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() || '', price: currentPrice?.toString() || '',
@ -38,31 +39,30 @@ export default function UpdatePriceForm({ currentPrice, className, onSuccess }:
}; };
return ( return (
<Card className={className}> <div className="w-full">
<CardHeader> <div className="space-y-4">
<CardTitle>Update Asset Price</CardTitle> <ComponentTitle>UPDATE PRICE</ComponentTitle>
{currentPrice && ( {currentPrice && (
<p className="text-sm text-neutral-600 dark:text-neutral-400"> <p className="text-sm text-red-400/60 font-mono">
Current price: €{currentPrice.toFixed(4)} [CURRENT] €{currentPrice.toFixed(4)}
</p> </p>
)} )}
</CardHeader>
<CardContent>
<form onSubmit={submit} className="space-y-4"> <form onSubmit={submit} className="space-y-4">
<div> <div>
<Label htmlFor="date">Price Date</Label> <Label htmlFor="date" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Price Date</Label>
<Input <Input
id="date" id="date"
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={new Date().toISOString().split('T')[0]} 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} /> <InputError message={errors.date} />
</div> </div>
<div> <div>
<Label htmlFor="price">Asset Price (€)</Label> <Label htmlFor="price" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Asset Price (€)</Label>
<Input <Input
id="price" id="price"
type="number" type="number"
@ -71,23 +71,36 @@ export default function UpdatePriceForm({ currentPrice, className, onSuccess }:
placeholder="123.4567" placeholder="123.4567"
value={data.price} value={data.price}
onChange={(e) => setData('price', e.target.value)} onChange={(e) => 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"
/> />
<p className="text-xs text-neutral-500 mt-1"> <p className="text-xs text-red-400/60 mt-1 font-mono">
Price per unit/share of the asset [UNIT] price per share
</p> </p>
<InputError message={errors.price} /> <InputError message={errors.price} />
</div> </div>
<div className="flex gap-3 pt-2">
<Button <Button
type="submit" type="submit"
disabled={processing} disabled={processing}
className="w-full" 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" />} {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
Update Price [EXECUTE]
</Button> </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> </form>
</CardContent> </div>
</Card> </div>
); );
} }

43
resources/js/components/Transactions/AddPurchaseForm.tsx
View file

@ -5,6 +5,7 @@ import InputError from '@/components/InputError';
import { useForm } from '@inertiajs/react'; import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react'; import { LoaderCircle } from 'lucide-react';
import { FormEventHandler, useEffect } from 'react'; import { FormEventHandler, useEffect } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
interface PurchaseFormData { interface PurchaseFormData {
date: string; date: string;
@ -16,9 +17,10 @@ interface PurchaseFormData {
interface AddPurchaseFormProps { interface AddPurchaseFormProps {
onSuccess?: () => void; 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<PurchaseFormData>({ const { data, setData, post, processing, errors, reset } = useForm<PurchaseFormData>({
date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
shares: '', shares: '',
@ -54,24 +56,25 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) {
}; };
return ( return (
<div className="w-full max-w-md"> <div className="w-full">
<div className="space-y-4"> <div className="space-y-4">
<ComponentTitle>ADD PURCHASE</ComponentTitle>
<form onSubmit={submit} className="space-y-4"> <form onSubmit={submit} className="space-y-4">
<div> <div>
<Label htmlFor="date" className="text-red-400">Purchase Date</Label> <Label htmlFor="date" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Purchase Date</Label>
<Input <Input
id="date" id="date"
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={new Date().toISOString().split('T')[0]} 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"
/> />
<InputError message={errors.date} /> <InputError message={errors.date} />
</div> </div>
<div> <div>
<Label htmlFor="shares" className="text-red-400">Number of Shares</Label> <Label htmlFor="shares" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Number of Shares</Label>
<Input <Input
id="shares" id="shares"
type="number" type="number"
@ -80,13 +83,13 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) {
placeholder="1.234567" placeholder="1.234567"
value={data.shares} value={data.shares}
onChange={(e) => setData('shares', e.target.value)} onChange={(e) => 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"
/> />
<InputError message={errors.shares} /> <InputError message={errors.shares} />
</div> </div>
<div> <div>
<Label htmlFor="price_per_share" className="text-red-400">Price per Share (€)</Label> <Label htmlFor="price_per_share" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Price per Share (€)</Label>
<Input <Input
id="price_per_share" id="price_per_share"
type="number" type="number"
@ -95,13 +98,13 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) {
placeholder="123.45" placeholder="123.45"
value={data.price_per_share} value={data.price_per_share}
onChange={(e) => setData('price_per_share', e.target.value)} onChange={(e) => 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"
/> />
<InputError message={errors.price_per_share} /> <InputError message={errors.price_per_share} />
</div> </div>
<div> <div>
<Label htmlFor="total_cost" className="text-red-400">Total Cost (€)</Label> <Label htmlFor="total_cost" className="text-red-400 font-mono text-xs uppercase tracking-wider">&gt; Total Cost (€)</Label>
<Input <Input
id="total_cost" id="total_cost"
type="number" type="number"
@ -110,22 +113,34 @@ export default function AddPurchaseForm({ onSuccess }: AddPurchaseFormProps) {
placeholder="1234.56" placeholder="1234.56"
value={data.total_cost} value={data.total_cost}
onChange={(e) => setData('total_cost', e.target.value)} onChange={(e) => 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"
/> />
<p className="text-xs text-red-400/60 mt-1"> <p className="text-xs text-red-400/60 mt-1 font-mono">
Auto-calculated from shares × price [AUTO-CALC] shares × price
</p> </p>
<InputError message={errors.total_cost} /> <InputError message={errors.total_cost} />
</div> </div>
<div className="flex gap-3 pt-2">
<Button <Button
type="submit" type="submit"
disabled={processing} disabled={processing}
className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500" 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" />} {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
Add Purchase [EXECUTE]
</Button> </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> </form>
</div> </div>
</div> </div>