Form Con Campi Moderni - Copy this React, Tailwind Component to your project

Questo è il codice consolidato:import { useState } from "react"; import { FaEuroSign, FaCalculator, FaPercent, FaClock } from "react-icons/fa"; const LoanCalculatorForm = () => { const [formData, setFormData] = useState({ loanAmount: "", expenses: "", insurance: "", months: "", installment: "", originTan: "", spreadTan: "", loanType: "prestiti_facile" }); const [calculatedFields, setCalculatedFields] = useState({ interests: 0, interestSpread: 0, interestCommission: 0, interestSpreadCommission: 0, insuranceCommission: 0, totalCommission: 0 }); const [errors, setErrors] = useState({}); const [progress, setProgress] = useState(0); const formatNumberEU = (number) => { return Number(number).toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; const validateForm = () => { let tempErrors = {}; if (!formData.loanAmount) tempErrors.loanAmount = "Importo Prestito is required"; if (!formData.expenses) tempErrors.expenses = "Spese is required"; if (!formData.insurance) tempErrors.insurance = "Assicurazione is required"; if (!formData.months) tempErrors.months = "Mesi is required"; if (!formData.installment) tempErrors.installment = "Rata is required"; if (!formData.originTan) tempErrors.originTan = "Tan Origine is required"; if (!formData.spreadTan) tempErrors.spreadTan = "Tan Spread is required"; setErrors(tempErrors); return Object.keys(tempErrors).length === 0; }; const calculateFields = () => { const loanAmount = parseFloat(formData.loanAmount) || 0; const expenses = parseFloat(formData.expenses) || 0; const insurance = parseFloat(formData.insurance) || 0; const months = parseFloat(formData.months) || 0; const installment = parseFloat(formData.installment) || 0; const spreadTan = parseFloat(formData.spreadTan) || 0; const financed = loanAmount + expenses + insurance; const interests = (installment * months) - financed; const monthlyRate = (spreadTan / 100) / 12; const interestSpread = (financed * monthlyRate * months); const interestCommissionRate = formData.loanType === "prestiti_facile" ? 0.06 : 0.07; const interestCommission = interests * interestCommissionRate; let spreadCommissionRate; if (months <= 54) spreadCommissionRate = 0.30; else if (months <= 90) spreadCommissionRate = 0.25; else spreadCommissionRate = 0.20; const interestSpreadCommission = interestSpread * spreadCommissionRate; const insuranceCommission = insurance * 0.10; const totalCommission = interestCommission + interestSpreadCommission + insuranceCommission + expenses; setCalculatedFields({ interests: formatNumberEU(interests), interestSpread: formatNumberEU(interestSpread), interestCommission: formatNumberEU(interestCommission), interestSpreadCommission: formatNumberEU(interestSpreadCommission), insuranceCommission: formatNumberEU(insuranceCommission), totalCommission: formatNumberEU(totalCommission) }); }; const handleInputChange = (e) => { const { name, value } = e.target; if (["loanAmount", "expenses", "insurance", "installment"].includes(name)) { const formattedValue = value.replace(/\D/g, ""); setFormData({ ...formData, [name]: formattedValue }); } else { setFormData({ ...formData, [name]: value }); } const filledFields = Object.values(formData).filter(value => value).length; const totalFields = Object.keys(formData).length; setProgress((filledFields / totalFields) * 100); }; const handleSubmit = (e) => { e.preventDefault(); if (validateForm()) { calculateFields(); } }; const handleReset = () => { setFormData({ loanAmount: "", expenses: "", insurance: "", months: "", installment: "", originTan: "", spreadTan: "", loanType: "prestiti_facile" }); setCalculatedFields({ interests: 0, interestSpread: 0, interestCommission: 0, interestSpreadCommission: 0, insuranceCommission: 0, totalCommission: 0 }); setErrors({}); setProgress(0); }; return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8"> <h2 className="text-3xl font-bold text-center text-gray-800 mb-8"> Loan Calculator </h2> <div className="w-full bg-gray-200 rounded-full h-2 mb-6"> <div className="bg-blue-600 h-2 rounded-full transition-all duration-500" style={{ width: `${progress}%` }} ></div> </div> <form onSubmit={handleSubmit} className="space-y-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="md:col-span-2"> <label className="block text-sm font-medium text-gray-700 mb-2"> Tipo di Prestito </label> <div className="flex gap-4"> <label className="flex items-center"> <input type="radio" name="loanType" value="prestiti_facile" checked={formData.loanType === "prestiti_facile"} onChange={handleInputChange} className="h-4 w-4 text-blue-600" /> <span className="ml-2">Prestiti Facile</span> </label> <label className="flex items-center"> <input type="radio" name="loanType" value="prestiti_online" checked={formData.loanType === "prestiti_online"} onChange={handleInputChange} className="h-4 w-4 text-blue-600" /> <span className="ml-2">Prestiti Online</span> </label> </div> </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Importo Prestito </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaEuroSign className="h-5 w-5 text-gray-400" /> </div> <input type="text" name="loanAmount" value={formData.loanAmount} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" /> </div> {errors.loanAmount && <p className="mt-1 text-sm text-red-600">{errors.loanAmount}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Spese </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaEuroSign className="h-5 w-5 text-gray-400" /> </div> <input type="text" name="expenses" value={formData.expenses} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" /> </div> {errors.expenses && <p className="mt-1 text-sm text-red-600">{errors.expenses}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Assicurazione </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaEuroSign className="h-5 w-5 text-gray-400" /> </div> <input type="text" name="insurance" value={formData.insurance} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" /> </div> {errors.insurance && <p className="mt-1 text-sm text-red-600">{errors.insurance}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Mesi </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaClock className="h-5 w-5 text-gray-400" /> </div> <input type="number" name="months" value={formData.months} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0" /> </div> {errors.months && <p className="mt-1 text-sm text-red-600">{errors.months}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Rata </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaEuroSign className="h-5 w-5 text-gray-400" /> </div> <input type="text" name="installment" value={formData.installment} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" /> </div> {errors.installment && <p className="mt-1 text-sm text-red-600">{errors.installment}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Tan Origine </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaPercent className="h-5 w-5 text-gray-400" /> </div> <input type="number" name="originTan" value={formData.originTan} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" step="0.01" /> </div> {errors.originTan && <p className="mt-1 text-sm text-red-600">{errors.originTan}</p>} </div> <div> <label className="block text-sm font-medium text-gray-700 mb-2"> Tan Spread </label> <div className="relative"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <FaPercent className="h-5 w-5 text-gray-400" /> </div> <input type="number" name="spreadTan" value={formData.spreadTan} onChange={handleInputChange} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" placeholder="0.00" step="0.01" /> </div> {errors.spreadTan && <p className="mt-1 text-sm text-red-600">{errors.spreadTan}</p>} </div> <div className="md:col-span-2 p-4 bg-gray-50 rounded-lg"> <h3 className="text-lg font-medium text-gray-900 mb-4">Calculated Results</h3> <div className="grid grid-cols-2 gap-4"> <div> <p className="text-sm text-gray-600">Interessi:</p> <p className="text-lg font-semibold">€{calculatedFields.interests}</p> </div> <div> <p className="text-sm text-gray-600">Interessi Spread:</p> <p className="text-lg font-semibold">€{calculatedFields.interestSpread}</p> </div> <div> <p className="text-sm text-gray-600">Provv. Interessi ({formData.loanType === "prestiti_facile" ? "6" : "7"}%):</p> <p className="text-lg font-semibold">€{calculatedFields.interestCommission}</p> </div> <div> <p className="text-sm text-gray-600">Provv. Interessi Spread:</p> <p className="text-lg font-semibold">€{calculatedFields.interestSpreadCommission}</p> </div> <div> <p className="text-sm text-gray-600">Provv. Assic (10%):</p> <p className="text-lg font-semibold">€{calculatedFields.insuranceCommission}</p> </div> <div> <p className="text-sm text-gray-600">Provv. Totale:</p> <p className="text-lg font-semibold">€{calculatedFields.totalCommission}</p> </div> </div> </div> </div> <div className="flex justify-end space-x-4"> <button type="button" onClick={handleReset} className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200" > Reset </button> <button type="submit" className="px-6 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200" > Calculate </button> </div> </form> </div> </div> ); }; export default LoanCalculatorForm; - adesso fai queste modifiche che ti chiedo, sono solo correzioni non cambiare niente altro: I campi numerici di input devono essere nel formato europeo.correggi solo il calcolo Interessi Spread. Tale importo deve essere sottratto agli interessi dopo che sono stati calcolati(Calcola interessi spread, Poi aggiorna interessi Spread sottraendo ad essi Interessi ed aggiorna il campo). Evidenzia con colore Rosso sfondo e caratteri bianchi la Provv. Totale