Untitled
unknown
plain_text
5 months ago
21 kB
3
Indexable
import React, { Fragment, useState, useEffect } from "react";
import Stack from "@mui/material/Stack";
import Paper from "@mui/material/Paper";
import { styled } from "@mui/material/styles";
import "./Taskdash.css";
import { Grid } from "@material-ui/core";
import { PieChart, Pie, Cell, Legend } from "recharts";
import Typography from "@material-ui/core/Typography";
import SwipeableViews from "react-swipeable-views";
import { useTheme } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";
import { getmycreatedTasksType } from "../../../api/common";
import Taskdashtabletab from "./Taskdashtabletab";
import { Button, CircularProgress, Tooltip } from "@mui/material";
import { Link, useHistory } from "react-router-dom";
import VisibilityIcon from "@mui/icons-material/Visibility";
import Taskcaard from "./Taskcaard";
const colorsPie = ["#9001cb", "#02b2af", "#2e96ff", "#da00ff"];
const DemoPaper = styled(Paper)(({ theme }) => ({
width: "100%",
padding: theme.spacing(1),
...theme.typography.body2,
textAlign: "center",
boxShadow: "none",
borderRadius: "0px ",
background: "#fff",
}));
const style = {
second_main: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
};
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography component={"div"}>{children}</Typography>
</Box>
)}
</div>
);
}
function a11yProps(index) {
return {
id: `full-width-tab-${index}`,
"aria-controls": `full-width-tabpanel-${index}`,
};
}
const initialize = {
columns: [
{
id: 1,
title: "New",
cards: [],
},
{
id: 2,
title: "In Progress",
cards: [],
},
{
id: 3,
title: "Completed",
cards: [],
},
],
};
const Taskdashtable = (props) => {
const [board, setBoard] = useState(initialize);
const [waiting, setWaiting] = useState(true);
const [selectedTask, setSelectedTask] = useState(null);
const [taskList, setTaskList] = useState([]);
const { classes, manager, setManager, dashboardData } = props;
console.log("dashboardData", dashboardData);
const data2 = [
{ name: "Total Appointments", value: 400 },
{ name: "Patient Visited", value: 300 },
{ name: "Patient Unvisited", value: 300 },
{ name: "Cancelled Appointment", value: 200 },
];
const [pieChartData, setPieChartData] = useState([]);
const [value, setValue] = useState(0);
const theme = useTheme();
const history = useHistory();
const [totalValue, setTotalValue] = useState(0);
const handleChange = (event, newValue) => {
document.querySelectorAll(".circle").forEach((el) => {
el.classList.remove("active");
});
const target = event.target;
if (target.classList.contains("circle")) {
target.classList.add("active");
} else {
const v = newValue + 1;
document.querySelector(".circle_" + v).classList.add("active");
}
setValue(newValue);
};
const handleChangeIndex = (index) => {
setValue(index);
};
useEffect(() => {
const fetchTasks = async () => {
try {
setWaiting(true);
let tasks = [];
switch (value) {
case 0:
if (props.user?.role === "LIFE_NAVIGATOR") {
tasks = await getmycreatedTasksType("", "advisor");
} else if (props.user?.role === "ADVISOR") {
tasks = await getmycreatedTasksType("", "life_navigator");
} else {
tasks = await getmycreatedTasksType("", "advisor");
}
break;
case 1:
tasks = await getmycreatedTasksType("", "client");
break;
case 2:
if (manager?.user_createdby?.role === "ADMIN") {
tasks = await getmycreatedTasksType("", "admin");
} else if (manager?.user_createdby?.role === "MANAGER") {
tasks = await getmycreatedTasksType("", "manager");
} else {
tasks = await getmycreatedTasksType("", "admin");
}
break;
case 3:
if (props.user?.role === "LIFE_NAVIGATOR") {
tasks = await getmycreatedTasksType("", "doctor");
} else {
tasks = await getmycreatedTasksType("", "");
}
break;
}
if (tasks.task && tasks.task.length > 0) {
setTaskList(tasks.task);
setBoard(initialize);
const defaultSelectedCLientTask = tasks.task.find((task) => task.id);
console.log("defaultSelectedCLientTask", defaultSelectedCLientTask);
setSelectedTask(defaultSelectedCLientTask || null);
} else {
setTaskList([]);
setBoard(null);
}
setWaiting(false);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchTasks();
}, [props.user?.role, manager?.user_createdby?.role, value, dashboardData]);
useEffect(() => {
const filterPieChartData = () => {
let filteredData = [];
if (props.user?.role === "LIFE_NAVIGATOR") {
if (manager?.user_createdby?.role === "ADMIN") {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "For Client", value: dashboardData?.client || 0 },
{ name: "For Manager", value: dashboardData?.admin || 0 },
{ name: "For Doctor", value: dashboardData?.doctor || 0 },
];
} else if (manager?.user_createdby?.role === "MANAGER") {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.manager || 0 },
{ name: "Doctor", value: dashboardData?.doctor || 0 },
];
} else {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.admin || 0 },
{ name: "Doctor", value: dashboardData?.doctor || 0 },
];
}
} else if (props.user?.role === "ADVISOR") {
if (manager?.user_createdby?.role === "ADMIN") {
filteredData = [
{ name: "For LifeNavigator", value: dashboardData?.life || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.admin || 0 },
];
} else if (manager?.user_createdby?.role === "MANAGER") {
filteredData = [
{ name: "For LifeNavigator", value: dashboardData?.life || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.manager || 0 },
];
} else {
filteredData = [
{ name: "For LifeNavigator", value: dashboardData?.life || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.admin || 0 },
];
}
} else {
if (manager?.user_createdby?.role === "ADMIN") {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "For Client", value: dashboardData?.client || 0 },
{ name: "For Manager", value: dashboardData?.admin || 0 },
{ name: "For Doctor", value: dashboardData?.doctor || 0 },
];
} else if (manager?.user_createdby?.role === "MANAGER") {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.manager || 0 },
{ name: "Doctor", value: dashboardData?.doctor || 0 },
];
} else {
filteredData = [
{ name: "For Professional", value: dashboardData?.pro || 0 },
{ name: "Client", value: dashboardData?.client || 0 },
{ name: "Manager", value: dashboardData?.admin || 0 },
{ name: "Doctor", value: dashboardData?.doctor || 0 },
];
}
}
setPieChartData(filteredData);
};
filterPieChartData();
}, [dashboardData, props.user?.role, manager?.user_createdby?.role]);
const handlePieClick = (entry, index) => {
let tabIndex = 0;
switch (index) {
case 0:
tabIndex = 0;
break;
case 1:
tabIndex = 1;
break;
case 2:
tabIndex = 2;
break;
case 3:
tabIndex = 3;
break;
default:
tabIndex = 0;
break;
}
setValue(tabIndex);
};
const [selectedTaskId, setSelectedTaskId] = useState(null);
const handleListItemClick = (taskId) => {
let tabFromQuery = "";
let subTabFromQuery1 = "";
setValue((prevValue) => {
if (prevValue === 0) {
tabFromQuery = 0;
subTabFromQuery1 = 0;
} else if (prevValue === 1) {
tabFromQuery = 0;
subTabFromQuery1 = 1;
} else if (prevValue === 2) {
tabFromQuery = 0;
subTabFromQuery1 = 2;
} else if (prevValue === 3) {
tabFromQuery = 0;
subTabFromQuery1 = 3;
} else {
tabFromQuery = 0;
subTabFromQuery1 = 0;
}
});
console.log("Handling Card Click:", taskId);
const selected = taskList.find((task) => task.id === taskId);
setSelectedTask(selected);
console.log("selectedTaskId:", selectedTask);
history.push(
`/app/full-task?tabFromQuery=${tabFromQuery}&subTabFromQuery1=${subTabFromQuery1}&selected.id=${selected.id}`
);
};
console.log("selectedTaskId", props.user?.role);
useEffect(() => {
// Calculate the sum of pieChartData values
const sum = pieChartData.reduce((acc, cur) => acc + cur.value, 0);
setTotalValue(sum);
}, [pieChartData]);
return (
<DemoPaper variant="elevation">
{/* <div id="task_dash_table" className="d-flex align-items-center justify-content-between">
<div class="separator">
<div class="line"></div>
<h4>Task by Me</h4>
<div class="line"></div>
</div>
<Link to="/app/full-task" style={{ textDecoration: 'none' }}>
<Tooltip title="View More">
<Button variant="outlined" style={{ color: '#111110', border: "none", fontSize: "10px" }}>
<VisibilityIcon />
</Button>
</Tooltip>
</Link>
</div> */}
<Grid container spacing={2} className="paddgridtaskpar">
<Grid style={{ display: "block" }} item xs={12} md={4} className="piechartaskdash">
{waiting ? (
<CircularProgress />
) : pieChartData.length > 0 &&
pieChartData.some((data) => data.value !== 0) ? (
<>
<div className="container">
<h4 style={{ textAlign: "left", fontSize: "1rem", fontWeight: "600" }}>Task by Me</h4>
</div>
<div className="container" id="piechartr_heigth">
<PieChart
width={300}
height={300}
style={{ height: "79%", width: "100%" }}
>
<text
x={150}
y={112}
textAnchor="middle"
dominantBaseline="middle"
style={{
fontSize: "20px",
fontFamily: "Arial",
color: "#07bc0c",
}}
>
{totalValue}
</text>
<Pie
data={pieChartData}
cx={150}
cy={100}
dataKey="value"
innerRadius={40}
outerRadius={80}
fill="#fffef7"
paddingAngle={5}
label
onClick={(entry, index) => handlePieClick(entry, index)}
>
{pieChartData.map((entry, index) => (
<Cell
key={index.toString()}
fill={colorsPie[index % colorsPie.length]}
style={{ cursor: "pointer" }}
/>
))}
</Pie>
<Legend
iconType="circle"
verticalALign="bottom"
align="left"
iconSize={10}
wrapperStyle={{ marginLeft: "20%" }}
/>
</PieChart>
</div>
</>
) : (
<div className="notaskavavilabldivvvv">
<p className="notaskavavilablepppp">No tasks available</p>
</div>
)}
</Grid>
<Grid item xs={12} md={8}>
<Fragment>
<Grid className={style.second_main}>
{/* <div className="flex items-center mb-2" style={styled.justifyBetween}>
<h4 className="my_task">My Task</h4>
</div> */}
<AppBar position="static" id="testing">
<Tabs
value={value}
onChange={handleChange}
indicatorColor="secondary"
textColor="inherit"
variant="fullWidth"
aria-label="full width tabs example"
>
{props.user?.role === "LIFE_NAVIGATOR" && (
<Tab label="For Professtional" {...a11yProps(0)} />
)}
{props.user?.role === "ADVISOR" && (
<Tab label="For Life Navigator" {...a11yProps(0)} />
)}
<Tab label="For Client" {...a11yProps(1)} />
<Tab label="For Manager" {...a11yProps(2)} />
{props.user?.role === "LIFE_NAVIGATOR" && (
<Tab label="For Doctor" {...a11yProps(3)} />
)}
</Tabs>
</AppBar>
<SwipeableViews
id="swipeable_views"
axis={theme.direction === "rtl" ? "x-reverse" : "x"}
index={value}
onChangeIndex={handleChangeIndex}
>
<TabPanel
value={value}
index={0}
dir={theme.direction}
style={{ height: "100%" }}
>
{waiting && <p style={{ marginTop: "1%" }}>Loading...</p>}
{!waiting && board === null && (
<div className="notaskavavilabldivvvv">
<p className="notaskavavilablepppp">
{" "}
{props.user?.role === "LIFE_NAVIGATOR"
? "No tasks available for Professional"
: "No tasks available for Life Navigator"}
</p>
</div>
)}
{!waiting && board !== null && (
<>
{taskList
.slice(-4)
.reverse()
.map((task, index) => (
<Taskdashtabletab
task={task}
index={index}
handleListItemClick={() =>
handleListItemClick(task.id)
}
/>
))}
</>
)}
</TabPanel>
<TabPanel
value={value}
index={1}
dir={theme.direction}
style={{ height: "100%" }}
>
{waiting && <p style={{ marginTop: "1%" }}>Loading...</p>}
{!waiting && board === null && (
<div className="notaskavavilabldivvvv">
<p className="notaskavavilablepppp">
No tasks available for Client
</p>
</div>
)}
{!waiting && board !== null && (
<>
{taskList
.slice(-4)
.reverse()
.map((task, index) => (
<Taskdashtabletab
task={task}
index={index}
handleListItemClick={() =>
handleListItemClick(task.id)
}
/>
))}
</>
)}
</TabPanel>
<TabPanel
value={value}
index={2}
dir={theme.direction}
style={{ height: "100%" }}
>
{waiting && <p style={{ marginTop: "1%" }}>Loading...</p>}
{!waiting && board === null && (
<div className="notaskavavilabldivvvv">
<p className="notaskavavilablepppp">
No tasks available for Manager
</p>
</div>
)}
{!waiting && board !== null && (
<>
{taskList
.slice(-4)
.reverse()
.map((task, index) => (
<Taskdashtabletab
task={task}
index={index}
handleListItemClick={() =>
handleListItemClick(task.id)
}
/>
))}
</>
)}
</TabPanel>
<TabPanel
value={value}
index={3}
dir={theme.direction}
style={{ height: "100%" }}
>
{waiting && <p style={{ marginTop: "1%" }}>Loading...</p>}
{!waiting && board === null && (
<div className="notaskavavilabldivvvv">
<p className="notaskavavilablepppp">
No tasks available for Doctor
</p>
</div>
)}
{!waiting && board !== null && (
<>
{taskList
.slice(-4)
.reverse()
.map((task, index) => (
<Taskdashtabletab
task={task}
index={index}
handleListItemClick={() =>
handleListItemClick(task.id)
}
/>
))}
</>
)}
</TabPanel>
</SwipeableViews>
</Grid>
</Fragment>
</Grid>
</Grid>
</DemoPaper>
);
};
export default Taskdashtable;
Editor is loading...
Leave a Comment