Code Monkey home page Code Monkey logo

ak-nut-47 / reeco Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 508 KB

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

Home Page: https://unique-biscochitos-0e803a.netlify.app/

HTML 7.19% CSS 3.27% JavaScript 89.54%
chakra react react-ic redux

reeco's Introduction

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

Updating Product Status

  • Clicking will mark the product as approved. Screenshot 2023-12-18 160327

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

  • Screenshot 2023-12-18 160412

  • Clicking "Edit" will open an Edit Popup for updating product details. Screenshot 2023-12-18 163352

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.

reeco's People

Contributors

ak-nut-47 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.