171-sprint24-requestpage_component_enhancement

[MiguelQuintana1]

This PR resolves issue #171

GMT20250616-045358_Clip_Miguel.Quintana.s.Clip.06_15_2025.mp4

Key Changes:

Introduced CustomDropdown.tsx Component:

Created a new reusable CustomDropdown component to encapsulate the dropdown logic and styling.
This component utilizes TouchableOpacity for the main button, a Modal for the overlay, and a FlatList to efficiently render the selectable options.

It includes a visual chevron icon (from @expo/vector-icons) for better affordance.
Styling is consistent with existing form elements, providing a polished and integrated look.
Replaced TextInput with CustomDropdown in RequestPage.tsx:
The previous TextInput for "Hours Off" was removed and replaced with an instance of the new CustomDropdown component.

The hoursOffOptions array now strictly defines the allowed time-off choices: "Full Day", "Half Day", "1 Hour", "2 Hours", "3 Hours", "4 Hours", "5 Hours", "6 Hours", "7 Hours", and "8 Hours".
Updated Form Validation:
The handleSubmit function in RequestPage.tsx was updated to correctly validate the hoursOff selection from the custom dropdown, ensuring a value is chosen before submission.
The isFormValid check also now correctly accounts for the dropdown's selected value.

How to Test 🧪

1. Steps to Reproduce:
   • Step 1: supabase start
   • Step 2: npx expo start
   • Step 3: click on "Go to Request Time off Page" and play with it.