Ak-nut-47 / reeco

Efficient order management system built with React, Redux for state management, and styled using Chakra UI. Allows users to update product statuses, mark products as missing, and optionally edit product details. Icons are sourced from React Icons library.Reeco Assignment

Reeco

Order System

This project implements an order management system with the following functionalities:

• Display order details on the main page.
• Allow the user to update the status of each product.
• Implement a Missing – Urgent Popup for marking products as "Missing" or "Missing – Urgent."
• Optional: Edit Popup for updating product details.

Main Page

The main page displays order information. When the shipping date arrives, the user can update the status of each product by interacting with the CTAs on the right.

Updating Product Status

• Clicking will mark the product as approved.

• Clicking will open the Missing – Urgent Popup for marking the product as "Missing" or "Missing – Urgent."

• 

• Clicking "Edit" will open an Edit Popup for updating product details.

Missing Status Options

• "Missing"
• "Missing – Urgent"

Edit Popup

The Edit Popup allows the user to update product details:

• Product price (price >= 0)
• Product quantity (quantity >= 0)
• Selection of a reason

Technologies Used

• Redux: State management library for managing the application state.
• Chakra UI: Used for styling the HTML elements and providing a consistent design.
• React: JavaScript library for building user interfaces.
• React Icons: Icons used in the project are sourced from the React Icons library.