Note Area in Transaction Details Page

Value Proposition

As a user I want the ability to add a note to my transactions In order to have a better overviewf for each transaction

A text input field, Edit button and Delete button are displayed on each transaction´s detail page.
User can enter up to 140 characters in the note input field, and character counter is displayed.
A note can be added in the input field when the edit mode is open, which is accessible via the edit button.
When a note is added, it saves immediately upon pressing 'Enter'. The edit mode will be closed.
The note can be deleted with a delete button. When the Delete button is pressed, a confirmation dialog appears with options:
- "Really Delete" to confirm deletion.
- "Cancel" to exit without deleting.
Upon confirming editing/deleting, the note is removed/edited, and a success message appears.

[ ] Create a new feature branch named feature/transaction-notes
[ ] In the TransactionDetailsPage component, add the note input field
- Create a text input field for entering the note with a 140-character limit.
[ ] In the TransactionDetailsPage component, create the handleAddNote function.
- Implement the handleAddNote function to save the note when 'Enter' is pressed.
[ ] Use useState or a state management library (e.g., useLocalStorageState) to store the note in the transaction's state.
[ ] In the TransactionDetailsPage, implement the handleEditNotefunction.
- When the Edit button is clicked, allow the user to modify the existing note
[ ] In the TransactionDetailsPage, add the handleDeleteNote function.
- Implement the handleDeleteNote function that removes the note when the Delete button is clicked.
- Show a confirmation dialog with options: "Really Delete" to confirm or "Cancel" to exit without deletion.
- If Really Delete is clicked, remove the note.
[ ] Display a success message 'Note successfully deleted' after deleting the note.
[ ] Implement validation for the note input field to limit the characters to 140.