Leverpay Admin Dashboard and Transaction Page

Leverpay is a responsive web application built with ReactJS and Styled-Components for displaying a dashboard and transaction page. The application is designed to help users manage their transactions and monitor their financial activities in real-time.

Features

• Dashboard Page: This page displays an overview of the user's account, including their balance, income, and expenses.

• Transaction Page: This page allows users to view their transaction history and filter transactions by date, category, and status.

• Responsive Design: The application is fully responsive and adapts to different screen sizes.

• Card Center: The Card Center page provides users with a comprehensive view of their registered credit and debit cards. Users can add, remove, or manage their cards from this page. Additionally, they can view card details, such as the card number, expiration date, and cardholder name, for easy reference.

• Messages: The Messages page serves as a communication hub for users. It allows them to receive important notifications, updates, and alerts related to their account, transactions, and any other relevant information. Users can mark messages as read, delete old messages, and take necessary actions based on the messages they receive.

• Contact: The Contact page provides users with access to important contact information, such as customer support phone numbers, email addresses, and physical addresses. Users can also find a list of frequently asked questions (FAQs) to quickly find answers to common inquiries. This ensures a seamless user experience by facilitating communication between the user and the support team.

• Reports: The Reports page offers users insightful data and visualizations regarding their financial activities. Users can generate various reports, such as expense summaries, income trends, spending by category, and budget analysis. The reports help users gain a deeper understanding of their financial habits and make informed decisions to manage their finances better.

• Users: The Users page, accessible only to administrators or privileged users, enables managing user accounts within the application. Administrators can view a list of registered users, edit their profiles, reset passwords, and grant or revoke access permissions as necessary. This page is crucial for administrators to maintain control over the application's user base.

• Settings: The Settings page allows users to personalize their experience within the application. Users can modify their profile information, change account settings, update notification preferences, and manage security options like two-factor authentication. Customizable settings enhance the overall usability and convenience of the application for each user.

By incorporating these pages into the application, admin can efficiently manage their financial transactions, stay informed through messages, easily access support when needed, analyze their financial data through reports, and administrators can maintain user accounts and application settings effectively. The responsive design ensures that the application remains user-friendly across various devices, making it accessible to a broader audience.

Technologies Used

• ReactJS
• Styled-Components
• HTML5
• CSS3
• Apex-Charts

Getting Started

To run the project locally, follow these steps:

1. Clone the repository to your local machine.
2. Navigate to the project directory and run npm install to install the project dependencies.
3. Run npm start to start the development server.
4. Open your browser and navigate to http://localhost:3000 to view the application.

How to Use

1. Dashboard Page: This page provides an overview of your account, including your balance, income, and expenses. You can view your account details and make transactions from this page.

2. Transaction Page: This page displays your transaction history and allows you to filter transactions by date, category, and status. You can also view details of each transaction by clicking on it.

3. Card Center: In the Card Center, you can manage all your registered credit and debit cards. Add new cards, remove existing ones, and update card information. This page also lets you set a default payment method and review recent transactions made using each card. Additionally, you can enable transaction alerts and set spending limits for enhanced security.

4. Messages: Stay informed with important updates and notifications through the Messages section. Here, you'll find messages related to your account status, security alerts, upcoming payments, and promotions. You can mark messages as read, flag important ones for future reference, and interact with customer support directly from this page.

5. Contact: The Contact page provides you with various ways to get in touch with our support team. You can find our customer support phone numbers, email addresses, and live chat options. Additionally, frequently asked questions (FAQs) are available for quick assistance. If you encounter any issues or have queries, the Contact page is your go-to resource.

6. Reports: Gain valuable insights into your financial activities with comprehensive reports. The Reports section offers detailed visualizations and breakdowns of your spending patterns, income trends, budget progress, and savings analysis. You can customize date ranges and export reports for further analysis and financial planning.

7. Users: As an administrator or privileged user, you can manage the application's user base from the Users page. Here, you can view a list of registered users, their roles, and account statuses. You have the authority to modify user profiles, grant permissions, and reset passwords. The Users page ensures smooth user management and helps you maintain the security of the application.

8. Settings: Personalize your experience and manage your account settings from the Settings page. You can update your profile information, change login credentials, and adjust notification preferences. Additionally, enable two-factor authentication for added account security. The Settings page allows you to tailor the application according to your preferences.

With these features, the application becomes a powerful tool for managing your finances. The Dashboard page gives you a quick overview of your financial standing, while the Transaction page helps you keep track of your spending. The Card Center ensures that you have full control over your payment methods, and the Messages section keeps you informed about important events.

For additional support and inquiries, the Contact page is readily available. The Reports page empowers you with data-driven insights, while the Users page provides administrators with the necessary tools for user management. Lastly, the Settings page ensures that the application adapts to your preferences and maintains a high level of security for your account.

Contributing

Contributions to the project are welcome. If you would like to contribute, please follow these steps:

1. Fork the project repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your forked repository.
5. Submit a pull request to the project repository.