As a L&D manager, I can filter information in the list of all the education benefits assigned to a GAPster

Historia de Usuario

Como Encargado del área de L&D,
quiero filtrar el listado de todos los beneficios otorgados a GAPsters
de modo que pueda encontrar la información específica de una persona o departamento

Criterio de Aceptación

1. Se debe de mostrar la información de la lista con el orden y el filtrado según lo que retorna el API
2. La tabla no realiza ninguna acción al darle click o similar
3. En cada línea de la tabla hay un botón para editar y/o borrar un registro nuevo (no hace nada por ahora).
4. La paginación de la información no forma parte de esta tarea
5. El filtrado de la información se tiene que hacer en el frontend pues el endpoint no efectua ninguna accion semejante (solo retorna toda la información encontrada)
6. El texto digitado en el campo de búsqueda únicamente busca en la información del departamento (también llamado área) y en el nombre de la persona. El resto de espacios de la tabla no pueden utilizarse para buscar información.
7. El filtrado se realiza luego que se ha digitado 3 caracteres
8. Al digitarse cualquier caracter aparece un botón de "clear" al lado de la barra de filtro para eliminar el filtro escrito

Recursos:

• URL del API endpoint para la lista de beneficios otorgados: GET https://up0tbmtu7h.execute-api.us-east-1.amazonaws.com/Prod/api/1/education_benefits
• Guía de diseño: http://products-style-guide.s3-website-us-east-1.amazonaws.com/?path=/story/style-guide--forms
• Respuesta de ejemplo del API:

{
  "data":[
    {
        "id": "8d346337-1e14-4b23-8752-f4a2c6b03ee2",
        "status": 1,
        "type": 1,
        "employee_id": "828b925e-e96a-4b93-9128-c260950c7b2b",
        "updated_at": "2022-01-11T20:12:04.806222+00:00",
        "created_at": "2022-01-11T20:12:04.806222+00:00",
        "education_area_id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
        "currency": "USD",
        "employee": {
            "email": "rrodriguez@growthaccelerationpartners.com",
            "id": "828b925e-e96a-4b93-9128-c260950c7b2b",
            "full_name": "Rodrigo Rodriguez Ramirez"
        },
        "comments": "Comments updated",
        "description": "Updated description",
        "date": "2021-01-30",
        "budget": 300.0,
        "education_area": {
            "id": "d747e78c-ba1b-46a1-8d14-057394d94b5d",
            "name": "certifications"
        }
    }
  ]
}

Notas

• La imagen de debajo es para fines ilustrativos y para usar de guía. A nivel general, lo más importante es que el diseño de la tabla coincida con el diseño de la guía de diseño.