[App - Certificate] Course certificate

[iarandrd]

As a waste picker, I want a certificate to be created after completing a course

As a waste picker, I want access to all the certificates I have received through the profile page.

Add a certificate button into the profile page. For the certificate page, follow the figma https://www.figma.com/design/BCEVQYvMDrcBE9qqehr9HL/Mobile-Education-UI?node-id=3661-4670&t=Ye9AmGP5p93LiLc6-4

[magnusklundgren]

Acceptance criteria:

1. On the profile page there is a button below "Editar perfil" that takes the user to a certificate page
   • It should have similar styling to "Editar perfil"
   • it should have the text "Certificados"
2. There is a certificate page with the following components
   • A search bar that allows the user to search for specific certificates
   • A filter bar, that allows the user to select what category of courses to view certificates for
   • A list of Certificates
3. Each Certificate shows a small image of the certificate, and information about its course, and completion date
   • The certificate has a button "visualizar" that allows the user to see a popup that shows the full certificate
   • The page should show the 'name of the course' as a title, and category, time and date the certificate was awarded below the title.

[magnusklundgren]

User tests:

Scenario 1: Certificate Creation and Access

Steps:

• User completes a course.
• User navigates to their profile page.
• User clicks the "Certificados" button.
• User views their newly created certificate.

Expected Outcomes:

• The certificate is automatically generated upon course completion.
• The "Certificados" button is clearly visible and accessible on the profile page.
• The user can easily find and view their certificate.

Scenario 2: Certificate Search

Steps:

• User has multiple certificates.
• User enters a search term in the search bar.
• User filters the results by category.

Expected Outcomes:

• The search bar effectively filters certificates based on the search term.
• The filter bar allows the user to narrow down the results by course category.
• The user can quickly find specific certificates based on their search criteria.

Scenario 3: Certificate Visualization

Steps:

• User clicks the "Visualizar" button for a certificate.
• A popup window displays the full certificate.

Expected Outcomes:

• The full certificate is clearly visible in the popup window.
• The user understands what course they are viewing the certificate for and the details about the course.

[magnusklundgren]

Translations needed:

• TODO