NOT READY [Trees] Add New Tree Component

[seanmnguyen]

Description

We’re kicking off Sprint 3 by starting the Trees page. This issue covers building the Add New Tree popup component on src/app/trees/page.tsx.

You’ll be responsible for creating the Add New Tree popup component, matching the provided design. The component should live in src/components/. You should locally try “plugging in” your component to the Trees page to validate it renders correctly, but do not include page integration changes in your PR.

Submitting the form ("Add Tree" button) should actually create a new tree object. Use the Trees POST API request from #18. Include screenshots of the component and the newly added tree in the supabase.

Notes

• Make sure to run git pull before any development work
• Complete your development in a new branch
• Link this issue to your PR
• Feel free to reach out if you have any questions!

Acceptance Criteria

The component has the following fields

• Tree #: number
• Date Planted: date with date picker button
• Species: string
• (TODO) Common Name: string
• (TODO) Funder:
• Condition: dropdown with options "Healthy", "Fair", and "Poor"
• Status: dropdown with options "Active" and "Graduated"
• Address: string
• Latitude: string
• Longitude: string
• Visibility: toggle where text changes between "Public" and "Private Property"
• Name: string
• Phone: string
• Email: string
• (TODO) Water Status: string
• Notes: string (should be a large text element like textarea instead of input)

Contains buttons to add or cancel the tree. The Add Tree button uses a POST request to create a new object.

Task

• Follow the Figma design for each of the form elements
• The Add Tree button submits form and creates a new Tree object

Additional Information
Keep the component flexible and maintainable, this will likely be reused across future pages.

Here is a link to the team's Figma. If you do not have access, please message Sean or Matthew to be added. We highly recommend that you reference the Figma to get the color values, font size/style, corner radius, etc. The "Design System" page will be useful for this.