67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import StatisticsCard from "../../Components/Ui/StaticsCard/StaticCard";
|
|
import { FaFirstOrder, FaProductHunt, FaUser } from "react-icons/fa";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Col, Row } from "reactstrap";
|
|
import Chart from "./Chart";
|
|
import { useGetHome } from "../../api/home";
|
|
import { Spin } from "antd";
|
|
|
|
export default function HomePage() {
|
|
const { t } = useTranslation();
|
|
|
|
const {data,isLoading} = useGetHome()
|
|
|
|
|
|
const cardsData = [
|
|
{
|
|
icon: <FaUser className="warning" size={20} />,
|
|
count: data?.userCount, // Example count
|
|
pathWhenClick: '/users',
|
|
titleKey: "userCount",
|
|
contentKey: "user_in_your_Application"
|
|
},
|
|
{
|
|
icon: <FaProductHunt className="warning" size={20} />,
|
|
count: data?.productCount, // Example count
|
|
pathWhenClick: "/products",
|
|
titleKey: "productCount",
|
|
contentKey: "Product_Count_in_your_Application"
|
|
},
|
|
{
|
|
icon: <FaFirstOrder className="warning" size={20} />,
|
|
count: data?.orderCount, // Example count
|
|
pathWhenClick: "/order",
|
|
titleKey: "orderCount",
|
|
contentKey: "order_count_in_your_Application"
|
|
}
|
|
];
|
|
|
|
if(isLoading){
|
|
return <Spin/>
|
|
}
|
|
return (
|
|
<>
|
|
<Row xs={1} sm={1} md={1} lg={3} xl={3}>
|
|
{cardsData.map((card, index) => (
|
|
<Col key={index} style={{ padding: "0.5rem" }}>
|
|
<div style={{ cursor: "pointer" }}>
|
|
<StatisticsCard
|
|
pathWhenClick={card.pathWhenClick}
|
|
icon={card.icon}
|
|
count={`${card.count ?? ""}`}
|
|
CardContent={t(`You_have`) + " " + ((card.count) ?? "") + " " + t(card.contentKey)}
|
|
CardTitle={t(card.titleKey)}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
|
|
<Row xs={1} sm={1} md={1} lg={2} xl={2} style={{ margin: "30px 0 " }}>
|
|
<Chart dataMonth={data?.getMonthlyData}/>
|
|
</Row>
|
|
</>
|
|
);
|
|
}
|