Merge pull request #32 from advanced-computer-lab-2023/task-10,16,17,…

…51_FrontAndBack

Task 10,16,17,51 front and back

client/package.json

@@ -27,9 +27,10 @@
     "@mui/icons-material": "^5.14.16",
     "@mui/lab": "^5.0.0-alpha.147",
     "@mui/material": "^5.14.17",
+    "@mui/styled-engine": "^5.14.17",
     "@mui/utils": "^5.14.17",
     "@pdftron/webviewer": "^10.5.1",
-    "@react-pdf-viewer/core": "^3.17.0",
+    "@react-pdf-viewer/core": "^3.12.0",
     "apexcharts": "^3.43.0",
     "axios": "^1.6.1",
     "date-fns": "^2.30.0",

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

@@ -30,6 +30,16 @@ const navConfig = [
     path: '/blog',
     icon: icon('ic_blog')
   },
+  {
+    title: 'contract',
+    path: '/contract',
+    icon: icon('ic_contract')
+  },
+  {
+    title: 'add Slots Or Appointment',
+    path: '/addSlotsOrAppointment',
+    icon: icon('ic_add')
+  },
   {
     title: 'login',
     path: '/login',

client/src/pages/addSlotsOrAppointment.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { AddView } from 'src/sections/addSlotsOrAppointment/view';
+
+// ----------------------------------------------------------------------
+
+export default function AddSlotsPage() {
+  return (
+    <>
+      <Helmet>
+        <title> Add Slots Or Appointment </title>
+      </Helmet>
+
+      <AddView />
+    </>
+  );
+}

client/src/pages/contract.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { DoctorContract } from 'src/sections/contract';
+
+// ----------------------------------------------------------------------
+
+export default function ContarctPage() {
+  return (
+    <>
+      <Helmet>
+        <title> Contract </title>
+      </Helmet>
+
+      <DoctorContract />
+    </>
+  );
+}

client/src/routes/sections.jsx

@@ -10,6 +10,8 @@ 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 ContractPage = lazy(() => import('src/pages/contract'));
+export const AddSlotsOrAppointmentPage = lazy(() => import('src/pages/addSlotsOrAppointment'));
 export const LoginPage = lazy(() => import('src/pages/login'));
 export const RegisterPage = lazy(() => import('src/pages/register'));
 export const ProductsPage = lazy(() => import('src/pages/products'));
@@ -52,7 +54,9 @@ export default function Router() {
         { path: 'doctors', element: <DoctorsPage /> },
         { path: 'packages', element: <PackagePage /> },
         { path: 'addFamily', element: <AddFamilyPage /> },
-        { path: 'viewPackage', element: <ViewPackagePage /> }
+        { path: 'viewPackage', element: <ViewPackagePage /> },
+        { path: 'contract', element: <ContractPage /> },
+        { path: 'addSlotsOrAppointment', element: <AddSlotsOrAppointmentPage /> }
       ]
     },
     {

client/src/sections/addSlotsOrAppointment/AddSlots.jsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Box, Container, Card, Stack, TextField, Typography, Button, MenuItem, Snackbar, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { axiosInstance } from '../../utils/axiosInstance';
+
+const AddSlotsForm = () => {
+  const { register, handleSubmit, reset, formState: { errors } } = useForm();
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [open, setOpen] = useState(false);
+
+
+  const onSubmit = async (data) => {
+
+    const timeStringToObject = (timeString) => {
+      const [hours, minutes] = timeString.split(':');
+      return { hours: parseInt(hours, 10), minutes: parseInt(minutes, 10) };
+    };
+
+    const slotData = {
+      day: data.day,
+      slots: [{
+        from: timeStringToObject(data.startTime),
+        to: timeStringToObject(data.endTime),     
+        maxPatients: data.maxPatients
+      }]
+    };
+
+    setLoading(true);
+    setMessage('');
+
+    try {
+      const response = await axiosInstance.put('/me/weeklyslots', slotData);
+
+      if (response.status === 200) {
+        setMessage(response.data.message);
+        reset();
+      } else {
+        setMessage(response.data.message || 'An error occurred');
+      }
+    } catch (error) {
+      setMessage(error.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
+      setOpen(true);
+    }
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const daysOfWeek = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+
+  return (
+    <Container maxWidth="sm">
+       <Box sx={{ mt: 4, mb: 4 }}>
+        <Card variant="outlined" sx={{ p: 3, width: '100%', maxWidth: 500 }}>
+          <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold', color: '#333' }}>
+            Add Slots
+          </Typography>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={2}>
+              <TextField
+                select
+                label="Day of the Week"
+                {...register('day', { required: 'Day is required' })}
+                error={Boolean(errors.day)}
+                helperText={errors.day?.message}
+                fullWidth
+                margin="normal"
+              >
+                {daysOfWeek.map(day => (
+                  <MenuItem key={day} value={day}>
+                    {day}
+                  </MenuItem>
+                ))}
+              </TextField>
+              <TextField
+                label="Start Time"
+                type="time"
+                InputLabelProps={{ shrink: true }}
+                {...register('startTime', { required: 'Start time is required' })}
+                error={Boolean(errors.startTime)}
+                helperText={errors.startTime?.message}
+                fullWidth
+                margin="normal"
+              />
+              <TextField
+                label="End Time"
+                type="time"
+                InputLabelProps={{ shrink: true }}
+                {...register('endTime', { required: 'End time is required' })}
+                error={Boolean(errors.endTime)}
+                helperText={errors.endTime?.message}
+                fullWidth
+                margin="normal"
+              />
+              <TextField
+                label="Max Patients"
+                type="number"
+                {...register('maxPatients', { required: 'Max patients is required' })}
+                error={Boolean(errors.maxPatients)}
+                helperText={errors.maxPatients?.message}
+                fullWidth
+                margin="normal"
+              />
+
+
+              <Button
+                type="submit"
+                variant="contained"
+                color="inherit"
+                disabled={loading}
+                fullWidth
+                sx={{ mt: 2 }}
+              >
+                {loading ? 'Adding...' : 'Add Slots'}
+              </Button>
+            </Stack>
+          </form>
+
+          <Snackbar
+            open={open}
+            autoHideDuration={6000}
+            onClose={handleClose}
+            message={message}
+            action={
+              <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            }
+          />
+        </Card>
+      </Box>
+    </Container>
+  );
+};
+
+export default AddSlotsForm;

client/src/sections/addSlotsOrAppointment/ScheduleApp.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Box, Container, Card, Stack, TextField, Typography, Button, Snackbar, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { axiosInstance } from '../../utils/axiosInstance';
+
+const ScheduleFollowUpForm = () => {
+  const { register, handleSubmit, reset, formState: { errors } } = useForm();
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const onSubmit = async (data) => {
+    setLoading(true);
+    setMessage('');
+
+    try {
+      const response = await axiosInstance.post('/me/appointments', {
+        ...data
+      });
+
+      if (response.status === 200) {
+        setMessage(response.data.message);
+        reset();
+      } else {
+        setMessage(response.data.message || 'An error occurred');
+      }
+    } catch (error) {
+      setMessage(error.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
+      setOpen(true);
+    }
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Container maxWidth="sm">
+     <Box sx={{ mt: 4, mb: 4 }}>        
+      <Card variant="outlined" sx={{ p: 3, width: '100%', maxWidth: 500 }}>
+          <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold', color: '#333' }}>
+            Schedule Follow-Up Appointment
+          </Typography>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={2}>
+              <TextField
+                label="Patient's Email"
+                type="email"
+                {...register('email', { required: 'Patient email is required' })}
+                error={Boolean(errors.email)}
+                helperText={errors.email?.message}
+                fullWidth
+                margin="normal"
+              />
+              <TextField
+                label="Start Date"
+                type="datetime-local"
+                InputLabelProps={{ shrink: true }}
+                {...register('startDate', { required: 'Start date is required' })}
+                error={Boolean(errors.startDate)}
+                helperText={errors.startDate?.message}
+                fullWidth
+                margin="normal"
+              />
+              <TextField
+                label="End Date"
+                type="datetime-local"
+                InputLabelProps={{ shrink: true }}
+                {...register('endDate', { required: 'End date is required' })}
+                error={Boolean(errors.endDate)}
+                helperText={errors.endDate?.message}
+                fullWidth
+                margin="normal"
+              />
+              <Button
+                type="submit"
+                variant="contained"
+                color="inherit"
+                disabled={loading}
+                fullWidth
+                sx={{ mt: 2 }}
+              >
+                {loading ? 'Scheduling...' : 'Schedule Appointment'}
+              </Button>
+            </Stack>
+          </form>
+
+          <Snackbar
+            open={open}
+            autoHideDuration={6000}
+            onClose={handleClose}
+            message={message}
+            action={
+              <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            }
+          />
+        </Card>
+      </Box>
+    </Container>
+  );
+};
+
+export default ScheduleFollowUpForm;