#13 Modal Transaction Form

Title

Modal Transaction Form

As a User I want to add Transaction in a "seperated" in-Context Window so that I have a modern and Intuitive User Experience

[ ] - The User can click on the + Symbol to add a New Transaction to his List
[ ] - He will see a new Window, where her can insert the Transaction Details
[ ] - He will have two Options add Transaction or Cancel Add Transaction
[ ] - Upon clicking add transaction the User will add a new Transaction to the Transactions list
[ ] Cancel
[ ] - Upon Canceling the User be prompted back to the Transaction Page and a new Transcaction will not
[ ] be added to the list

[ ] Create a button component with a + symbol that allows the user to add a new transaction to their list.
[ ] The button should be placed on the transaction page.
[ ] When the user clicks the button, open a modal component that displays a form for entering the transaction details.
[ ] The form should have input fields for the amount, the date, the category, and the description of the transaction.
[ ] The form component should have two buttons: one for adding the transaction and one for canceling the operation.
[ ] The buttons should be labeled clearly and have appropriate colors and icons.
[ ] When the user clicks the add transaction button, validate the input data and update the transaction list accordingly.
[ ] The validation should check that the input fields are not empty and that the amount is a valid number.
[ ] The transaction list should be stored in the localStorage and displayed on the transaction page.
[ ] When the user clicks the cancel button, close the modal component and return to the transaction page.
[ ] No changes should be made to the transaction list.
[ ] Display a message to the user indicating the result of the operation. The message should be clear and informative,
[ ] and use appropriate colors and icons to indicate success or failure.