Merge branch 'main' into feature-upload

advanced-computer-lab-2023 · Nov 14, 2023 · c87c039 · c87c039
2 parents 5bc6b09 + a3f2f1c
commit c87c039
Show file tree

Hide file tree

Showing 35 changed files with 7,913 additions and 6,913 deletions.
diff --git a/client/.eslintrc b/client/.eslintrc
@@ -64,6 +64,7 @@
     "react/function-component-definition": 0,
     "jsx-a11y/control-has-associated-label": 0,
     "import/no-unresolved": 0,
+    "perfectionist/sort-imports":0,
     "react/jsx-no-useless-fragment": [
       1,
       {

diff --git a/client/src/app.jsx b/client/src/app.jsx
@@ -4,6 +4,8 @@ import { useScrollToTop } from 'src/hooks/use-scroll-to-top';
 
 import Router from 'src/routes/sections';
 import ThemeProvider from 'src/theme';
+import { UserContextProvider } from './contexts/userContext';
+
 
 // ---------------------------------------------------------------------
 
@@ -12,7 +14,9 @@ export default function App() {
 
   return (
     <ThemeProvider>
-      <Router />
+      <UserContextProvider>
+        <Router />
+      </UserContextProvider>
     </ThemeProvider>
   );
 }

diff --git a/client/src/contexts/userContext.jsx b/client/src/contexts/userContext.jsx
@@ -1,9 +1,11 @@
-import { createContext } from 'react';
+import { createContext, useState, useContext } from 'react';
 
-const UserContext = createContext({});
+const UserContext = createContext();
 
-// export const UserContextProvider = ({ children }) => {
-//   const [user, setUser] = useState({ name: '', username: '', id: '' });
+export const UserContextProvider = ({ children }) => {
+  const [user, setUser] = useState({ name: '', role: '' });
 
-//   return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
-// };
+  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
+};
+
+export const useUserContext = () => useContext(UserContext);
diff --git a/client/src/layouts/dashboard/config-navigation.jsx b/client/src/layouts/dashboard/config-navigation.jsx
@@ -2,43 +2,50 @@ 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: 'Upload Documents',
@@ -59,7 +66,7 @@ const navConfig = [
     title: 'View Requests',
     path: '/requests-list',
     icon: icon('ic_disabled')
-  }
+  },
 ];
 
 export default navConfig;
diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -5,7 +5,6 @@ import { HelmetProvider } from 'react-helmet-async';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 import App from './app';
-
 // ----------------------------------------------------------------------
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

diff --git a/client/src/pages/health-record.jsx b/client/src/pages/health-record.jsx
@@ -0,0 +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 patientID={patientID} />
+    </>
+  );
+}
diff --git a/client/src/pages/patients.jsx b/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 />
+    </>
+  );
+}
diff --git a/client/src/routes/sections.jsx b/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,9 +9,11 @@ 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'));
+export const HealthRecordPage = lazy(() => import('src/pages/health-record'));
 export const Page404 = lazy(() => import('src/pages/page-not-found'));
 export const DoctorDocumentUploadPage = lazy(() => import('src/pages/doctor-document-upload'));
 export const RequestsListPage = lazy(() => import('src/pages/requests-list'));
@@ -21,10 +23,10 @@ export const MedicalHistoryPage = lazy(() => import('src/pages/medical-history')
 export default function Router() {
   const routes = useRoutes([
     {
-      path: "",
+      path: '',
       element: (
         <DashboardLayout>
-          <Suspense fallback={<div>Loading...</div>} >
+          <Suspense fallback={<div>Loading...</div>}>
             <Outlet />
           </Suspense>
         </DashboardLayout>
@@ -38,24 +40,27 @@ export default function Router() {
         { path: '/upload-document', element: <DoctorDocumentUploadPage /> },
         { path: '/medical-history', element: <MedicalHistoryPage /> },
         { path: 'requests-list', element: <RequestsListPage /> },
-      ]
+        { path: 'patients', element: <PatientsPage /> },
+        { path: 'health-record/:patientID', element: <HealthRecordPage /> },
+        { path: 'health-record', element: <HealthRecordPage /> },
+      ],
     },
     {
       path: 'login',
-      element: <LoginPage />
+      element: <LoginPage />,
     },
     {
       path: 'register',
-      element: <RegisterPage />
+      element: <RegisterPage />,
     },
     {
       path: '404',
-      element: <Page404 />
+      element: <Page404 />,
     },
     {
       path: '*',
-      element: <Navigate to="/404" replace />
-    }
+      element: <Navigate to="/404" replace />,
+    },
   ]);
 
   return routes;

diff --git a/client/src/sections/doctors/doctor-card.jsx b/client/src/sections/doctors/doctor-card.jsx
@@ -4,47 +4,66 @@ import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Card from '@mui/material/Card';
 import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
 
-import DoctorSlot from './doctor-slot';
+import DoctorDaySlots from './doctor-slot';
 
 import { axiosInstance } from '../../utils/axiosInstance';
 
-export default function DoctorCard({ doctor }) {
-  const { isLoading, error, data: slots } = useQuery('slots', () => axiosInstance.get(`/doctors/${doctor.id}/slots`));
+export default function DoctorCard({ i, doctor }) {
+  const {
+    isLoading,
+    error,
+    data: weekSlots
+  } = useQuery(
+    `slots${i}`,
+    () => axiosInstance.get(`/doctors/${doctor._id}/availableAppointments`).then((res) => res.data.result),
+    { refetchOnWindowFocus: false, refetchOnMount: false }
+  );
+
+  if (isLoading) return null;
+
+  if (error) return 'An error has occurred';
 
   return (
     <Card type="section">
-      <Stack direction={'row'} spacing={10} m={6}>
-        <Stack alignItems="center" justifyContent="center">
+      <Stack direction={'row'} spacing={3} m={4}>
+        <Box alignItems="center" justifyContent="center">
           <Avatar
             alt="User Img"
-            src="assets/images/avatars/avatar_1.jpg"
+            src="assets/images/avatars/avatar_13.jpg"
             sx={{
-              width: 150,
-              height: 150,
+              width: 125,
+              height: 125,
               border: 1,
               borderColor: 'primary.main'
             }}
           />
-        </Stack>
+        </Box>
 
         <Stack spacing={0} alignItems="center" justifyContent="center">
-          <Typography variant="h4" color={'Highlight'}>
-            Dr.{' '}
+          <Typography variant="h5" color={'Highlight'} noWrap>
+            Dr. {doctor.name}
           </Typography>
-          <Typography variant="subtitle1" mb={4}>
-            Specialty: {''}
+          <Typography variant="subtitle1" noWrap>
+            Specialty: {doctor.specialty}
+          </Typography>
+          <Typography variant="subtitle1" noWrap>
+            Education: {doctor.educationBackground}
+          </Typography>
+          <Typography variant="subtitle1" mb={1} noWrap>
+            Hospital: {doctor.hospital}
           </Typography>
           <Typography variant="subtitle1" fontSize={18} fontFamily={'Segoe UI'}>
-            Hourly Rate:{' '}
+            Hourly Rate: {doctor.hourRate}
           </Typography>
         </Stack>
 
-        {/* <Stack direction={'row'} spacing={2} alignItems="center" justifyContent="center">
-          {slots.map((slot) => (
-            <DoctorSlot key={slot.id} slot={slot} />
+        <Stack direction={'row'} spacing={0} alignItems="center" justifyContent="center">
+          {Object.keys(weekSlots).map((day) => (
+            <DoctorDaySlots key={day} day={day} slots={weekSlots[day]} doctorID={doctor._id} />
           ))}
-        </Stack> */}
+        </Stack>
       </Stack>
     </Card>
   );