Dashboard Updated
This commit is contained in:
Sibunnayak
parent
6d3f6eb53b
commit
cd7c0c8f76
@ -1,44 +1,57 @@
|
||||
import React, { lazy } from 'react'
|
||||
import React, { lazy } from "react";
|
||||
import axios from "axios";
|
||||
import { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { isAutheticated } from "../../auth.js";
|
||||
|
||||
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
|
||||
|
||||
const WidgetsDropdown = lazy(() => import("../widgets/WidgetsDropdown.js"));
|
||||
|
||||
const Dashboard = () => {
|
||||
//1 st
|
||||
const [users, setUsers] = useState([])
|
||||
const [users, setUsers] = useState([]);
|
||||
const token = isAutheticated();
|
||||
|
||||
const getAllUsers = async () => {
|
||||
let res = await axios.get(
|
||||
`/api/v1/admin/users`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
let res = await axios.get(`/api/v1/admin/users`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data)
|
||||
setUsers(res.data.users)
|
||||
|
||||
|
||||
setUsers(res.data.users);
|
||||
};
|
||||
//2nd
|
||||
const [category, setCategory] = useState([]);
|
||||
const getAllCategory = async () => {
|
||||
let res = await axios.get(`/api/category/getCategories`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setCategory(res?.data?.categories);
|
||||
};
|
||||
//3rd
|
||||
const [product, setProduct] = useState([]);
|
||||
const getAllProduct = async () => {
|
||||
let res = await axios.get(`/api/product/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setProduct(res?.data?.product);
|
||||
};
|
||||
// 3rd
|
||||
const [Requests, setRequests] = useState([]);
|
||||
const getAllRequests = async () => {
|
||||
let res = await axios.get(`/api/contact/request/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setRequests(res.data.contactRequest);
|
||||
}
|
||||
// //2nd
|
||||
// const [category, setCategory] = useState([])
|
||||
// const getAllCategory = useCallback(async () => {
|
||||
// let res = await axios.get(
|
||||
// `/api/category/getAll`,
|
||||
// {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// // console.log(res.data.category[0].image.url)
|
||||
// setCategory(res.data.category)
|
||||
// }, [token]);
|
||||
|
||||
// //3 requiment
|
||||
// const [requirement, setRequirement] = useState([])
|
||||
@ -71,7 +84,6 @@ const Dashboard = () => {
|
||||
|
||||
// setNews(res.data.news)
|
||||
|
||||
|
||||
// }, [token]);
|
||||
// //5 offers
|
||||
// const [offer, setOffer] = useState([])
|
||||
@ -88,7 +100,6 @@ const Dashboard = () => {
|
||||
// // console.log(res.data)
|
||||
// setOffer(res.data.offer)
|
||||
|
||||
|
||||
// }, [token]);
|
||||
// //6 event
|
||||
// const [event, setEvent] = useState([])
|
||||
@ -104,18 +115,18 @@ const Dashboard = () => {
|
||||
// // console.log(res.data)
|
||||
// setEvent(res.data.Event)
|
||||
|
||||
|
||||
// }, [token]);
|
||||
useEffect(() => {
|
||||
getAllUsers();
|
||||
|
||||
getAllCategory();
|
||||
getAllProduct();
|
||||
getAllRequests();
|
||||
}, [token]);
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown users={users} />
|
||||
|
||||
<WidgetsDropdown users={users} category={category} product={product} Requests={Requests}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard
|
||||
export default Dashboard;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
CRow,
|
||||
CCol,
|
||||
@ -7,45 +7,145 @@ import {
|
||||
CDropdownItem,
|
||||
CDropdownToggle,
|
||||
CWidgetStatsA,
|
||||
} from '@coreui/react'
|
||||
import { getStyle } from '@coreui/utils'
|
||||
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
|
||||
import { BeatLoader } from 'react-spinners'
|
||||
{/* <BeatLoader color="#36d7b7" /> */ }
|
||||
} from "@coreui/react";
|
||||
import { getStyle } from "@coreui/utils";
|
||||
import { CChartBar, CChartLine } from "@coreui/react-chartjs";
|
||||
import CIcon from "@coreui/icons-react";
|
||||
import { cilArrowBottom, cilArrowTop, cilOptions } from "@coreui/icons";
|
||||
import { BeatLoader } from "react-spinners";
|
||||
import { isAutheticated } from "src/auth";
|
||||
import axios from "axios";
|
||||
{
|
||||
/* <BeatLoader color="#36d7b7" /> */
|
||||
}
|
||||
|
||||
const WidgetsDropdown = ({ users }) => {
|
||||
const WidgetsDropdown = ({ users, category, product, Requests }) => {
|
||||
const token = isAutheticated();
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [todayorders, setTodayOrders] = useState([]);
|
||||
const [monthorders, setMonthOrders] = useState([]);
|
||||
const [yearorders, setYearOrders] = useState([]);
|
||||
const [lastyearorders, setLastYearOrders] = useState([]);
|
||||
const [processingorders, setProcessingOrders] = useState([]);
|
||||
const [dispatchedorders, setDispatchedOrders] = useState([]);
|
||||
const [deliveredorders, setDeliveredOrders] = useState([]);
|
||||
const [cancelledorders, setCancelledOrders] = useState([]);
|
||||
const getAllOrder = async () => {
|
||||
let res = await axios.get(`/api/order/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setOrders(res?.data?.order);
|
||||
setTodayOrders(
|
||||
res?.data?.order?.filter((order) => {
|
||||
return (
|
||||
new Date(order.createdAt).toDateString() === new Date().toDateString()
|
||||
);
|
||||
})
|
||||
);
|
||||
setMonthOrders(
|
||||
res?.data?.order?.filter((order) => {
|
||||
return new Date(order.createdAt).getMonth() === new Date().getMonth();
|
||||
})
|
||||
);
|
||||
setYearOrders(
|
||||
res?.data?.order?.filter((order) => {
|
||||
return (
|
||||
new Date(order.createdAt).getFullYear() === new Date().getFullYear()
|
||||
);
|
||||
})
|
||||
);
|
||||
setLastYearOrders(
|
||||
res?.data?.order?.filter((order) => {
|
||||
return (
|
||||
new Date(order.createdAt).getFullYear() ===
|
||||
new Date().getFullYear() - 1
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
const getProcessingOrder = async () => {
|
||||
let res = await axios.get(`/api/order/getAll/processing`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setProcessingOrders(res?.data?.order);
|
||||
}
|
||||
const getDispatchedOrder = async () => {
|
||||
let res = await axios.get(`/api/order/getAll/dispatched`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setDispatchedOrders(res?.data?.order);
|
||||
}
|
||||
const getDeliveredOrder = async () => {
|
||||
let res = await axios.get(`/api/order/getAll/delivered`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setDeliveredOrders(res?.data?.order);
|
||||
}
|
||||
const getCancelledOrder = async () => {
|
||||
let res = await axios.get(`/api/order/getAll/cancelled`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
// console.log(res.data);
|
||||
setCancelledOrders(res?.data?.order);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllOrder();
|
||||
getProcessingOrder();
|
||||
getDispatchedOrder();
|
||||
getDeliveredOrder();
|
||||
getCancelledOrder();
|
||||
}, [token]);
|
||||
const date = new Date();
|
||||
const day = date.getDate();
|
||||
const suffix =
|
||||
day === 1 || day === 21 || day === 31
|
||||
? "st"
|
||||
: day === 2 || day === 22
|
||||
? "nd"
|
||||
: day === 3 || day === 23
|
||||
? "rd"
|
||||
: "th";
|
||||
const month = date.toLocaleDateString("en-US", { month: "long" });
|
||||
const formattedDate = `${day}${suffix} ${month}`;
|
||||
// console.log(formattedDate);
|
||||
const year =date.toLocaleDateString("en-US", { year: "numeric" });
|
||||
const formattedmonth = `${month} ${year}`;
|
||||
return (
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={
|
||||
<>
|
||||
|
||||
{users.length}
|
||||
</>
|
||||
}
|
||||
title="Total Users"
|
||||
|
||||
/>
|
||||
</CCol>
|
||||
{/* <CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="info"
|
||||
value={
|
||||
<>
|
||||
{category.length}
|
||||
</>
|
||||
}
|
||||
title="Total Categories"
|
||||
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<>
|
||||
<h4>Users and Requests</h4>
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{users.length}</>}
|
||||
title="Total Users"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{Requests.length}</>}
|
||||
title="Contact Requests"
|
||||
/>
|
||||
</CCol>
|
||||
{/* <CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
@ -100,9 +200,104 @@ const WidgetsDropdown = ({ users }) => {
|
||||
title="Total Events"
|
||||
|
||||
/> */}
|
||||
{/* </CCol> */}
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
{/* </CCol> */}
|
||||
</CRow>
|
||||
<h4>Products and Categories</h4>
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{category.length}</>}
|
||||
title="Total Categories"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{product.length}</>}
|
||||
title="Total products"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<h4>Orders</h4>
|
||||
<CRow>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{orders.length}</>}
|
||||
title="Total orders"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{todayorders.length}</>}
|
||||
title={`Orders for ${formattedDate}`}
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{monthorders.length}</>}
|
||||
title={`Orders for ${formattedmonth}`}
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{yearorders.length}</>}
|
||||
title={`Orders for ${year}`}
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="primary"
|
||||
value={<>{lastyearorders.length}</>}
|
||||
title={`Orders for ${year - 1}`}
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="dark"
|
||||
value={<>{processingorders.length}</>}
|
||||
title="Orders - Processing"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="warning"
|
||||
value={<>{dispatchedorders.length}</>}
|
||||
title="Orders - Dispatched"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="success"
|
||||
value={<>{deliveredorders.length}</>}
|
||||
title="Orders - Delivered"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm={6} lg={3}>
|
||||
<CWidgetStatsA
|
||||
className="mb-4"
|
||||
color="danger"
|
||||
value={<>{cancelledorders.length}</>}
|
||||
title="Orders - Cancelled"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WidgetsDropdown
|
||||
export default WidgetsDropdown;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user