https://github.com/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
https://github.com/ak-nut-47/reeco

chakra react react-ic redux

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ak-nut-47/reeco
• Owner: Ak-nut-47
• Created: 2023-12-14T11:36:15.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-18T11:32:31.000Z (over 2 years ago)
• Last Synced: 2025-07-14T14:07:20.235Z (8 months ago)
• Topics: chakra, react, react-ic, redux
• Language: JavaScript
• Homepage: https://unique-biscochitos-0e803a.netlify.app/
• Size: 496 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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.

![Screenshot 2023-12-18 160122](https://github.com/Ak-nut-47/reeco/assets/104593018/a90d918f-12c3-42a2-8a50-a886bab532bb)

### Updating Product Status

- Clicking  will mark the product as approved.

  ![Screenshot 2023-12-18 160327](https://github.com/Ak-nut-47/reeco/assets/104593018/765e9ffd-f017-4e10-8ee1-fa508b6e24a4)

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

- ![Screenshot 2023-12-18 160412](https://github.com/Ak-nut-47/reeco/assets/104593018/98b7dc08-fe0f-43c7-84a7-9f760b9092b4)

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

![Screenshot 2023-12-18 163352](https://github.com/Ak-nut-47/reeco/assets/104593018/393c678e-d26b-4190-9103-20e0922c6e5f)

### 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.