Create a form for adding new Donated item

[Anjali0407-git]

We need to develop a form that allows staff members to manually enter details about donated items into our system. The form has to include fields for item type, current status, donor email, program and date donated. It also has to allow for the upload of images related to the donated items. This form will serve as a foundation for more complex functionality in the future, such as linking corresponding donor and program details to the donated item.

Form Requirements:

• Item Type: Dropdown menu with options: 'Bicycle' and 'Computer'.
• Current Status: Set the default status of the item to "Received" and disable this field to prevent users from modifying it.
• Donor Email: Dropdown menu with hardcoded emails for now. As multiple donors can have same names, it's better to use email ids or for uniquely identifying the donor.
• Program: Dropdown menu with hardcoded options for hardcoded program names.
• Image Upload: Allow users to upload between 1 to 5 images of the donated item.
• Date Donated: Date picker to select the date of donation.

Tasks:

1. Form Setup:

• Implement the form layout with the specified fields.
• Use appropriate UI elements such as dropdowns for selecting Item Type, Donor Email and Program; a text input for Current Status, a date picker for the Date Donated; and a file input for Image Upload.
• Provide a tooltip near the Image Upload field informing users to upload 1 to 5 images.
• Store the images as base64-encoded strings, rather than just storing the file names.

2. Validation:

• Mark all fields as mandatory and validate that no field is left empty.
• Allow only image files for Image Upload field.
• Do not allow for form submission until all validations are passed.

3. Form Submission:

• On submission, the form should simply console log the entered details for now.

In near future, we will replace the hardcoded Programs and Donor Email ids with the real data from database once we have those APIs setup in backend.