Orders feature in dashboard

[niyobern]

Description

Feature: Implement the Orders feature in the buyer's dashboard as per the provided Figma design. The sidebar and navbar are already completed, so the focus will be on developing the orders table. The project is set up using TypeScript, Redux Toolkit, and React.

Design Reference

Tasks

1. Set Up Orders Component:

   • Create the Orders component structure in the buyer's dashboard.
   • Ensure proper integration with the existing sidebar and navbar components.

2. Fetch Orders Data:

   • Use Redux Toolkit to fetch orders data from the backend.
   • Define and manage state for orders, including actions and reducers.

3. Display Orders Table:

   • Implement the orders table UI according to the Figma design.
   • Include columns for ID, Order, Date, Status, Total, and Action.
   • Add pagination controls at the bottom of the table.

4. Order Status Filters:

   • Implement filters for All, Pending, Completed, and Cancelled orders.
   • Ensure that clicking each filter updates the table accordingly.

5. Search Functionality:

   • Add a search bar to allow users to search for specific orders.
   • Ensure search functionality updates the orders table based on the query.

6. Actions:

   • Implement the edit and delete actions for each order.
   • Ensure proper integration with the backend for these actions.

7. Styling:

   • Apply the styling as per the Figma design.
   • Ensure responsiveness and compatibility across different devices.

Acceptance Criteria

• The Orders feature is implemented according to the Figma design.
• Orders data is fetched and displayed correctly in the table.
• Filters for All, Pending, Completed, and Cancelled orders work as expected.
• Search functionality updates the table based on the search query.
• Edit and delete actions are functional.
• The table is responsive and styled according to the design.

Additional Notes

• Ensure compliance with best practices for TypeScript, Redux Toolkit, and React.
• Review and test the functionality thoroughly before merging.

---

Related Issues

79

[niyobern]

Implementation Plan

Step 1: Set Up Orders Component

1. Create Orders Component:

   • Create a new folder Orders under the components directory.
   • Create Orders.tsx and OrdersForm.tsx
   • Define the basic structure of the Orders component in Orders.tsx.

2. Create Order Form

   • Create

3. Integrate with Sidebar and Navbar:

   • Ensure the Orders component is correctly integrated within the buyer's dashboard layout.
   • Update the routes to include the new Orders component.

Step 2: Fetch Orders Data

1. Define Redux Slice:

   • Create a new slice ordersSlice in the redux directory using Redux Toolkit.
   • Define actions and reducers for fetching orders data.
   • Create asynchronous thunk actions for API calls to fetch orders.

2. Connect to Backend API:

   • Implement the API call to fetch orders data in the thunk action.
   • Ensure proper handling of loading states and errors.

3. Manage State:

   • Integrate the ordersSlice into the Redux store.
   • Ensure the Orders component subscribes to the orders state and dispatches actions appropriately.

Step 3: Display Orders Table

1. Implement Table UI:

   • Use a table component to display orders.
   • Define columns for ID, Order, Date, Status, Total, and Action.

2. Add Pagination:

   • Implement pagination controls at the bottom of the table.
   • Handle pagination state and update the displayed orders accordingly.

Step 4: Order Status Filters

1. Create Filter Buttons:

   • Add filter buttons for All, Pending, Completed, and Cancelled orders above the table.
   • Style the buttons according to the Figma design.

2. Implement Filter Logic:

   • Add filter functionality to update the orders displayed based on the selected status.
   • Ensure the state updates correctly and the UI reflects the filtered data.

Step 5: Search Functionality

1. Add Search Bar:

   • Implement a search bar component above the orders table.
   • Style the search bar according to the Figma design.

2. Implement Search Logic:

   • Add search functionality to filter orders based on the query entered in the search bar.
   • Ensure the state updates correctly and the UI reflects the searched data.

Step 6: Actions (Edit and Delete)

1. Implement Edit Action:

   • Add an edit button for each order row in the table.
   • Implement the edit functionality to allow users to modify order details.
   • Ensure proper integration with the backend API for updating orders.

2. Implement Delete Action:

   • Add a delete button for each order row in the table.
   • Implement the delete functionality to allow users to remove orders.
   • Ensure proper integration with the backend API for deleting orders.

Step 7: Styling

1. Apply Styling:

   • Apply styles to the orders table and its components based on the Figma design.
   • Ensure consistency with the overall theme of the dashboard.

2. Ensure Responsiveness:

   • Test the orders table on different screen sizes and devices.
   • Make necessary adjustments to ensure a responsive and user-friendly design.

Step 8: Testing

1. Unit Tests:

   • Write unit tests for the Orders component and Redux logic.
   • Ensure all functions and components are covered by tests.

2. End-to-End Testing:

   • Perform end-to-end testing to verify the entire orders feature.
   • Ensure all functionalities (fetching, filtering, searching, editing, deleting) work as expected.

Conclusion

Following this implementation plan will ensure the orders feature in the buyer's dashboard is developed efficiently and effectively. Each step focuses on modular development, allowing for easy testing and debugging. I pledge to adhere to best practices for TypeScript, Redux Toolkit, and React throughout the implementation process.