fix: fix selecting appointment

src/components/bookappointment/selectTime/index.tsx

@@ -11,13 +11,28 @@
 import getTimeRange from '../../../utils/TimeRange';
 import ElementTimeType from './type';
 
 const BookAppointment = ({ formik }: any) => {
   const currentDate = dayjs().format('YYYY-MM-DD').toString();
   const params = useParams();
   const [value, setValue] = useState<Dayjs | null>(dayjs(currentDate));
   const [time, setTime] = useState([]);
   const { enqueueSnackbar } = useSnackbar();
 
+  const isPast = (date: Dayjs) => {
+    if (date.format('YYYY-MM-DD') !== dayjs().format('YYYY-MM-DD')) return false;
+    const currentHour = dayjs().hour();
+    const currentMinute = dayjs().minute();
+    const selectedHour = date.hour();
+    const selectedMinute = date.minute();
+    if (selectedHour < currentHour) {
+      return true;
+    }
+    if (selectedHour === currentHour && selectedMinute < currentMinute) {
+      return true;
+    }
+    return false;
+  };
+
   useEffect(() => {
     const getAppointments = async () => {
       try {
@@ -70,7 +85,7 @@
             helperText={formik.touched.appointmentId && formik.errors.appointmentId}
           >
             {time.map((ele: ElementTimeType) => {
-              if (!ele.isAvailable || ele.isBooked) {
+              if (!ele.isAvailable || ele.isBooked || isPast(dayjs(ele.datetime))) {
                 return null;
               }
               const timeRange = getTimeRange(ele.datetime);

src/components/landingPage/World.tsx

@@ -43,7 +43,13 @@ const World = () => (
         </Button>
       </Grid>
       <Grid item lg={5} xs={12} sx={{ mt: 5 }}>
-        <img src={Worldimg} alt="Worldimg" />
+        <img
+          src={Worldimg}
+          alt="Worldimg"
+          style={{
+            maxWidth: '100%', maxHeight: '100%', objectFit: 'cover', height: '100%', width: '100%',
+          }}
+        />
       </Grid>
     </Grid>
   </Container>

src/components/landingPage/onlineMedical.tsx

@@ -15,7 +15,13 @@ const OnlineMedical = () => {
       <Container>
         <Grid container spacing={2} mt={5}>
           <Grid item lg={6} xs={12} sx={{ mt: 5 }}>
-            <img src={online} alt="online" />
+            <img
+              src={online}
+              alt="online"
+              style={{
+                maxWidth: '100%', maxHeight: '100%', objectFit: 'cover', height: '100%', width: '100%',
+              }}
+            />
           </Grid>
           <Grid item lg={5} xs={12} sx={{ mt: 5, ml: 5 }}>
             <Typography variant="h5" color="primary" sx={{ fontWeight: 'bold', mb: 2, mt: 3 }}>
@@ -68,7 +74,13 @@ const OnlineMedical = () => {
 
           </Grid>
           <Grid item lg={5} xs={12} sx={{ mt: 5 }}>
-            <img src={online2} alt="online" />
+            <img
+              src={online2}
+              alt="online"
+              style={{
+                maxWidth: '100%', maxHeight: '100%', objectFit: 'cover', height: '100%', width: '100%',
+              }}
+            />
           </Grid>
         </Grid>
       </Container>
@@ -83,7 +95,13 @@ const OnlineMedical = () => {
       >
         <Grid container spacing={2} mt={5}>
           <Grid item lg={6} xs={12}>
-            <img src={group} alt="group" />
+            <img
+              src={group}
+              alt="group"
+              style={{
+                maxWidth: '100%', maxHeight: '100%', objectFit: 'cover', height: '100%', width: '100%',
+              }}
+            />
           </Grid>
           <Grid item lg={5} xs={12} sx={{ mt: 5 }}>
             <Typography variant="h5" color="primary" sx={{ fontWeight: 'bold', mb: 2, mt: 5 }}>

src/components/landingPage/questions.tsx

@@ -34,7 +34,15 @@ const Questions = () => {
           </Typography>
         </Grid>
         <Grid item lg={6} xs={12}>
-          <img src={meet} alt="meet" style={{ height: '40rem' }} />
+          <img
+            src={meet}
+            alt="meet"
+            style={
+            {
+              maxWidth: '100%', maxHeight: '100%', objectFit: 'cover', height: '100%', width: '100%',
+            }
+          }
+          />
         </Grid>
         <Grid item lg={6} xs={12}>
           <Grid item xs={12}>

src/components/therapistProfile/therapistHeader/index.tsx

@@ -177,7 +177,7 @@
                     style={ButtonStyle}
                     onClick={handleOpenAppointmentsModal}
                   >
-                    Add Appointment
+                    Add Availability
                   </Button>
                 )
                 : (
@@ -226,7 +226,7 @@
                     />
                   ) : (
                     <div
                       dangerouslySetInnerHTML={{ __html: dataFromTherapist.bio }}
                       style={{
                         marginTop: '50px',
                         color: themes?.themeMode === 'dark' ? '#eeee' : '#000',

src/context/themeProvider.tsx

@@ -1,11 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useEffect } from 'react';
 import { ThemeProvider } from '@mui/material';
 import { AppContextProps } from './types';
 import { theme, darkTheme } from '../theme/theme';
 import ThemeContext from './themeContext';
 
-const CheckThemeProvider : React.FC<AppContextProps> = ({ children }) => {
-  const [themeMode, setThemeMode] = React.useState<'light' | 'dark'>('light');
+const CheckThemeProvider: React.FC<AppContextProps> = ({ children }) => {
+  const initialThemeMode = localStorage.getItem('themeMode') || 'light';
+  const [themeMode, setThemeMode] = React.useState(initialThemeMode);
+
+  useEffect(() => {
+    localStorage.setItem('themeMode', themeMode);
+  }, [themeMode]);
 
   const handleThemeModeSwitch = useCallback(() => {
     setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));

src/pages/bugsReport/index.tsx

@@ -1,4 +1,6 @@
-import { useState, ChangeEvent, FormEvent } from 'react';
+import {
+  useState, ChangeEvent, FormEvent, useContext,
+} from 'react';
 import { Button } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import { Link } from 'react-router-dom';
@@ -7,13 +9,15 @@ import './style.css';
 import { AxiosError } from 'axios';
 import { enqueueSnackbar } from 'notistack';
 import { axiosInstance } from '../../utils/apis';
+import { ThemeContext } from '../../context';
 
 const LinkText = styled(Link)`
   text-decoration: none;
   color : white;
 `;
 
 const BugReportPage = () => {
+  const themes = useContext(ThemeContext);
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [severity, setSeverity] = useState('Low');
@@ -52,10 +56,18 @@ const BugReportPage = () => {
   };
 
   return (
-    <div className="container">
+    <div className={`container ${themes?.themeMode === 'dark' ? 'dark' : ''}`}>
       {isSubmitted ? (
-        <div className="submitted-message">
-          <h2>Thank you for submitting the bug report!</h2>
+        <div
+          className="submitted-message"
+          style={{
+            color: themes?.themeMode === 'dark' ? 'white' : 'black',
+          }}
+        >
+          <h2>
+            Thank you for submitting the bug report!
+
+          </h2>
           <p>We appreciate your contribution. Our team will review the report shortly.</p>
           <Button
             variant="contained"
@@ -70,7 +82,11 @@ const BugReportPage = () => {
           </Button>
         </div>
       ) : (
-        <form className="bug-report-form" onSubmit={handleSubmit}>
+        <form
+          className="bug-report-form"
+          onSubmit={handleSubmit}
+
+        >
           <h2 className="bug-report-title">
             Submit Bug Report