180 lines
6.2 KiB
Plaintext
180 lines
6.2 KiB
Plaintext
|
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;
|
||
|
|
||
|
|
||
|
|