103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Balance } from '../types';
|
|
|
|
interface AddBalanceModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onAddBalance: (balance: Omit<Balance, 'id'>) => void;
|
|
onUpdateBalance?: (balance: Balance) => void;
|
|
balanceToEdit?: Balance | null;
|
|
}
|
|
|
|
const AddBalanceModal: React.FC<AddBalanceModalProps> = ({ isOpen, onClose, onAddBalance, onUpdateBalance, balanceToEdit }) => {
|
|
const [name, setName] = useState('');
|
|
const [initialAmount, setInitialAmount] = useState('');
|
|
|
|
React.useEffect(() => {
|
|
if (balanceToEdit) {
|
|
setName(balanceToEdit.name);
|
|
setInitialAmount(balanceToEdit.initialAmount.toString());
|
|
} else {
|
|
setName('');
|
|
setInitialAmount('');
|
|
}
|
|
}, [balanceToEdit, isOpen]);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!name || !initialAmount) {
|
|
alert('Please fill all required fields.');
|
|
return;
|
|
}
|
|
|
|
if (balanceToEdit && onUpdateBalance) {
|
|
onUpdateBalance({
|
|
...balanceToEdit,
|
|
name,
|
|
initialAmount: parseFloat(initialAmount),
|
|
});
|
|
} else {
|
|
onAddBalance({
|
|
name,
|
|
initialAmount: parseFloat(initialAmount),
|
|
});
|
|
}
|
|
resetForm();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setName('');
|
|
setInitialAmount('');
|
|
onClose();
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center p-4">
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md">
|
|
<div className="flex justify-between items-center p-6 border-b border-gray-200">
|
|
<h2 className="text-xl font-bold text-gray-800">{balanceToEdit ? 'Edit Balance' : 'Add New Balance'}</h2>
|
|
<button onClick={resetForm} className="text-gray-400 hover:text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Balance Name</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-800 transition"
|
|
placeholder="e.g., Main Account, Savings"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-gray-700">Initial Amount (€)</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={initialAmount}
|
|
onChange={e => setInitialAmount(e.target.value)}
|
|
className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-800 transition"
|
|
placeholder="0.00"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-4">
|
|
<button type="submit" className="bg-gray-800 text-white px-6 py-2 rounded-lg font-semibold hover:bg-gray-900 transition">
|
|
{balanceToEdit ? 'Save Changes' : 'Add Balance'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddBalanceModal;
|