[Feat]Enhance UI and Make Orders Page Responsive

[kavya410004]

The current UI of orders page which is table format for displaying orders has several usability and design limitations:

. Too Many Columns: The table includes multiple columns which don't fit well on mobile screens. As a result, users need to swipe horizontally to view all the information, which impacts the user experience.

2. View Details Button Redundancy: The 'View Details' button is occupying additional space in the table rows, contributing to a cluttered look. This space could be better utilized within a card-based layout.

3. Unresponsive Design: The existing table structure lacks responsiveness, making it difficult for users on different devices to view the orders seamlessly.

4. Less User-Friendly: A tabular display is less intuitive for users when compared to a card layout, which can present order details in a more compact and visually appealing way.

Proposed Solution:

Proposed Solution: I suggest converting the table into a card-based layout where each order is displayed as a separate card. This approach will:

• Enhance Responsiveness: The card layout will adapt to different screen sizes, making it easier to view orders on both desktop and mobile devices.
• Improve User Experience: By reducing the need for horizontal scrolling, users can see all order details directly in the card format.
• Simplify Design: The 'View Details' button can be integrated more naturally within each card, making it less obtrusive and saving space.
• Implement Pagination: I will also implement pagination with "Previous" and "Next" buttons, allowing users to navigate through the orders easily.
• Display Sorted Orders: Orders will be displayed in descending order from the latest to the oldest, making it easier for users to find recent orders.

Screenshots

Checklist

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

[github-actions[bot]]

Hello kavya410004! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.

[mdazfar2]

@kavya410004 assigned.

[harith-hacky03]

Can you assign me please?

[mdazfar2]

Hey @harith-hacky03, one issue can be assigned to only one person at a time. Please don't be discouraged; you can raise a new one that is really needed for our website, where I'm happy to assign you.

• Harith, I need to reach a total of 128 stars to get the Starstruck x2 badge achievement on my GitHub. Can you please help by Star our repository? ⭐

[harith-hacky03]

Sure