[PERTE-524] New incident report screen

[Gonzalosanto]

Issue coopcycle/coopcycle#524

Related PR: coopcycle/coopcycle-web#5146

Related issues:

• Rethink the design for the incident report screen coopcycle#464
• Apply behaviour for long-tap actions for task list item (dispatch + courier screens) coopcycle#508
  • PR: [PERTE-508] Apply behaviour for long-tap actions for task list item (dispatch + courier screens) #2043
• Enable to report inaccurate order details via incidents coopcycle#493
  • mobile app: UI to report incidents (primarily for a messenger role, maybe enable for dispatcher role as well) coopcycle#541

See this slack conversation for a bit more insight about the API endpoint:
https://coopcycle.slack.com/archives/C08C64Z8E4Q/p1761854671158789?thread_ts=1761836225.737869&cid=C08C64Z8E4Q

Figma:

https://www.figma.com/design/UId2G6Eh6LvqBDYWqpceL5/Coopcycle?node-id=1531-19301&t=r2BYB2kG6asRQdUf-1

Tasks:

• Create this new screen (empty for now) and make the long-tap menu "Report Incident" option to navigate there passing the task data to be reported.
• In the new screen, add the top bar with the 2 tabs.
  • Make them show/hide their corresponding container contents when tapped.
• Let's focus first on the "Report incident" tab!
  • Migrate the current incident report screen (components and functionallity) and import it inside the tab content.
    • If needed, move files into a more "generic" folder/place for the report incident screen + components.
    • The report screen itself and report incident form (that now will be the tab content) should remain as sepparated components, so that we can also open the incident report screen from a task detail screen (to be done as part of another task in this issue).
  • The "Incident Type" should be a select in both android and ios (avoid the ios "caroussel", use the gluestack's one).
  • Make the form to work as it was working before (calling the same endpoint).
  • Show the spinner while processing the form and navigate back once finished (if everything went fine).
  • If anything went wrong, we should display the error and stay in the form to let the user correct the form data.
• Now, let's focus on the "Order Details" tab!
  • Create the form to edit all the task's fields.
  • All the select fields should be displayed the same in both android and ios (avoid the ios "caroussel", use the gluestack's one).
  • For packages, we display them (if the task/order has any) but with the "+" & "-" buttons disabled (for now).
    • When tapped, display a "toast" message (or something like that) saying something like: "To change this, go to report the corresponding dropoff".
  • For supplements, see this PR as reference: Feature: editing supplements coopcycle-web#5071
    • In that PR they are checkboxes but we'll implement them with a counter and "+" & "-" buttons.
    • If there is only 1 supplement and we tap "-" button, the row should dissapear.
    • Note that they are stored in the backend at Order level. We need to see if the new report incident endpoint allow us to send the supplements form data.
  • Show the spinner while processing the form and navigate back once finished (if everything went fine).
  • If anything went wrong, we should display the error and stay in the form to let the user correct the form data.
• Changing from one tab to the other should NOT clear/loss the changes in any of the forms.
• Inside a task detail screen, change the action from the "Complete" bottom button (when swipped to the left) to also navigate to this new screen (for both dispatcher and courier users).
• Make sure that everything looks good in both dispatcher and courier sections.
• Make sure it looks good also in dark-mode (both sections).
• Make sure it works fine at iOS.
• Change the already existant e2e test that verifies the report incident flow from task detail screen, making changes in the "Report incident" tab only (just the same fields the current test do).
• Add a new e2e test file that verifies this new flow (with changes in both "Order details" and "Report incident" tabs? depending what we decide in the "NOTE:" above the issue).
• Make sure all tests pass!

Some missing adjustments and considerations

See the comment below: #2061 (comment)

[alexsegura]

Here a className should be used, i.e text-error-400 for example

https://gluestack.io/ui/docs/home/theme-configuration/default-tokens