Merge pull request #31 from advanced-computer-lab-2023/health_records

Health records

client/src/layouts/dashboard/config-navigation.jsx

@@ -2,49 +2,56 @@ import SvgColor from 'src/components/svg-color';
 
 // ----------------------------------------------------------------------
 
-const icon = (name) => <SvgColor src={`/assets/icons/navbar/${name}.svg`} sx={{ width: 1, height: 1 }} />;
+const icon = (name) => (
+  <SvgColor src={`/assets/icons/navbar/${name}.svg`} sx={{ width: 1, height: 1 }} />
+);
 
 const navConfig = [
   {
     title: 'dashboard',
     path: '/',
-    icon: icon('ic_analytics')
+    icon: icon('ic_analytics'),
   },
   {
     title: 'user',
     path: '/user',
-    icon: icon('ic_user')
+    icon: icon('ic_user'),
   },
   {
     title: 'product',
     path: '/products',
-    icon: icon('ic_cart')
+    icon: icon('ic_cart'),
   },
   {
     title: 'blog',
     path: '/blog',
-    icon: icon('ic_blog')
+    icon: icon('ic_blog'),
   },
   {
     title: 'login',
     path: '/login',
-    icon: icon('ic_lock')
+    icon: icon('ic_lock'),
   },
   {
     title: 'Register',
     path: '/register',
-    icon: icon('ic_lock')
+    icon: icon('ic_lock'),
   },
   {
     title: 'Doctors',
     path: '/doctors',
-    icon: icon('ic_user')
+    icon: icon('ic_user'),
+  },
+  {
+    title: 'Patients',
+    path: '/patients',
+    icon: icon('ic_user'),
   },
   {
     title: 'Not found',
     path: '/404',
-    icon: icon('ic_disabled')
-  }
+    icon: icon('ic_disabled'),
+  },
 ];
 
 export default navConfig;

client/src/pages/health-record.jsx

@@ -1,17 +1,19 @@
 import { Helmet } from 'react-helmet-async';
+import { useParams } from 'react-router-dom';
 
 import { HealthRecordView } from 'src/sections/healthRecords';
 
 // ----------------------------------------------------------------------
 
 export default function HealthRecordPage() {
+  let { patientID } = useParams();
   return (
     <>
       <Helmet>
         <title> Health Records </title>
       </Helmet>
 
-      <HealthRecordView />
+      <HealthRecordView patientID={patientID} />
     </>
   );
 }

client/src/pages/patients.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { PatientView } from 'src/sections/patients/view';
+
+// ----------------------------------------------------------------------
+
+export default function PatientPage() {
+  return (
+    <>
+      <Helmet>
+        <title> Patients </title>
+      </Helmet>
+
+      <PatientView />
+    </>
+  );
+}

client/src/routes/sections.jsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { Outlet, Navigate, useRoutes } from 'react-router-dom';
+import { Outlet, Navigate, useRoutes, useParams } from 'react-router-dom';
 
 import DashboardLayout from 'src/layouts/dashboard';
 
@@ -9,6 +9,7 @@ export const IndexPage = lazy(() => import('src/pages/app'));
 export const BlogPage = lazy(() => import('src/pages/blog'));
 export const UserPage = lazy(() => import('src/pages/user'));
 export const DoctorsPage = lazy(() => import('src/pages/doctors'));
+export const PatientsPage = lazy(() => import('src/pages/patients'));
 export const LoginPage = lazy(() => import('src/pages/login'));
 export const RegisterPage = lazy(() => import('src/pages/register'));
 export const ProductsPage = lazy(() => import('src/pages/products'));
@@ -34,6 +35,8 @@ export default function Router() {
         { path: 'products', element: <ProductsPage /> },
         { path: 'blog', element: <BlogPage /> },
         { path: 'doctors', element: <DoctorsPage /> },
+        { path: 'patients', element: <PatientsPage /> },
+        { path: 'health-record/:patientID', element: <HealthRecordPage /> },
         { path: 'health-record', element: <HealthRecordPage /> },
       ],
     },

client/src/sections/healthRecords/health-record-view.jsx

@@ -5,18 +5,32 @@ import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 
-import HealthRecordSummary from './health-record-summary';
+import { useUserContext } from 'src/contexts/userContext';
 import { axiosInstance } from '../../utils/axiosInstance';
 
-export default function HealthRecordView() {
+import HealthRecordSummary from './health-record-summary';
+
+export default function HealthRecordView({ patientID }) {
+  console.log(patientID);
   const [healthRecords, setHealthRecords] = useState([]);
   const [newName, setNewName] = useState('');
   const [newRecord, setNewRecord] = useState('');
 
+  // const {
+  //   user: { role },
+  // } = useUserContext();
+  const user = localStorage.getItem('userRole');
+  console.log(user);
+
   useEffect(() => {
     const fetchHealthRecords = async () => {
       try {
-        const res = await axiosInstance.get(`/patients/6548e928d2f717cbd465119a/medicalhistory`);
+        let res;
+        if (user === 'Doctor') {
+          res = await axiosInstance.get(`/patients/${patientID}/medicalhistory`);
+        } else {
+          res = await axiosInstance.get(`/me/medicalhistory`);
+        }
         setHealthRecords(res.data.result);
       } catch (err) {
         console.log(err);
@@ -27,7 +41,7 @@ export default function HealthRecordView() {
 
   const handleSubmit = async () => {
     try {
-      await axiosInstance.post('/patients/6548e928d2f717cbd465119a/medicalhistory', {
+      await axiosInstance.post(`/patients/${patientID}/medicalhistory`, {
         name: newName,
         medicalRecord: newRecord,
       });
@@ -55,29 +69,33 @@ export default function HealthRecordView() {
         ))}
       </Grid>
 
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Add New Health Record
-      </Typography>
+      {user === 'Doctor' && (
+        <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
+          Add New Health Record
+        </Typography>
+      )}
 
-      <div>
-        <TextField
-          label="Name"
-          value={newName}
-          onChange={(event) => setNewName(event.target.value)}
-          sx={{ mb: 2 }}
-        />
-        <br />
-        <TextField
-          label="Health Record"
-          value={newRecord}
-          onChange={(event) => setNewRecord(event.target.value)}
-          sx={{ mb: 2 }}
-        />
-        <br />
-        <Button variant="contained" onClick={handleSubmit}>
-          Add
-        </Button>
-      </div>
+      {user === 'Doctor' && (
+        <div>
+          <TextField
+            label="Name"
+            value={newName}
+            onChange={(event) => setNewName(event.target.value)}
+            sx={{ mb: 2 }}
+          />
+          <br />
+          <TextField
+            label="Health Record"
+            value={newRecord}
+            onChange={(event) => setNewRecord(event.target.value)}
+            sx={{ mb: 2 }}
+          />
+          <br />
+          <Button variant="contained" onClick={handleSubmit}>
+            Add
+          </Button>
+        </div>
+      )}
     </Container>
   );
 }

client/src/sections/login/login-view.jsx

@@ -36,7 +36,7 @@ export default function LoginView() {
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors },
   } = useForm();
 
   const [loading, setLoading] = useState(false);
@@ -51,7 +51,9 @@ export default function LoginView() {
 
       if (res.status == 200) {
         const user = res.data.user;
-        setUser({ name: user.name, role: user.role });
+        // setUser({ name: user.name, role: user.role });
+        localStorage.setItem('userRole', user.role);
+        localStorage.setItem('userName', user.name);
 
         router.push(destination);
       } else {
@@ -69,16 +71,16 @@ export default function LoginView() {
       sx={{
         ...bgGradient({
           color: alpha(theme.palette.background.default, 0.9),
-          imgUrl: '/assets/background/overlay_4.jpg'
+          imgUrl: '/assets/background/overlay_4.jpg',
         }),
-        height: 1
+        height: 1,
       }}
     >
       <Logo
         sx={{
           position: 'fixed',
           top: { xs: 16, md: 24 },
-          left: { xs: 16, md: 24 }
+          left: { xs: 16, md: 24 },
         }}
       />
 
@@ -87,7 +89,7 @@ export default function LoginView() {
           sx={{
             p: 5,
             width: 1,
-            maxWidth: 420
+            maxWidth: 420,
           }}
         >
           <Typography variant="h4">Sign in to Minimal</Typography>
@@ -110,7 +112,7 @@ export default function LoginView() {
               <TextField
                 label="Username"
                 {...register('username', {
-                  required: true
+                  required: true,
                 })}
                 error={!!errors?.username}
                 helperText={errors?.username ? 'Required' : null}
@@ -120,7 +122,7 @@ export default function LoginView() {
                 label="Password"
                 type={showPassword ? 'text' : 'password'}
                 {...register('password', {
-                  required: true
+                  required: true,
                 })}
                 error={!!errors?.password}
                 helperText={errors?.password ? 'Required' : null}
@@ -131,7 +133,7 @@ export default function LoginView() {
                         <Iconify icon={showPassword ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
                       </IconButton>
                     </InputAdornment>
-                  )
+                  ),
                 }}
               />
             </Stack>

client/src/sections/patients/table-empty-rows.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+
+// ----------------------------------------------------------------------
+
+export default function TableEmptyRows({ emptyRows, height }) {
+  if (!emptyRows) {
+    return null;
+  }
+
+  return (
+    <TableRow
+      sx={{
+        ...(height && {
+          height: height * emptyRows,
+        }),
+      }}
+    >
+      <TableCell colSpan={9} />
+    </TableRow>
+  );
+}
+
+TableEmptyRows.propTypes = {
+  emptyRows: PropTypes.number,
+  height: PropTypes.number,
+};

client/src/sections/patients/table-no-data.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+
+import Paper from '@mui/material/Paper';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import Typography from '@mui/material/Typography';
+
+// ----------------------------------------------------------------------
+
+export default function TableNoData({ query }) {
+  return (
+    <TableRow>
+      <TableCell align="center" colSpan={6} sx={{ py: 3 }}>
+        <Paper
+          sx={{
+            textAlign: 'center',
+          }}
+        >
+          <Typography variant="h6" paragraph>
+            Not found
+          </Typography>
+
+          <Typography variant="body2">
+            No results found for &nbsp;
+            <strong>&quot;{query}&quot;</strong>.
+            <br /> Try checking for typos or using complete words.
+          </Typography>
+        </Paper>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+TableNoData.propTypes = {
+  query: PropTypes.string,
+};