ohctechv3/.svn/pristine/7f/7ff22cc06b99292e03be6a721d72a895ad6b552d.svn-base

180 lines
6.2 KiB
Plaintext
Raw Permalink Normal View History

2024-10-28 15:03:36 +05:30
import { useState } from 'react';
import { Button, Stack, Typography, Grid } from '@mui/material';
import Box from '@mui/material/Box';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
import { Link } from 'react-router-dom';
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
const dataExercise = {
labels: ['01-09-2024', '02-09-2024', '03-09-2024'], // Dates
datasets: [
{
label: 'Weight (kg)',
data: [100, 99.7, 99.2], // Weight values corresponding to the dates
borderColor: '#8884d8',
fill: false,
tension: 0.1,
},
{
label: 'Target Weight',
data: Array(3).fill(85), // Creates a horizontal line at the target weight of 85 kg
borderColor: 'red',
borderDash: [10, 5],
fill: false,
tension: 0.1,
},
],
};
const optionsExercise = {
scales: {
y: {
min: 80,
max: 105, // Adjust to fit your weight range
},
},
plugins: {
legend: {
display: true,
},
tooltip: {
enabled: true,
},
},
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
},
},
};
const osiData = {
labels: ['14-06-2024', '15-06-2024', '16-06-2024', '17-06-2024', '18-06-2024', '19-06-2024', '20-06-2024', '21-06-2024'],
datasets: [
{
label: 'OPD Cases',
data: [0, 0, 0, 0, 0, 0, 0, 1],
borderColor: 'blue',
backgroundColor: 'blue',
},
{
label: 'Injury Cases',
data: [0, 0, 0, 0, 0, 0, 0, 0],
borderColor: 'red',
backgroundColor: 'red',
},
{
label: 'Sickness Cases',
data: [0, 0, 0, 0, 0, 0, 0, 0],
borderColor: 'green',
backgroundColor: 'green',
},
],
};
const injuryData = {
labels: ['14-06-2024', '15-06-2024', '16-06-2024', '17-06-2024', '18-06-2024', '19-06-2024', '20-06-2024', '21-06-2024'],
datasets: [
{
label: 'MTI - Medical Treatment Injury',
data: [0, 0, 0, 0, 0, 0, 0, 0],
borderColor: 'lightgrey',
backgroundColor: 'lightgrey',
},
{
label: 'First Aid Injury',
data: [0, 0, 0, 0, 0, 0, 0, 0],
borderColor: 'red',
backgroundColor: 'red',
},
{
label: 'LTI - Loss Time Injury',
data: [0, 0, 0, 0, 0, 0, 0, 0],
borderColor: 'blue',
backgroundColor: 'blue',
},
],
};
const AdminDashboard = () => {
const [showOsiChart, setShowOsiChart] = useState(true);
const [showInjuryChart, setShowInjuryChart] = useState(true);
const handleToggleOsiChart = () => {
setShowOsiChart((prev) => !prev);
};
const handleToggleInjuryChart = () => {
setShowInjuryChart((prev) => !prev);
};
return (
<Box sx={{ padding: 2, backgroundColor: '#f5f5f5', borderRadius: 2, marginTop: 2,height:'100vh' }}>
<Typography variant="h5" gutterBottom sx={{ fontWeight: 'bold', color: '#00796b', textAlign: 'center' }}>
DOCTOR DASHBOARD
</Typography>
<Stack direction="column" spacing={2} alignItems="center">
<Stack direction="row" spacing={10} justifyContent="center">
<Link to = "/patients" >
<Button variant="contained" sx={{ backgroundColor: '#ffffff', color: '#000', borderRadius: 0, width: 300, height: 64, boxShadow: 3 }}>
List of users
</Button>
</Link>
<Link to = "/food-item" >
<Button variant="contained" sx={{ backgroundColor: '#ffffff', color: '#000', borderRadius: 0, width: 300, height: 64, boxShadow: 3 }}>
Push food item to master list
</Button>
</Link>
<Link to = "/exercise-master" >
<Button variant="contained" sx={{ backgroundColor: '#ffffff', color: '#000', borderRadius: 0, width: 300, height: 64, boxShadow: 3 }}>
Push exercise item to master list
</Button>
</Link>
</Stack>
<Stack direction="row" spacing={60} justifyContent="center">
<Button variant="contained" sx={{ backgroundColor: '#ffffff', color: '#000', borderRadius: 0, width: 250, height: 64, boxShadow: 3 }} onClick={handleToggleOsiChart}>
Trend of users registered
</Button>
<Button variant="contained" sx={{ backgroundColor: '#ffffff', color: '#000', borderRadius: 0, width: 250, height: 64, boxShadow: 3 }} onClick={handleToggleInjuryChart}>
Trends(avg)
</Button>
</Stack>
<Grid container spacing={2} sx={{ marginTop: 4 }} justifyContent="center">
{showOsiChart && (
<Grid item xs={12} md={6}>
<Typography variant="h6" gutterBottom>
Trend of users registered
</Typography>
<Line options={{ ...options, title: { display: true, text: 'OSI Weekly Report' }}} data={osiData} />
</Grid>
)}
{/*showInjuryChart && (
<Grid item xs={12} md={6}>
<Typography variant="h6" gutterBottom>
Trends(avg)
</Typography>
<Line options={{ ...options, title: { display: true, text: 'Injury Weekly Report' }}} data={injuryData} />
</Grid>
)*/}
</Grid>
</Stack>
</Box>
);
};
export default AdminDashboard;