Invoices Page

Invoice List Page Documentation

Overview

The Invoice List page in the payment dashboard displays a list of all invoices associated with the logged-in user. It provides a clear view of each invoice’s details, including order number, service description, payment amount, and date paid.

Key Components

• Loading Spinner: While fetching invoice data, a large loading spinner (LargeLoadingSpinner) is displayed, enhancing the user experience during data loading.
• Error Handling: In case of API call failures, an ErrorComponent displays a user-friendly error message, advising users to contact support if necessary.
• Navigation: Users can navigate to individual invoice details by clicking on a row in the invoice table.

Data Fetching

• API Call: The findAllPayments function requests the list of invoices from the backend API using Axios. It requires the user’s token for authentication.
• useState and useContext: The useState hook manages the state of invoices (payments), loading (isLoading), and errors (error). The UserContext provides the current user’s information.

User Interactions

• Table Click: Clicking on an invoice row navigates to the detailed invoice page using useNavigate from react-router-dom.
• Error and Loading States: If there’s an error or data is still loading, appropriate feedback is displayed to the user.

Implementation Details

• API Function (findAllPayments):

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

• Effect Hook: The useEffect hook is used to fetch invoices when the component mounts or when the user’s information changes.

Styling

• MDBReact: The page utilizes MDBReact components for table display and overall layout, ensuring a consistent and responsive design.

Future Enhancements

• Pagination: Implement pagination for handling a large number of invoices.
• Search and Filter: Add functionality to search and filter invoices based on different criteria.

This documentation provides a comprehensive guide for understanding the functionalities and structure of the Invoice List page in the payment dashboard application.