Skip to content
My Docs

Client Dashboard Page

Client Dashboard Documentation

Overview

The Client Dashboard in the payment platform is a user interface for individual clients to view their latest invoice, balance, and transaction history.

Component Description

  • Client: Main component for the dashboard.
    • Fetches user’s payment data using getAllPayments API call.
    • Calculates total balance and identifies the latest invoice.
    • Displays user info, latest invoice, transaction history, and total balance.

Key Functions

  • getAllPayments(id, token): Retrieves all payments for a user. Accepts user ID and token for authentication. Handles API errors gracefully.

Usage

  • On loading, the component fetches payment data and processes it to display the necessary information.
  • Loading spinner and error handling are implemented for better user experience.
  • The balance card shows the total amount due.
  • The latest invoice and a brief transaction history are displayed, with a link to view more.

Error Handling

  • Displays a loading spinner while fetching data.
  • Shows an error message if the data fetch fails.

Dependencies

  • axios for API calls.
  • UserContext for accessing user information.
  • react-router-dom for navigation.

API Call: getAllPayments

  • Endpoint: GET ${process.env.REACT_APP_API_URL}/payments/users/${id}
  • Headers: Authorization: Bearer ${token}
  • Returns: Payment data or an error object.

Enhancements

  • Consider adding pagination or filtering options for transaction history.
  • Implement real-time updates for user transactions.

Code Snippet Example (API Call)

export const getAllPayments = async (id, token) => {
  try {
    const response = await axios.get(
      `${process.env.REACT_APP_API_URL}/payments/users/${id}`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );
    return response.data;
  } catch (error) {
    return error;
  }
};

This documentation provides a comprehensive overview of the Client Dashboard component, explaining its functionalities, dependencies, and key API call.