Add a dashboard to list and view webhooks data

[koladev32]

Summary

Develop two web pages to enhance our system's management and visualization of webhook data. The goal is to enable users to easily list all webhooks and view detailed information about each one.

Motivation

The initiative aims to provide a user-friendly interface for monitoring and troubleshooting webhooks. With webhook data currently stored in MongoDB and exposed via an API, these web pages will offer direct and simplified user interaction with this data.

Proposed Solution

The solution includes:

1. Webhook Listing Page: A page displaying a table of webhooks with columns for id, Status, Created at, Delivered at, and Error. This will provide a comprehensive overview of all webhooks and their current statuses.

2. Webhook Detail Page: Upon clicking a webhook's id in the listing, users will be directed to a detailed page about that specific webhook. This page is crucial for delving into issues, as it will display the error payload and other relevant details.

Both pages will be user-friendly, with an intuitive interface suitable for all user levels.

Alternatives Considered

An alternative approach is enhancing the existing API to offer more detailed webhook data, which third-party tools or internal systems could then utilize. However, this requires extra tooling and might not be as straightforward for direct access to webhook data.

Additional Context

This feature takes inspiration from webhook management systems in platforms like Stripe and GitHub, which provide both API access and a user-centric web interface for webhook data.

Potential Impact

This addition is expected to significantly improve the user experience in monitoring webhooks, making the process more efficient and user-friendly. It is an addition to the current system and should minimally impact existing functionalities.