[Feature]: [FEAT] User Dashboard Product Lists Component

[crystal4000]

Description

Develop a Product Lists Component for the User Dashboard. This component allows users to efficiently manage and view their product inventory with detailed information and quick actions.

Acceptance Criteria

• The component is implemented according to the provided design, including all visual elements and functionality.
• The layout is responsive and displays correctly across various device sizes.

Requirements:

• Header with "Products" title and "Add a Product" button
• Search bar for product filtering
• View options (grid and list) and Filter button
• Product table with columns: Product Name, Product ID, Category, Price, Status, and Actions
• Pagination controls
• Product thumbnails
• Status indicators (In stock, Out of stock, Low on stock)

Tests:

• Ensure all elements render correctly and match the design.
• Verify responsiveness across various device sizes.
• Test the search functionality for accurate product filtering.
• Check that the view options (grid/list) work correctly.
• Verify the filter functionality (assuming it's implemented).
• Test the "Add a Product" button functionality.
• Ensure pagination works correctly and displays the right number of products.
• Verify that status indicators display correctly for each product.
• Test the Actions menu functionality.

Tasks:

• Develop the Product Lists Component based on the provided design and requirements.
• Implement a responsive layout that adapts to different screen sizes.
• Create the header with the title and "Add a Product" button.
• Implement the search bar with real-time filtering capability.
• Develop the view options toggle (grid/list) and filter button.
• Create the product table with all specified columns.
• Implement status indicators with appropriate colors (green for in stock, red for out of stock, yellow for low stock).
• Add product thumbnails to the table.
• Develop pagination controls and ensure they update the product list correctly.
• Implement the Actions menu (three-dot menu) for each product row.
• Ensure all data is properly fetched and displayed from the backend.
• Optimize the component for performance, considering lazy loading for images and pagination.
• Add appropriate alt text for product images and aria labels for accessibility.
• Implement sorting functionality for each column (if required).
• Create a loading state for when product data is being fetched.

Links

| FIGMA LINK

Images

[judeb21]

The table component is dependent on this more action dropdown #issue221

[MhideTech]

Hey @Presho1, I'm Olamide My issue is to work on the More Action Popover Button " : " that is being rendered on your Dashboard, how can you implement my component on your dashboard??

[Uyimolo]

Hey, I made the filter component as the issue assigned to me, its been merged so you can pick pull and import it in your work. Ill send a message on slack to you too.

[GreyyDaze]

@kleenpulse I've completed the product detail component (issue #206), and my PR has been merged. My issue was linked to #204 and suspended as a duplicate of yours. Please integrate my component into your product detail page.