A React-based frontend for SuperPay’s dashboard, enabling dynamic reporting and transaction visualizations. Developed during my internship at SuperPay, this interface delivers real-time insights through interactive charts and filters.

Video🔗 Ver video en YouTube

To build a modern, responsive dashboard for SuperPay users to view and analyze their business transaction data in real time.

Merchants often need quick access to customized reports of their payment activity. This dashboard allows:

• Access to detailed metrics of completed transactions.
• Filtering by terminal, payment method, transaction status, and date range.
• Interactive chart visualizations for better insights.

• 📅 Date range filtering with a date picker.
• 🧾 Filter by payment method (e.g., Nequi, Redeban, etc.).
• 🏧 Filter by terminal.
• ✅ Filter by transaction status (approved, declined, pending).
• 📊 Real-time charts and stats based on filters.
• 🔄 Dynamic summaries generated from filtered data.

This is a frontend-only project. Key technologies:

• React — Main framework
• react-select — Customizable multiselect components
• react-datepicker — Modern date picker
• Recharts — Responsive charting library
• Pure CSS — Custom styles
• react-admin — Sidebar menus and navigation