feat: Redesign Forms and Observations screens with improved UI/UX

[najuna-brian]

Description:

Redesigns the Forms, Observations, and Sync screens with a consistent, card-based layout and improved functionality.

Changes

• Added reusable UI components (FormCard, ObservationCard, EmptyState, FormTypeSelector, SyncStatusButtons)
• Redesigned FormsScreen with functional form list and card layout
• Redesigned ObservationsScreen with header search, form type dropdown, and sync status buttons
• Redesigned SyncScreen with dynamic status calculation and relative time display
• Added ObservationDetailScreen for viewing full observation details
• Added custom hooks (useForms, useObservations) for data management
• Added dateUtils utility for relative time formatting
• Added theme/colors for consistent styling

Screenshots:

Breaking Changes: None

Closes #65

[Mishael-2584]

@najuna-brian Nice. Please try to test with different screen sizes for responsivity. The main menu is covered by the phone menu on some devices.

[Mishael-2584]

Also does this PR solve the issue in the image below where the navigation buttons for the forms could need better adjustment while filling details.

[najuna-brian]

Nice one @Mishael-2584

Curently, The MenuDrawer uses bottom: 0 in its styles, so it extends to the bottom of the screen and can cover the bottom tab bar on some devices, especially smaller screens.

[najuna-brian]

Also does this PR solve the issue in the image below where the navigation buttons for the forms could need better adjustment while filling details.

Oooh yeah! Could this be something related to the formulas-formplayer rather than the Formulus?

[najuna-brian]

Please try to test with different screen sizes for responsivity. The main menu is covered by the phone menu on some devices.

@Mishael-2584 Can you as well please share the image for this?

[Bahati308]

Also does this PR solve the issue in the image below where the navigation buttons for the forms could need better adjustment while filling details.

@Mishael-2584 I think some of the suggested changes have been addressed just that the new version(release) has not been published yet, for you to see the latest updates in the app, you could run ADB or android studio, since those connect and give you the latest updates(I'm assuming you are running Formulus directly from the app, correct me if you're not). Thanks

[r0ssing]

This looks great!!! The app is really starting to look professional now 😎 🤿

[najuna-brian]

@najuna-brian Nice. Please try to test with different screen sizes for responsivity. The main menu is covered by the phone menu on some devices.

Just made adjustments to the MenuDrawer to use safe area insets and a dynamic bottom position (tab bar height + device safe areas) so it no longer covers the bottom navigation bar on any screen size.
@Mishael-2584 Some feedback on how it appears on your Android 😃