incr/resources/js/components/Pricing/UpdatePriceForm.tsx

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';

interface PriceUpdateFormData {
    date: string;
    price: string;
    [key: string]: string;
}

interface UpdatePriceFormProps {
    currentPrice?: number;
    className?: string;
    onSuccess?: () => void;
}

export default function UpdatePriceForm({ currentPrice, className, onSuccess }: UpdatePriceFormProps) {
    const { data, setData, post, processing, errors } = useForm<PriceUpdateFormData>({
        date: new Date().toISOString().split('T')[0], // Today's date in YYYY-MM-DD format
        price: currentPrice?.toString() || '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('pricing.update'), {
            onSuccess: () => {
                // Keep the date, reset only price if needed
                // User might want to update same day multiple times
                if (onSuccess) onSuccess();
            },
        });
    };

    return (
        <Card className={className}>
            <CardHeader>
                <CardTitle>Update Asset Price</CardTitle>
                {currentPrice && (
                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
                        Current price: €{currentPrice.toFixed(4)}
                    </p>
                )}
            </CardHeader>
            <CardContent>
                <form onSubmit={submit} className="space-y-4">
                    <div>
                        <Label htmlFor="date">Price Date</Label>
                        <Input
                            id="date"
                            type="date"
                            value={data.date}
                            onChange={(e) => setData('date', e.target.value)}
                            max={new Date().toISOString().split('T')[0]}
                        />
                        <InputError message={errors.date} />
                    </div>

                    <div>
                        <Label htmlFor="price">Asset Price (€)</Label>
                        <Input
                            id="price"
                            type="number"
                            step="0.0001"
                            min="0"
                            placeholder="123.4567"
                            value={data.price}
                            onChange={(e) => setData('price', e.target.value)}
                        />
                        <p className="text-xs text-neutral-500 mt-1">
                            Price per unit/share of the asset
                        </p>
                        <InputError message={errors.price} />
                    </div>

                    <Button
                        type="submit"
                        disabled={processing}
                        className="w-full"
                    >
                        {processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
                        Update Price
                    </Button>
                </form>
            </CardContent>
        </Card>
    );
}