[Feat] Create User Profile Page for Authenticated Users

[ShivanshPlays]

Description

Issue: Create User Profile Page for Authenticated Users

Description

This issue involves the development of a user profile page that allows authenticated users to view their personal details and a comprehensive orders table. The profile page will serve as a centralized location for users to manage their account information and review their past orders or bookings, including details such as order status and pricing. For unauthenticated users, the page will display options to log in or sign up.

Due to the current lack of order data in the backend, the front end will initially utilize a dummy array to simulate order data until the backend is fully integrated and operational.

Tasks

1. Design User Profile Layout

• Create a visually appealing layout for the user profile page, ensuring it is user-friendly and responsive.
• Include sections for personal details and the orders table.

2. Personal Details Section

• Display the user's personal information, such as:
  • Name
  • Email
  • Phone Number
  • Address (if applicable)
• Allow users to edit their personal details, with appropriate validation and error handling.

3. Orders Table Section

• Implement a table that lists all successful orders/bookings made by the user.
• Initially, use a dummy array to display the following relevant details for each order:
  • Order ID
  • Date of Order
  • Item/Service Purchased
  • Quantity
  • Total Price
  • Order Status (e.g., Completed, Pending, Canceled)
• Provide functionality for users to view more details about each order (e.g., order summary).

4. Authentication Check

• Ensure that the profile page is only accessible to authenticated users.
• If an unauthenticated user tries to access the page, redirect them to the login/signup page and display appropriate messaging.

5. User Interface Elements

• Add a login/signup button for unauthenticated users, prominently displayed on the profile page.
• Ensure consistency with the overall design of the application.

Implementation Details

• Utilize existing authentication mechanisms to verify user identity.
• Fetch user data from the backend using relevant server actions.
• For the orders table, implement a dummy array to simulate order data until the backend integration is complete.
• Implement state management to handle user data and order updates dynamically.

Acceptance Criteria

• The user profile page is accessible only to authenticated users.
• Personal details are displayed accurately, with functionality to update them.
• The orders table accurately reflects the user's order history using a dummy array, with all relevant details.
• Unauthenticated users are redirected to the login/signup page with appropriate messaging.

Additional Notes

• Ensure that user data is handled securely and follows best practices for privacy.
• Test the page thoroughly to ensure proper functionality and a smooth user experience.

Summary

The creation of a user profile page will enhance the user experience by providing easy access to personal information and order history. This implementation will improve account management for users and encourage engagement with the application. The use of a dummy array will facilitate development in the absence of backend order data.

Screenshots

No response

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)