bulk-email/src/components/ResourcePieChart/resourcePieChart.tsx

import { PieChart } from "@mui/x-charts/PieChart";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";

const colorPalette = [
  "hsla(202, 69%, 60%, 1)",
  "hsl(204, 48.60%, 72.50%)",
  "hsl(214, 56.40%, 30.60%)",
  "hsl(222, 6.80%, 50.80%)",
];

// const data = [
//   { title: "Total Resources", value: 50, color: colorPalette[0] },
//   { title: "Total Stations", value: 20, color: colorPalette[1] },
//   { title: "Station Manager", value: 15, color: colorPalette[2] },
//   { title: "Total Booth", value: 15, color: colorPalette[3] },
// ];

export default function ResourcePieChart() {
  const theme = useTheme();
  const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
  const dispatch = useDispatch<AppDispatch>();

	// // Fetch role and carPortCounts from Redux state
	// const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
	const { carPortCounts } = useSelector(
		(state: RootState) => state.dashboardReducer
	);
  console.log("first",carPortCounts)
	// Static data for non-superadmin roles
	// const staticCarPorts = [
	// 	{ carPort: "240V", count: 5 },
	// 	{ carPort: "120V", count: 3 },
	// 	{ carPort: "DCFC", count: 2 },
	// 	{ carPort: "Other", count: 7 },
	// ];

useEffect(() => {

		dispatch(fetchDashboardData());
	
}, [dispatch]);

// console.log("Raw CarPortCounts from API:", carPortCounts);

const dataToDisplay =carPortCounts 

//  const dataToDisplay =
// 		user?.userType === "superadmin"
// 			? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
// 			: staticCarPorts.filter((entry) => entry.count > 0);
// console.log("Filtered Data to Display:", dataToDisplay);
  const getChartDimensions = () => {
    if (isXsScreen) {
      return {
        height: 240,
        width: 240,
        innerRadius: 40,
        outerRadius: 80,
        margin: { left: 20, right: 20, top: 40, bottom: 40 }
      };
    } else if (isSmScreen) {
      return {
        height: 260,
        width: 260,
        innerRadius: 50,
        outerRadius: 90,
        margin: { left: 40, right: 40, top: 60, bottom: 60 }
      };
    } else {
      return {
        height: 350,
        width: 350,
        innerRadius: 55,
        outerRadius: 110,
        margin: { left: 60, right: 80, top: 80, bottom: 80 }
      };
    }
  };

  const dimensions = getChartDimensions();

  return (
		<Card
			variant="outlined"
			sx={{
				display: "flex",
				flexDirection: "column",
				gap: { xs: "8px", sm: "10px", md: "12px" },
				flexGrow: 1,
				width: "100%",
				height: "auto",
				minHeight: { xs: "320px", sm: "340px", md: "360px" },
				padding: { xs: "12px", sm: "14px", md: "16px" },
				borderRadius: "16px",
				border: "none",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
			}}
		>
			<CardContent
				sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
			>
				<Typography
					component="h2"
					variant="subtitle2"
					color="#F2F2F2"
					sx={{
						fontWeight: 500,
						fontSize: { xs: "16px", sm: "17px", md: "18px" },
						lineHeight: "24px",
						color: "#FFFFFF",
						marginBottom: { xs: 1, sm: 1.5, md: 2 },
					}}
				>
					Car Port Usage
				</Typography>
				<Box
					sx={{
						display: "flex",
						flexDirection: { xs: "column", sm: "row" },
						alignItems: "center",
						justifyContent: "center",
					}}
				>
					<PieChart
						colors={colorPalette}
						margin={dimensions.margin}
						series={[
							{
								data: dataToDisplay.map((entry, index) => ({
									title: entry.carPort,
									value: entry.count,
									color: colorPalette[
										index % colorPalette.length
									],
								})),
								innerRadius: dimensions.innerRadius,
								outerRadius: dimensions.outerRadius,
								paddingAngle: 2,
								cornerRadius: 8,
								highlightScope: {
									faded: "global",
									highlighted: "item",
								},
							},
						]}
						height={dimensions.height}
						width={dimensions.width}
						slotProps={{
							legend: { hidden: true },
						}}
					/>

					<Stack
						spacing={1}
						sx={{
							mt: { xs: 2, sm: 0 },
							ml: { xs: 0, sm: 2 },
						}}
					>
						{dataToDisplay.map((entry, index) => (
							<Stack
								key={index}
								direction="row"
								spacing={1}
								alignItems="center"
							>
								<Box
									sx={{
										width: { xs: 12, sm: 14, md: 16 },
										height: { xs: 12, sm: 14, md: 16 },
										backgroundColor:
											colorPalette[
												index % colorPalette.length
											],
										borderRadius: "50%",
									}}
								/>
								<Typography
									variant="body2"
									sx={{
										fontSize: {
											xs: "12px",
											sm: "13px",
											md: "14px",
										},
										color: "#FFFFFF",
									}}
								>
									{entry.carPort}
								</Typography>
							</Stack>
						))}
					</Stack>
				</Box>
			</CardContent>
		</Card>
  );
}