Skip to content
My Docs

Admin Dashboard Page

Admin Dashboard Component Documentation

Overview

The AdminDashboard component is designed to display key metrics and reports to the admin user. It uses a container layout from MDBReact to organize the data presentation. The component fetches report data from the backend and displays it using several sub-components: TotalUsersCard, ActivePaymentsCard, TotalRevenueCard, and OverduePayments.

Structure

  • Loading State: Utilizes useState to manage the loading state, displaying LargeLoadingSpinner while fetching data.
  • Error Handling: Implements ErrorComponent for displaying any errors that occur during the fetch operation.
  • Sub-Components: Breaks down the UI into smaller components for each type of data.
  • useEffect Hook: Manages side effects, fetching report data on component mount and when the user token changes.
  • Context: Uses UserContext to access the current user’s token.

Sub-Components

  • TotalUsersCard: Displays the total number of users.
  • ActivePaymentsCard: Shows the count of active recurring payments.
  • TotalRevenueCard: Presents the total revenue collected for the current month
  • OverduePayments: Lists all overdue payments for the month in a tabular format.

Data Fetching

  • API Call: Uses getReports function from helpers/reportsApi to fetch the reports data.
  • Error Handling: Catches any errors during the API call and sets the error state.
  • Dependency Array: Reacts to changes in the user’s token.

Usage

  • Import and render AdminDashboard in the admin route.
  • Ensure that UserContext is properly set up to provide the current user’s token.

Future Enhancements

  • Data Visualization: Integrate chart libraries for visual representation of some metrics.

  • Dynamic Updates: Implement real-time data fetching to keep the dashboard updated.

  • Check Currency: Currently it calculates the current total payments for the month just based on all completed payments but it should also check for whether the payment is in xcd/us and differentiate.

Dependencies

  • mdb-react-ui-kit for UI components.
  • UserContext for accessing user data.
  • getReports from helpers/reportsApi for API requests.
  • Custom components like TotalUsersCard, ActivePaymentsCard, etc. for data display.

This component is crucial for the admin panel, providing a quick overview of key metrics and the financial health of the platform.