32 |
33 | {/*
79 |
80 |  |
81 |  |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
📬 Contact
89 |
90 | If you want to contact me, you can reach me through below handles.
91 |
92 | [](https://www.linkedin.com/in/mahesh-patil-bb4ba5218/)
93 |
94 | © 2023 Mahesh Patil
95 |
--------------------------------------------------------------------------------
/my-app/src/Reducers/OrderReducer.js:
--------------------------------------------------------------------------------
1 | import { Admin_Orders_Fail, Admin_Orders_Request, Admin_Orders_Sucess, Clear_Error, Delete_Order_Fail, Delete_Order_Request, Delete_Order_Sucess, My_Order_Fail, My_Order_Request, My_Order_Sucess, New_Order_Fail, New_Order_Request, New_Order_Success, Order_Detial_Fail, Order_Detial_Request, Order_Detial_Sucess, Update_Order_Fail, Update_Order_Request, Update_Order_Sucess } from "../constants/OrderConstants";
2 |
3 |
4 | export const NewOrderReducer = (state = { order:{}} , action)=>{
5 |
6 |
7 | switch(action.type){
8 |
9 | case New_Order_Request :
10 | return{
11 | loading : true,
12 | }
13 | case New_Order_Success:{
14 | return {
15 | ...state,
16 | loading : false,
17 | order : action.payload
18 | }
19 | }
20 |
21 | case New_Order_Fail:{
22 | return{
23 | ...state,
24 | loading:false,
25 | error : action.payload
26 | }
27 | }
28 |
29 | case Clear_Error:{
30 | return{
31 | ...state,
32 | error : null
33 | }
34 | }
35 |
36 | default : return state
37 | }
38 | }
39 |
40 |
41 |
42 |
43 | export const MyordersReducer = (state = { orders : [] } , action) =>{
44 | switch(action.type){
45 |
46 | case My_Order_Request :
47 | return {
48 | loading : true,
49 | }
50 |
51 | case My_Order_Sucess : {
52 | return {
53 | ...state,
54 | loading : false,
55 | orders : action.payload
56 | }
57 | }
58 |
59 | case My_Order_Fail : {
60 | return {
61 | ...state,
62 | loading : false,
63 | error : action.payload
64 | }
65 | }
66 |
67 | default : return state
68 |
69 | }
70 |
71 | }
72 |
73 |
74 | export const OrderDetialReducer = (state = { order : {} } , action) =>{
75 |
76 | switch(action.type){
77 |
78 | case Order_Detial_Request :
79 | return {
80 | loading : true,
81 | }
82 |
83 | case Order_Detial_Sucess : {
84 | return {
85 | ...state,
86 | loading : false,
87 | order : action.payload
88 | }
89 | }
90 |
91 | case Order_Detial_Fail : {
92 | return {
93 | ...state,
94 | loading : false,
95 | error : action.payload
96 | }
97 | }
98 |
99 | case Update_Order_Request : {
100 | return {
101 | loading : true,
102 | isUpdated : false
103 | }
104 | }
105 |
106 | case Update_Order_Sucess : {
107 | return {
108 | ...state,
109 | loading : false,
110 | isUpdated : true
111 | }
112 | }
113 |
114 | case Update_Order_Fail : {
115 | return {
116 | loading : false,
117 | error : action.payload ,
118 | isUpdated : false
119 | }
120 | }
121 |
122 | case Clear_Error : {
123 | return{
124 | loading : false,
125 | error : null
126 | }
127 | }
128 |
129 | default : return state
130 |
131 | }
132 |
133 | }
134 |
135 |
136 | export const AdminOrdersReducer = (state = { orders : [] } , action) =>{
137 | switch(action.type){
138 |
139 | case Admin_Orders_Request :
140 | return {
141 | loading : true,
142 | orders : [ ]
143 | }
144 |
145 | case Admin_Orders_Sucess : {
146 | return {
147 | ...state,
148 | loading : false,
149 | orders : action.payload
150 | }
151 | }
152 |
153 | case Admin_Orders_Fail : {
154 | return {
155 | ...state,
156 | loading : false,
157 | error : action.payload
158 | }
159 | }
160 |
161 | case Delete_Order_Request : return {
162 | loading : true,
163 | isDeleted : false,
164 | orders : []
165 | }
166 |
167 | case Delete_Order_Sucess : {
168 | return{
169 | ...state ,
170 | loading : false,
171 | isDeleted : true,
172 | orders : []
173 | }
174 | }
175 |
176 | case Delete_Order_Fail : {
177 | return{
178 | ...state ,
179 | loading : false,
180 | isDeleted : false,
181 | orders : []
182 | }
183 | }
184 |
185 | default : return state
186 |
187 | }
188 |
189 | }
--------------------------------------------------------------------------------
/my-app/src/components/Invoice/InvoiceContent.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 |
3 | const InvoiceContent = ({ invoiceData }) => {
4 |
5 | const [totalamount, setTotalamount] = useState(0)
6 |
7 |
8 | useEffect(()=>{
9 | const calculateTotal = () => {
10 | return setTotalamount(invoiceData && invoiceData.items && invoiceData.items.reduce((total, item) => total + item.quantity * item.price, 0));
11 | };
12 | calculateTotal()
13 | },[invoiceData])
14 |
15 |
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
Invoice
23 |
Date: {invoiceData.date}
24 |
25 |
26 |
27 |
28 |
From : {invoiceData.from}
29 |
To : {invoiceData.to}
30 |
31 |
32 |
33 |
34 |
Shipping Address
35 |
Address : {invoiceData && invoiceData.shiping && invoiceData.shiping.address}
36 |
pincode : {invoiceData && invoiceData.shiping && invoiceData.shiping.pincode}
37 |
state : {invoiceData && invoiceData.shiping && invoiceData.shiping.state}
38 |
country : {invoiceData && invoiceData.shiping && invoiceData.shiping.country}
39 |
40 |
41 |
42 |
Payment Information
43 |
Payment Id : {invoiceData && invoiceData.paymentinfo && invoiceData.paymentinfo.id}
44 |
Payment status : {invoiceData && invoiceData.paymentinfo && invoiceData.paymentinfo.status}
45 |
46 |
47 |
48 |
Products Information
49 |
50 |
51 |
52 | | Item |
53 | Quantity |
54 | Price |
55 | Total |
56 |
57 |
58 |
59 | {invoiceData && invoiceData.items && invoiceData.items.map((item, index) => (
60 |
61 | | {item.name} |
62 | {item.quantity} |
63 | Rs.{item.price} |
64 | Rs.{item.quantity * item.price} |
65 |
66 | ))}
67 |
68 | |
69 | |
70 | Tax |
71 | Rs.{ invoiceData.shipingprice} |
72 |
73 |
74 | |
75 | |
76 | Delivery |
77 | Rs.{invoiceData.taxprice} |
78 |
79 |
80 | |
81 | |
82 | Total |
83 |
84 | Rs.{totalamount + invoiceData.taxprice + invoiceData.shipingprice}
85 | |
86 |
87 |
88 |
89 |
90 |
Authorized Signature
91 |
92 |
93 |
94 |
Seller
95 |
96 |
97 | {/*
98 |
Total: ${calculateTotal(invoiceData.items)}
99 |
*/}
100 |
101 |
102 | )
103 | }
104 |
105 | export default InvoiceContent
--------------------------------------------------------------------------------
/my-app/src/App.js:
--------------------------------------------------------------------------------
1 | import { Route, Routes } from "react-router-dom";
2 | import Home from "./components/home/Home";
3 | import Footer from "./components/layout/footer/Footer";
4 | import Header from "./components/layout/Header/Header";
5 | import ProductDetials from "./components/productdetials/ProductDetials";
6 | import Produtcs from "./components/Products/Produtcs";
7 | import Cart from "./components/cart/Cart";
8 | import Register from "./components/User/Register";
9 | import Login from "./components/User/Login";
10 | import Account from "./components/User/Account";
11 | import Wishlist from "./components/Wishlist/Wishlist";
12 | import Orders from "./components/orders/Orders";
13 | import CheckoutOrder from "./components/orders/CheckoutOrder";
14 | import Dashboard from "./components/Admin/Dashboard";
15 | import MainData from "./components/Admin/MainData";
16 | import OrderList from "./components/Admin/OrderList";
17 | import ProductList from "./components/Admin/ProductList";
18 | import CreateProduct from "./components/Admin/CreateProduct";
19 | import UpdateProduct from "./components/Admin/UpdateProduct";
20 | import UsersList from "./components/Admin/UsersList";
21 | import PaymentSucess from "./components/orders/PaymentSucess";
22 | import OrderDetial from "./components/orders/OrderDetial";
23 | import { useDispatch, useSelector } from "react-redux";
24 | import { useEffect } from "react";
25 | import { Clear_Errors, LoadUser } from "./actions/UserActions";
26 | import Invoice from "./components/Invoice/Invoice";
27 | import ProtectedRoutes from "./Routes/ProtectedRoutes";
28 |
29 |
30 |
31 | function App() {
32 |
33 | const dispatch = useDispatch();
34 |
35 | useEffect(()=>{
36 |
37 | dispatch(LoadUser())
38 |
39 |
40 | },[dispatch])
41 |
42 |
43 | return (
44 |
45 |
46 |
47 | }/>
48 |
49 | }/>
50 | }/>
51 | }/>
52 | }/>
53 | }/>
54 | }/>
55 | }/>
56 | }/>
57 | }/>
58 | }/>
59 | }/>
60 | }/>
61 |
63 |
64 |
65 |
66 | }
67 | />
68 |
69 |
72 |
73 |
74 |
75 | }
76 | />
77 |
80 |
81 |
82 |
83 |
84 | }
85 | />
86 |
89 |
90 |
91 |
92 |
93 | }/>
94 |
97 |
98 |
99 |
100 |
101 | }/>
102 |
103 |
106 |
107 |
108 |
109 |
110 | }/>
111 |
112 |
115 |
116 |
117 |
118 |
119 | }/>
120 |
123 |
124 |
125 |
126 |
127 | }/>
128 |
129 |
130 |
131 |
132 | );
133 | }
134 |
135 | export default App;
136 |
--------------------------------------------------------------------------------
/my-app/src/Reducers/ProductReducer.js:
--------------------------------------------------------------------------------
1 | import { Admin_Product_FAil, Admin_Product_Request, Admin_Product_Success, Create_Product_Fail, Create_Product_Request, Create_Product_Success, Product_Detials_Fail, Product_Detials_Request, Product_Detials_Success, Product_Fail, Product_Request, Product_Success, Update_Product_Request ,Upadate_Product_Success , Update_Product_Fail, New_Review_Request, New_Review_Sucess, New_Review_Fail, New_Review_Reset, Clear_Error, Delete_Product_Request, Delete_Product_Sucess, Delete_Product_Fail, Top_Product_Request, Top_Product_Success, Top_Product_Fail } from "../constants/ProductConstants";
2 |
3 |
4 |
5 | // search products
6 | // electornics products
7 | // similar
8 |
9 | export const ProductsReducer = ( state = { products : [] } , action )=>{
10 | switch(action.type){
11 |
12 | case Product_Request : return {
13 | loading : true,
14 | products : {}
15 | }
16 | case Product_Success : return {
17 | ...state,
18 | loading : false,
19 | products : {
20 | ...state.products,
21 | [action.producttype] : action.payload.products
22 | },
23 | ProductCount : action.payload.productCount
24 | }
25 | case Product_Fail : return {
26 | loading : false,
27 | products : {},
28 | error : action.payload
29 | }
30 | case Admin_Product_Request : return {
31 | loading : true,
32 | adminproducts : []
33 | }
34 | case Admin_Product_Success : return {
35 | ...state,
36 | loading : false,
37 | adminproducts : action.payload.products,
38 | ProductCount : action.payload.productCount
39 | }
40 | case Admin_Product_FAil : return {
41 | loading : false,
42 | adminproducts : [],
43 | error : action.payload
44 | }
45 |
46 | case Delete_Product_Request : return {
47 | loading : true,
48 | isDeleted : false,
49 | products : []
50 | }
51 |
52 | case Delete_Product_Sucess : {
53 | return{
54 | ...state ,
55 | loading : false,
56 | isDeleted : true,
57 | products : []
58 | }
59 | }
60 |
61 | case Delete_Product_Fail : {
62 | return{
63 | ...state ,
64 | loading : false,
65 | isDeleted : false,
66 | products : []
67 | }
68 | }
69 | default : return state
70 |
71 | }
72 | }
73 |
74 |
75 | export const Product_detial_reducer = ( state = { product:[] } , action) =>{
76 |
77 | switch (action.type) {
78 | case Product_Detials_Request : return{
79 | ...state,
80 | loading : true,
81 | isUpdated:false
82 |
83 | }
84 | case Product_Detials_Success : return {
85 | loading:false,
86 | product : action.payload,
87 | isUpdated:false
88 | }
89 | case Product_Detials_Fail : return {
90 | loading:false,
91 | error : action.error,
92 | isUpdated:false
93 | }
94 |
95 | case Update_Product_Request : return {
96 | ...state,
97 | loading : true,
98 | isUpdated: action.isUpdated
99 | }
100 |
101 | case Upadate_Product_Success : return{
102 | ...state,
103 | loading:false,
104 | isUpdated: action.isUpdated,
105 | product : action.payload
106 | }
107 |
108 | case Update_Product_Fail : return{
109 | ...state,
110 | loading:false,
111 | isUpdated:false,
112 | error : action.payload
113 | }
114 |
115 | default : return state
116 |
117 | }
118 | }
119 |
120 |
121 | export const CreateProduct = (state = { product : {}},action)=>{
122 | switch(action.type){
123 | case Create_Product_Request : return {
124 | loading : true,
125 | sucess:false
126 | }
127 |
128 | case Create_Product_Success : return{
129 | ...state,
130 | loading:false,
131 | product : action.payload,
132 | sucess : true,
133 | }
134 |
135 | case Create_Product_Fail : return{
136 | ...state,
137 | loading:false,
138 | error : action.payload,
139 | sucess : false
140 | }
141 |
142 | default : return state
143 |
144 | }
145 |
146 |
147 | }
148 |
149 |
150 | export const newReviewReducer = (state = {}, { type, payload }) => {
151 | switch (type) {
152 | case New_Review_Request:
153 | return {
154 | ...state,
155 | loading: true,
156 | };
157 | case New_Review_Sucess:
158 | return {
159 | loading: false,
160 | success: payload,
161 | };
162 | case New_Review_Fail:
163 | return {
164 | ...state,
165 | loading: false,
166 | error: payload,
167 | };
168 |
169 | case New_Review_Reset :
170 | return{
171 | ...state,
172 | success : false
173 | }
174 | case Clear_Error:
175 | return {
176 | ...state,
177 | error: null,
178 | };
179 |
180 | default:
181 | return state;
182 | }
183 | }
184 |
185 |
186 |
187 | export const Top_Product_Reducer = ( state = { products:[] } , action) =>{
188 |
189 | switch (action.type) {
190 | case Top_Product_Request : return{
191 | loading : true,
192 | products: []
193 | }
194 | case Top_Product_Success : return {
195 | loading:false,
196 | products : action.payload
197 | }
198 | case Top_Product_Fail : return {
199 | loading:false,
200 | error : action.error
201 | }
202 |
203 |
204 | default : return state
205 |
206 | }
207 | }
208 |
209 |
210 |
--------------------------------------------------------------------------------
/my-app/src/actions/ProductActions.js:
--------------------------------------------------------------------------------
1 | import { Axios } from '../Axios'
2 | import { Admin_Product_FAil, Admin_Product_Request, Admin_Product_Success, Clear_Error, Create_Product_Fail, Create_Product_Request, Create_Product_Success, Delete_Product_Fail, Delete_Product_Request, Delete_Product_Sucess, New_Review_Fail, New_Review_Request, New_Review_Reset, New_Review_Sucess, Product_Detials_Fail, Product_Detials_Request, Product_Detials_Success ,Product_Fail, Product_Request, Product_Success, Top_Product_Fail, Top_Product_Request, Top_Product_Success, Upadate_Product_Success, Update_Product_Fail, Update_Product_Request} from '../constants/ProductConstants'
3 |
4 | export const getproduct = (key = " " , min , max , page=1 , category , rating , prodtype ) => async ( dispatch )=>{
5 | try {
6 | dispatch({
7 | type : Product_Request
8 | })
9 | let link
10 | if(category){
11 | link = `/getall/products?name=${key}&page=${page}&category=${category}`
12 | }else{
13 | link = `/getall/products?name=${key}&page=${page}&price[gte]=${min}&price[lte]=${max}&rating[gte]=${rating}`
14 | }
15 | const {data} = await Axios.get(link)
16 |
17 | // console.log(data);
18 | dispatch({
19 | type:Product_Success,
20 | payload:data,
21 | producttype: prodtype
22 | })
23 |
24 | } catch (error) {
25 | dispatch({
26 | type:Product_Fail,
27 | error: error
28 | })
29 | }
30 |
31 | }
32 |
33 |
34 | export const getproddetials = (id) => async(dispatch)=>{
35 | try {
36 | dispatch({
37 | type : Product_Detials_Request
38 | })
39 |
40 | const {data} = await Axios.get(`/product/${id}`)
41 |
42 | dispatch({
43 | type:Product_Detials_Success,
44 | payload:data.product,
45 | })
46 | } catch (error) {
47 | dispatch({
48 | type:Product_Detials_Fail,
49 | error:error
50 | })
51 | }
52 | }
53 |
54 |
55 |
56 | // get top products
57 | export const GetTopProducts = () => async(dispatch)=>{
58 | try {
59 | dispatch({
60 | type : Top_Product_Request
61 | })
62 |
63 | const {data} = await Axios.get(`/top/products`)
64 |
65 | dispatch({
66 | type:Top_Product_Success,
67 | payload:data.products,
68 | })
69 | } catch (error) {
70 | dispatch({
71 | type: Top_Product_Fail,
72 | error:error
73 | })
74 | }
75 | }
76 |
77 |
78 |
79 |
80 |
81 | // Admin Actions
82 |
83 | export const AdminGetProducts = () =>async(dispatch)=>{
84 | try {
85 | dispatch({
86 | type : Admin_Product_Request
87 | })
88 |
89 | let link = `/admin/products`
90 | const {data} = await Axios.get(link)
91 |
92 | dispatch({
93 | type:Admin_Product_Success,
94 | payload:data,
95 | })
96 |
97 | } catch (error) {
98 | dispatch({
99 | type:Admin_Product_FAil,
100 | error: error
101 | })
102 | }
103 |
104 | }
105 |
106 |
107 | export const CreateProducts = (formdata) => async(dispatch)=>{
108 | try {
109 |
110 | dispatch({
111 | type: Create_Product_Request
112 | })
113 |
114 | // const config = { headers : { "Content-Type" : "application/json" } }
115 |
116 | const {data} = await Axios.post('/create/product', formdata )
117 |
118 | dispatch({
119 | type:Create_Product_Success,
120 | payload : data
121 | })
122 | } catch (error) {
123 | console.log(error);
124 | dispatch({
125 | type: Create_Product_Fail,
126 | payload:error.response.data.error
127 | })
128 | }
129 | }
130 |
131 |
132 | export const newReview = (reviewData) => async (dispatch) => {
133 | try {
134 | dispatch({ type: New_Review_Request });
135 | const config = { header: { "Content-Type": "application/json" } }
136 | const { data } = await Axios.put("/add/review", reviewData, config);
137 | console.log(data);
138 | dispatch({
139 | type: New_Review_Sucess,
140 | payload: data.sucess,
141 | });
142 | } catch (error) {
143 | dispatch({
144 | type: New_Review_Fail,
145 | payload: error.response.data.message,
146 | });
147 | }
148 | }
149 |
150 |
151 |
152 | export const UpdateProducts = (formdata ,id) => async(dispatch)=>{
153 | try {
154 |
155 | dispatch({
156 | type: Update_Product_Request,
157 | isUpdated : false
158 | })
159 |
160 | // const config = { headers : { "Content-Type" : "application/json" } }
161 |
162 | const {data} = await Axios.put(`/update/product/${id}`, formdata )
163 | console.log(data);
164 | dispatch({
165 | type: Upadate_Product_Success,
166 | payload : data.product,
167 | isUpdated : true
168 | })
169 | } catch (error) {
170 | dispatch({
171 | type: Update_Product_Fail,
172 | payload:error.responce
173 | })
174 | }
175 | }
176 |
177 |
178 | export const Delete_Product = (id) => async(dispatch) => {
179 | try {
180 |
181 | dispatch({
182 | type : Delete_Product_Request
183 | })
184 |
185 |
186 | const {data} = await Axios.delete(`/delete/product/${id}`)
187 | console.log(data);
188 | dispatch({
189 | type : Delete_Product_Sucess,
190 | })
191 | } catch (error) {
192 | console.log(error);
193 | dispatch({
194 | type : Delete_Product_Fail ,
195 | payload : error.responce
196 | })
197 | }
198 | }
199 |
200 |
201 | export const ClearError = () => (dispatch) => {
202 | dispatch({
203 | type : Clear_Error
204 | })
205 | }
206 |
207 | export const Reset_Review = () => (dispatch) => {
208 | dispatch({
209 | type : New_Review_Reset
210 | })
211 | }
212 |
213 |
214 |
215 |
216 | // categorywise search products
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
--------------------------------------------------------------------------------
/my-app/src/components/Admin/MainData.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { Bar, Doughnut, Line, Pie } from "react-chartjs-2";
3 | import { Chart, elements } from 'chart.js/auto';
4 | import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
5 | import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
6 | import { Avatar, IconButton } from '@mui/material'
7 | import Inventory from '@mui/icons-material/Inventory'
8 | import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee';
9 | import { useDispatch, useSelector } from 'react-redux';
10 | import { AdminGetProducts } from '../../actions/ProductActions';
11 | import { AdminGetUsers } from '../../actions/UserActions';
12 | import { AdminGetOrders } from '../../actions/OrderActions';
13 |
14 |
15 |
16 | const MainData = () => {
17 |
18 |
19 | const dispatch = useDispatch()
20 | const {adminproducts, ProductCount} = useSelector(state=>state.AllProducts)
21 | const { users} = useSelector(state=>state.AllUser)
22 | const { orders} = useSelector(state=>state.AllOrders)
23 |
24 |
25 | let totalamount = orders?.reduce((total, order) => total + order.totalprice, 0);
26 |
27 |
28 | const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
29 |
30 | const lables = ['processing', 'delivered' , 'canceled']
31 |
32 | const data = {
33 | labels: lables,
34 | // datasets is an array of objects where each object represents a set of data to display corresponding to the labels above. for brevity, we'll keep it at one object
35 | datasets: [
36 | {
37 | label: 'Popularity of colours',
38 | data: lables.map((elem , index)=> orders && orders.reduce((total , curr)=> {
39 | if(curr.orderstatus === elem){
40 | total++;
41 | }
42 | return total
43 | } , 0) ),
44 | // you can set indiviual colors for each bar
45 | backgroundColor: [
46 | 'orange',
47 | '#98fb98',
48 | '#f1807e',
49 | ],
50 | borderWidth: 1,
51 | width: 1,
52 | height: 1
53 |
54 | }
55 | ]
56 | }
57 |
58 | let date = new Date()
59 |
60 |
61 | const bardata = {
62 | labels: months,
63 | // datasets is an array of objects where each object represents a set of data to display corresponding to the labels above. for brevity, we'll keep it at one object
64 | datasets: [
65 | {
66 | label: `Sales in ${date.getFullYear()}`,
67 | data: months.map((m, i) => orders?.filter((od) => new Date(od.createdAt).getMonth() === i && new Date(od.createdAt).getFullYear() === date.getFullYear()).reduce((total, od) => total + od.totalprice, 0))
68 | ,
69 | // you can set indiviual colors for each bar
70 | backgroundColor: [
71 | 'lightblue'
72 | ],
73 | borderWidth: 1,
74 | borderRadius: 4
75 |
76 | },
77 | {
78 | label: `Sales in ${date.getFullYear() - 1}`,
79 | data: months.map((m, i) => orders?.filter((od) => new Date(od.createdAt).getMonth() === i && new Date(od.createdAt).getFullYear() === date.getFullYear() - 2).reduce((total, od) => total + od.totalPrice, 0)),
80 | // you can set indiviual colors for each bar
81 | backgroundColor: [
82 | 'blue'
83 | ],
84 | borderWidth: 1,
85 | borderRadius: 4
86 |
87 |
88 | }
89 | ]
90 | }
91 |
92 |
93 | let outofstock = 0;
94 | adminproducts && adminproducts.forEach((elem)=>{
95 | if(elem.stock<=0){
96 | outofstock = outofstock + 1;
97 | }
98 | })
99 |
100 |
101 | const piedata = {
102 | labels: ['stock', 'Out of stock'],
103 | // datasets is an array of objects where each object represents a set of data to display corresponding to the labels above. for brevity, we'll keep it at one object
104 | datasets: [
105 | {
106 | label: 'Popularity of colours',
107 | data: [ adminproducts && adminproducts.length - outofstock, outofstock],
108 | // you can set indiviual colors for each bar
109 | backgroundColor: [
110 | 'lightblue',
111 | '#ff9ab4'
112 | ],
113 | borderWidth: 1,
114 | width: 1,
115 | height: 1
116 |
117 | }
118 | ]
119 |
120 |
121 | }
122 |
123 |
124 |
125 |
126 | useEffect(()=>{
127 | dispatch(AdminGetProducts())
128 | dispatch(AdminGetUsers())
129 | dispatch(AdminGetOrders())
130 | },[dispatch])
131 |
132 | return (
133 |
134 |
135 | {/*