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 ( DOCTOR DASHBOARD {showOsiChart && ( Trend of users registered )} {/*showInjuryChart && ( Trends(avg) )*/} ); }; export default AdminDashboard;