package-lock.json

@@ -37,11 +37,9 @@
         "react-dom": "^18.2.0",
         "react-gauge-chart": "^0.4.1",
         "react-icons": "^4.9.0",
-        "react-image-marker": "^1.2.0",
         "react-leaflet": "^4.2.1",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
-        "react-signature-canvas": "^1.0.6",
         "react-table": "^7.8.0",
         "recharts": "^2.7.2",
         "typescript": "^4.9.5",
@@ -54,7 +52,6 @@
         "@types/leaflet": "^1.9.3",
         "@types/react-date-range": "^1.4.4",
         "@types/react-gauge-chart": "^0.4.0",
-        "@types/react-signature-canvas": "^1.0.2",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.24",
         "tailwindcss": "^3.3.2"
@@ -4974,16 +4971,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-signature-canvas": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@types/react-signature-canvas/-/react-signature-canvas-1.0.2.tgz",
-      "integrity": "sha512-uDHDoo2JM/9qYS+U7PRKDLBgOnQOOUEkDdXjCxBvI19fWtOLqXisrjiquPu+enu5iu2oWIfU7cVhn1QJZPkLTg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*",
-        "@types/signature_pad": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.6",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
@@ -5041,12 +5028,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/signature_pad": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.2.tgz",
-      "integrity": "sha512-dDfWIgRcdzAaeVOpLRmLHIumGwc5inSD4Dj2Duis3yUEoSADZECLJHKkUQphbaANQ7kSC2bkf1JzyBPSmTlrPQ==",
-      "dev": true
-    },
     "node_modules/@types/sockjs": {
       "version": "0.3.33",
       "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@@ -15814,15 +15795,6 @@
         "react": "*"
       }
     },
-    "node_modules/react-image-marker": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-image-marker/-/react-image-marker-1.2.0.tgz",
-      "integrity": "sha512-HFrzKVnX/hgZqHlxwV7XQNiyMRowD1IAnbsf4dZCEuSzGlGHxAv+sCv/AU1VHHVxFxoHubNL/xYNpGQfgtX67A==",
-      "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15979,20 +15951,6 @@
         }
       }
     },
-    "node_modules/react-signature-canvas": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
-      "integrity": "sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==",
-      "dependencies": {
-        "signature_pad": "^2.3.2",
-        "trim-canvas": "^0.1.0"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.5.8",
-        "react": "0.14 - 18",
-        "react-dom": "0.14 - 18"
-      }
-    },
     "node_modules/react-smooth": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz",
@@ -16876,11 +16834,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
-    "node_modules/signature_pad": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz",
-      "integrity": "sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA=="
-    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -17728,11 +17681,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/trim-canvas": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/trim-canvas/-/trim-canvas-0.1.2.tgz",
-      "integrity": "sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ=="
-    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

package.json

@@ -33,11 +33,9 @@
     "react-dom": "^18.2.0",
     "react-gauge-chart": "^0.4.1",
     "react-icons": "^4.9.0",
-    "react-image-marker": "^1.2.0",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
-    "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",
     "recharts": "^2.7.2",
     "typescript": "^4.9.5",
@@ -74,7 +72,6 @@
     "@types/leaflet": "^1.9.3",
     "@types/react-date-range": "^1.4.4",
     "@types/react-gauge-chart": "^0.4.0",
-    "@types/react-signature-canvas": "^1.0.2",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2"

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="In Motion Spine & Joint Center"
+      content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>In Motion Spine & Joint Center</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css

@@ -1,34 +1,37 @@
-/* .app-screen-constants .MuiInputBase-root{
+.app-screen-constants .MuiInputBase-root{
     margin:auto;
     max-width:1500;
     height:800 !important;
-} */
+}
 
-/* .collapsable-form-style .MuiInputBase-root {
+.collapsable-form-style .MuiInputBase-root {
-    margin:3%;
+    width: 300px !important;
+    margin: 5%;
     height: 50px
 }
 
 .collapsable-form-style-form7 .MuiInputBase-root {
+    width: 350px !important;
     margin: 3%;
     height: 50px
 }
 
 .collapsable-form-style-multiline .MuiInputBase-root {
+    width: 350px !important;
     margin: 5%;
     min-height: 100px
-} */
+}
-/* .collapsable-form-style-multiline label {
+.collapsable-form-style-multiline label {
     padding: 15px;
-} */
+}
 
-/* .collapsable-form-style label {
+.collapsable-form-style label {
     padding: 15px;
-} */
+}
 
-/* .collapsable-form-style-form7 label {
+.collapsable-form-style-form7 label {
     padding: 13px;
-} */
+}
 
 .collapsable-form-style-radioButtons{
     width: 300px !important;
@@ -38,6 +41,7 @@
 }
 
 .collapsable-form-style-radioButtons-fullwidth{
+    /* width: 300px !important; */
     margin: 5%;
     padding-top: 12px;
     padding-left: 16px;
@@ -53,33 +57,4 @@
 
 .addNew-form-table-style label {
     padding: 0px;
-}
+}
-.MuiFormControl-root {
-    width: 95% !important;
-}
-
-.MuiGrid-root .MuiTextField-root {
-    margin-top: 3%;
-    margin-bottom: 3%;
-}
-
-/* .MuiFormControl-root{
-    width: 90% !important;
-    height: 50px !important;
-    margin-bottom: 1% !important;
-}
-
-.MuiTextField-root {
-    margin-top: 3% !important;
-    margin-bottom: 5% !important;
-}
-
-.collapsable-form-style-multiline label {
-    padding: 15px;
-}
-
-.collapsable-form-style-radioButtons-fullwidth {
-    margin: 5%;
-    padding-top: 12px;
-    padding-left: 16px;
-} */

src/App.tsx

@@ -11,8 +11,7 @@ function App() {
         <div className='flex'>
           <BrowserRouter>
           <Routes>
-            <Route path='/' element={<PatientForm type={"fill"}/>} />
+              <Route path='/' element={<PatientForm />}/>
-            <Route path='/view-details' element={<PatientForm type={"display"}/>}/>
           </Routes>
           </BrowserRouter>
         </div>

src/Components/Helper/AddNewTable.tsx

@@ -1,17 +1,4 @@
-import {
+import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
-  Button,
-  TableContainer,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
-  TextField,
-  Paper,
-  Grid,
-  FormLabel,
-  FormControl,
-} from '@mui/material';
 import * as React from 'react';
 
 interface RowData {
@@ -26,64 +13,31 @@ interface DataTableProps {
   onAddRow: () => void;
 }
 
-type Props = {
+const DataTable: React.FC= () => {
-  handleFormSection5Data: (
-    generalHealth: string | undefined,
-    presentProblemBefore: string | undefined,
-    ifYespresentProblemBefore: string | undefined,
-    ifYestreatmentProvided: string | undefined,
-    ifYesOutcome: string | undefined,
-    strokeBloodclotting: string | undefined,
-    ifYesstrokeBloodclotting: string | undefined,
-    dizzinessFetigue: string | undefined,
-    ifyesdizzinessFetigue: string | undefined,
-    antiColligent: string | undefined,
-    injuriesHospitalization: string | undefined,
-    supplementsOrDrugs: string | undefined
-  ) => void;
-  patientDataDiplay: any;
-  type: string;
-};
 
-function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
   const [illnessFromData, setIllnessFromData] = React.useState<any>({
-    id: 0,
+    id:0,date:'',illness:'',treatment:'',results:''
-    date: '',
+  })
-    illness: '',
-    treatment: '',
-    results: '',
-  });
   const [illnessData, setIllnessData] = React.useState<any[]>([
-    {
+    {id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'}
-      id: 0,
-      date: 'ex-12-01-2020',
-      illness: 'knee pain',
-      treatment: 'surgery',
-      results: 'cured',
-    },
   ]);
 
-  const deleteIllnessData = (idToDelete: number) => {
+  const deleteIllnessData = (idToDelete:number) => {
-    const updatedIllnessData = illnessData.filter(
+    const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
-      (item) => item.id !== idToDelete
-    );
     setIllnessData(updatedIllnessData);
   };
+  
 
   const handleAddRow = () => {
-    if (
+    if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){
-      illnessFromData.date != '' &&
+
-      illnessFromData.illness != '' &&
+      const newId = Math.max(...illnessData.map(item => item.id)) + 1;
-      illnessFromData.treatment != '' &&
-      illnessFromData.results != ''
-    ) {
-      const newId = Math.max(...illnessData.map((item) => item.id)) + 1;
       const newIllnessData = [
         ...illnessData,
         {
           ...illnessFromData,
-          id: newId,
+          id: newId
-        },
+        }
       ];
       setIllnessData(newIllnessData);
       setIllnessFromData({
@@ -91,136 +45,89 @@ function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
         date: '',
         illness: '',
         treatment: '',
-        results: '',
+        results: ''
       });
     }
   };
 
+  console.log("sdfsdfdsf",illnessData, illnessFromData)
+  
+
   return (
     <>
-      <FormLabel>If yes, Please enter the details below:</FormLabel>
+    <FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
-      <br></br>
+    <FormControl>
-      {type !== 'display' ? (
+      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
-        <FormControl>
+        <Grid item xs={2} className='addNew-form-table-style'>
-          <Grid container spacing={1.5}>
+            <TextField 
-            <Grid
+              required
-              item
+                variant="outlined"
-              xs={12}
+                label="Date" 
-              xl={3}
-              lg={3}
-              md={6}
-              sm={12}
-              className='addNew-form-table-style'
-            >
-              <TextField
-                required
-                variant='outlined'
-                label='Date'
                 value={illnessFromData.date}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues: any) => ({
+                  setIllnessFromData((prevValues:any) => ({
                     ...prevValues,
                     date: event.target.value,
                   }));
                 }}
-              />
+                />
-            </Grid>
+        </Grid>
-            <Grid
+        <Grid item xs={3.7} className='addNew-form-table-style'>
-              item
+            <TextField 
-              xs={12}
+              required
-              xl={3}
+                variant="outlined"
-              lg={3}
+                label="Injury/Illness/Surgeries" 
-              md={6}
-              sm={12}
-              className='addNew-form-table-style'
-            >
-              <TextField
-                required
-                variant='outlined'
-                label='Injury/Illness/Surgeries'
                 value={illnessFromData.illness}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues: any) => ({
+                  setIllnessFromData((prevValues:any) => ({
                     ...prevValues,
                     illness: event.target.value,
                   }));
                 }}
-              />
+                />
-            </Grid>
+        </Grid>
-            <Grid
+        <Grid item xs={3.5} className='addNew-form-table-style'>
-              item
+            <TextField 
-              xs={12}
+              required
-              xl={3}
+                variant="outlined"
-              lg={3}
+                label="Treatment" 
-              md={6}
-              sm={12}
-              className='addNew-form-table-style'
-            >
-              <TextField
-                required
-                variant='outlined'
-                label='Treatment'
                 value={illnessFromData.treatment}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues: any) => ({
+                  setIllnessFromData((prevValues:any) => ({
                     ...prevValues,
                     treatment: event.target.value,
                   }));
                 }}
-              />
+                />
-            </Grid>
+        </Grid>
-            <Grid
+        <Grid item xs={2} className='addNew-form-table-style'>
-              item
+            <TextField 
-              xs={12}
-              xl={3}
-              lg={3}
-              md={6}
-              sm={12}
-              className='addNew-form-table-style'
-            >
-              <TextField
                 required
-                variant='outlined'
+                variant="outlined"
-                label='Results'
+                label="Results" 
                 value={illnessFromData.results}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues: any) => ({
+                  setIllnessFromData((prevValues:any) => ({
                     ...prevValues,
                     results: event.target.value,
                   }));
                 }}
-              />
+                />
-            </Grid>
+        </Grid>
-            <Grid
+        <Grid item xs={0.8} className='addNew-form-table-style'>
-              item
+          <Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
-              xs={12}
+        </Grid>
-              xl={3}
+        
-              lg={3}
+      </Grid>
-              md={6}
+    </FormControl>
-              sm={12}
+    
-              className='addNew-form-table-style'
+     
-            >
+      <TableContainer sx={{width:800}} className='illness-table-style'>
-              <Button
+        <Table  aria-label="simple table">
-                sx={{ height: '40px', bgcolor: 'skyblue' }}
-                onClick={handleAddRow}
-              >
-                Add
-              </Button>
-            </Grid>
-          </Grid>
-        </FormControl>
-      ) : (
-        ''
-      )}
-
-      <TableContainer className='illness-table-style'>
-        <Table aria-label='simple table'>
           <TableHead>
             <TableRow>
               <TableCell align='left'>Date</TableCell>
-              <TableCell align='center'>
+              <TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
-                Injury/Fracture/Illness/Surgeries
-              </TableCell>
               <TableCell align='left'>Treatment</TableCell>
               <TableCell align='left'>Results</TableCell>
               <TableCell align='left'></TableCell>
@@ -229,23 +136,22 @@ function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
           <TableBody>
             {illnessData.map((row, index) => (
               <TableRow key={index}>
-                <TableCell align='left'>{row.date}</TableCell>
-                <TableCell align='center'>{row.illness}</TableCell>
-                <TableCell align='left'>{row.treatment}</TableCell>
-                <TableCell align='left'>{row.results}</TableCell>
                 <TableCell align='left'>
-                  {type !== 'display' ? (
+                    {row.date}
-                    <Button
+                </TableCell>
-                      sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
+                <TableCell align='center'> 
-                      onClick={(e) => {
+                  {row.illness}
-                        deleteIllnessData(row.id);
+                </TableCell>
-                      }}
+                <TableCell align='left'> 
-                    >
+                  {row.treatment}
-                      Delete
+                </TableCell>
-                    </Button>
+                <TableCell align='left'> 
-                  ) : (
+                  {row.results}
-                    ''
+                </TableCell>
-                  )}
+                <TableCell align='left'> 
+                  <Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
+                    Delete
+                  </Button>
                 </TableCell>
               </TableRow>
             ))}
@@ -254,6 +160,6 @@ function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
       </TableContainer>
     </>
   );
-}
+};
 
 export default DataTable;

src/Components/Helper/AlertDialogBox.tsx

@@ -1,35 +0,0 @@
-import { Alert, AlertColor, Snackbar, Stack } from '@mui/material';
-
-type Props = {
-  open: boolean;
-  message: string;
-  severity: AlertColor;
-  duration: number;
-  handleAlertClose: () => void;
-};
-
-function AlertDialog({
-  open,
-  message,
-  severity,
-  duration,
-  handleAlertClose,
-}: Props) {
-  return (
-    <Stack spacing={2} sx={{ width: '100%' }}>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        open={open}
-        autoHideDuration={duration}
-        onClose={handleAlertClose}
-        sx={{ zIndex: 9999 }}
-      >
-        <Alert severity={severity} sx={{ width: '100%' }}>
-          {message}
-        </Alert>
-      </Snackbar>
-    </Stack>
-  );
-}
-
-export default AlertDialog;

src/Components/Helper/SignatureComponent.tsx

@@ -1,50 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import SignatureCanvas from 'react-signature-canvas';
-import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-import { FormLabel, Grid } from '@mui/material';
-
-
-type Props={
-    signature:any;
-    setSignature: (value: any) => void;
-}
-const SignatureComponent = ({signature,setSignature}:Props) => {
-  const sigCanvas = useRef<any>();
-  
-  const clear = () => sigCanvas.current.clear();
-//   setSignature(sigCanvas.current.toDataURL());
-
-  const save = () => {
-    setSignature(sigCanvas.current.toDataURL());
-  };
-  
-  const StyledCanvas = styled(SignatureCanvas)({
-    border: '5px solid #888888'
-  });
-  
-  return (
-    <>   
-        <Grid item sx={{border:'1px solid #888888',borderRadius:2, width:'250px', height:'110px',marginLeft:'10px'}}>
-            <StyledCanvas
-                ref={sigCanvas}
-                canvasProps={{
-                className: 'signatureCanvas',
-                height:'110px',
-                width:'250px'
-                }}
-            />
-        </Grid>
-        <Grid  container flexDirection={'row'}  sx={{ marginTop:'10px'}}>
-            <Grid item sx={{marginLeft:'10px'}}>
-                <Button variant="contained" onClick={clear}>Clear</Button>
-            </Grid>
-            <Grid item sx={{marginLeft:'20px'}}>
-                <Button variant="contained" onClick={save}>Save</Button>
-            </Grid>
-        </Grid>
-    </>
-  );
-};
-
-export default SignatureComponent;

src/Components/ImageMarker/Entry.tsx

@@ -1,26 +0,0 @@
-import Slider from '@mui/material/Slider';
-import IconButton from '@mui/material/IconButton';
-
-import deleteIcon from '../../Assets/delete.png';
-import Rating from './Rating';
-
-type Props = {
-  entry: any;
-  index: number;
-  onUpdate: (data: any) => void;
-  onDelete: (index: number) => void;
-};
-
-const Entry = ({ entry, onUpdate, onDelete, index }: Props) => {
-  return (
-    <div className='entry'>
-      <span className='image-marker__marker--default'>{index + 1}</span>
-      <Rating index={entry.index} defaultValue={entry.severity} onUpdate={onUpdate}/>
-      <IconButton aria-label='delete' onClick={() => onDelete(index)}>
-        <img src={deleteIcon} height='25' width='25' />
-      </IconButton>
-    </div>
-  );
-};
-
-export default Entry;

src/Components/ImageMarker/EntryForm.tsx

@@ -1,41 +0,0 @@
-import Entry from './Entry';
-import { Button } from '@mui/material';
-
-type Props = {
-  entries: Array<any>;
-  onUpdate: (data: any) => void;
-  onDelete: (index: number) => void;
-  onSave: (data: any) => void;
-};
-
-const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
-  return (
-    <div className='entryForm'>
-      <span className='header'>
-        *** Mark Your Areas of Pain on the Picture ***
-      </span>
-      {entries && entries.length > 0 && (
-        <span className='sub-header'>How much pain are you in right now?</span>
-      )}
-      {entries?.map((entry: any, index: number) => (
-        <Entry
-          entry={entry}
-          index={index}
-          key={index}
-          onUpdate={onUpdate}
-          onDelete={onDelete}
-        />
-      ))}
-      {/* {
-        entries && entries.length > 0 &&
-        <div className='buttonDiv'>
-          <Button variant='contained' onClick={() => onSave({})}>
-            Save
-          </Button>
-        </div>
-      } */}
-    </div>
-  );
-};
-
-export default EntryForm;

src/Components/ImageMarker/PatientImageMarker.css

@@ -1,185 +0,0 @@
-.image-marker-div {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-
-.image-marker-div .entry-div {
-    width: 55%;
-}
-
-.image-marker-div .entry-div .entryForm {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.image-marker-div .entry-div .entryForm .header {
-    font-weight: 500;
-    font-size: 18px;
-}
-
-.image-marker-div .entry-div .entryForm .sub-header {
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.image-marker-div .entry-div .entryForm .entry {
-    margin-top: 1%;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-}
-
-.image-marker-div .marker-div {
-    /* margin-right: 5%; */
-}
-
-.image-marker-div .rating-div {
-    width: 80%;
-}
-
-.image-marker-div .entry-div .sub-header {
-    font-weight: 500;
-    font-size: 16px;
-}
-
-.ratingResult {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin-top: 2%;
-    margin-bottom: 3%;
-}
-.image-marker-div .marker-div {
-    width: 45%;
-}
-
-@media only screen and (max-width: 1200px) {
-    .image-marker-div {
-        flex-direction: column;
-    }
-
-    .image-marker-div .entry-div {
-        width: 100%;
-    }
-
-    .image-marker-div .rating-div {
-        width: 100%;
-    }
-
-    .image-marker-div .entry-div .entryForm .entry {
-        gap: 0;
-        margin-bottom: 2%;
-    }
-    .image-marker-div .marker-div {
-        /* margin-right: 5%; */
-        margin-top: 3%;
-        width: 100%;
-    }
-}
-
-@media only screen and (min-width: 1400px) {
-    .image-marker-div .rating-div {
-        width: 70%;
-    }
-
-    .ratingResult .rating-div {
-        width: 80%;
-    }
-}
-
-.btn-scale {
-    min-width: 40px !important;
-    width: 3% !important;
-    text-align: center !important;
-    font-weight: bold !important;
-    color: black !important;
-    font-family: 'Lato', sans-serif;
-    border: none !important;
-    margin-left: 1% !important;
-}
-
-.selected {
-    border: 3px solid black !important;
-}
-
-.btn-scale-asc-1 {
-    background-color: #33FF00 !important;
-}
-
-.btn-scale-asc-1:hover {
-    background-color: #2CDE00 !important;
-}
-
-.btn-scale-asc-2 {
-    background-color: #66FF00 !important;
-}
-
-.btn-scale-asc-2:hover {
-    background-color: #59DE00 !important;
-}
-
-.btn-scale-asc-3 {
-    background-color: #99FF00 !important;
-}
-
-.btn-scale-asc-3:hover {
-    background-color: #85DE00 !important;
-}
-
-.btn-scale-asc-4 {
-    background-color: #CCFF00 !important;
-}
-
-.btn-scale-asc-4:hover {
-    background-color: #B1DE00 !important;
-}
-
-.btn-scale-asc-5 {
-    background-color: #FFFF00 !important;
-}
-
-.btn-scale-asc-5:hover {
-    background-color: #DEDE00 !important;
-}
-
-.btn-scale-asc-6 {
-    background-color: #FFCC00 !important;
-}
-
-.btn-scale-asc-6:hover {
-    background-color: #DEB100 !important;
-}
-
-.btn-scale-asc-7 {
-    background-color: #FF9900 !important;
-}
-
-.btn-scale-asc-7:hover {
-    background-color: #DE8500 !important;
-}
-
-.btn-scale-asc-8 {
-    background-color: #FF6600 !important;
-}
-
-.btn-scale-asc-8 {
-    background-color: #DE5900 !important;
-}
-
-.btn-scale-asc-9 {
-    background-color: #FF3300 !important;
-}
-
-.btn-scale-asc-9:hover {
-    background-color: #DE2C00 !important;
-}
-
-.btn-scale-asc-10 {
-    background-color: #FF0000 !important;
-}
-
-.btn-scale-asc-10:hover {
-    background-color: #DE0000 !important;
-}

src/Components/ImageMarker/PatientImageMarker.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ImageMarker, { Marker } from 'react-image-marker';
-
-import humanImage from '../../Assets/human_body_3d.jpg';
-import EntryForm from './EntryForm';
-
-import './PatientImageMarker.css';
-
-type Props = {};
-
-const PatientImageMarker = (props: Props) => {
-  const [markers, setMarkers] = useState<Array<Marker>>([]);
-  const [entries, setEntries] = useState<Array<any>>([]);
-  const [action, setAction] = useState<any>({});
-
-  const updateEntry = (updated: any) => {
-    setEntries((prevEntries) =>
-      prevEntries.map((entry) =>
-        entry.index === updated.index
-          ? { ...entry, severity: updated.severity }
-          : entry
-      )
-    );
-  };
-
-  const addEntries = (marker: Marker) => {
-    setAction({ type: 'add', index: 0 });
-    setMarkers([...markers, marker]);
-  };
-
-  const deleteEntry = (index: number) => {
-    setAction({ type: 'delete', index: index });
-    setMarkers(markers.filter((marker: Marker, ind: number) => ind != index));
-  };
-
-  const onSave = () => {
-    localStorage.setItem(
-      'entry',
-      JSON.stringify({ markers: markers, entries: entries })
-    );
-  };
-
-  useEffect(() => {
-    if (action.type === 'add') {
-      const ind =
-        entries.length != 0 ? entries[entries.length - 1].index + 1 : 1;
-      setEntries([...entries, { index: ind, severity: 5 }]);
-    } else
-      setEntries(
-        entries.filter((entry: any, ind: number) => ind != action.index)
-      );
-  }, [action]);
-
-  useEffect(() => {
-    onSave();
-  }, [entries]);
-
-  return (
-    <div className='image-marker-div'>
-      <div className='entry-div'>
-        <EntryForm
-          entries={entries}
-          onSave={onSave}
-          onDelete={deleteEntry}
-          onUpdate={updateEntry}
-        />
-      </div>
-      <div className='marker-div'>
-        <ImageMarker
-          src={humanImage}
-          markers={markers}
-          onAddMarker={(marker: Marker) => addEntries(marker)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default PatientImageMarker;

src/Components/ImageMarker/Rating.tsx

@@ -1,32 +0,0 @@
-import { Button, Tooltip } from '@mui/material';
-import React, { useState } from 'react';
-
-type Props = {
-  index: number;
-  defaultValue: number;
-  onUpdate: (data: any) => void;
-  disabled?: boolean;
-};
-
-const Rating = ({index, defaultValue, onUpdate, disabled} : Props) => {
-  return (
-    <div key={index} className='rating-div'>
-      {[...Array(10)].map((star, ind) => {
-        return (
-          <Tooltip title={(ind+1) < 3 ? 'No Pain' : (ind+1) > 7 ? 'Unbearable' : ''} placement="top-end">
-            <Button
-              className={`btn btn-scale btn-scale-asc-${ind+1} ${(ind+1) === defaultValue ? 'selected' : ''}`}
-              key={ind + 1}
-              onClick={() => onUpdate({ index: index, severity: ind + 1 })}
-              disabled={disabled}
-            >
-              {ind + 1}
-            </Button>
-          </Tooltip>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Rating;

src/Components/ImageMarker/ViewPatientImageMarker.tsx

@@ -1,35 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ImageMarker, { Marker } from 'react-image-marker';
-
-import humanImage from '../../Assets/human_body_3d.jpg';
-import './PatientImageMarker.css';
-import Rating from './Rating';
-
-type Props = {};
-
-const ViewPatientImageMarker = (props: Props) => {
-  const saved = JSON.parse(localStorage.getItem('entry') || '{}');
-  return (
-    <div className='image-marker-div'>
-      <div className='entry-div'>
-        <span className='sub-header'>How much pain?</span>
-        {saved.entries?.map((entry: any, index: number) => (
-          <div className='ratingResult' key={index}>
-            <span className='image-marker__marker--default'>{index + 1}</span>
-            <Rating
-              index={entry.index}
-              defaultValue={entry.severity}
-              onUpdate={() => {}}
-              disabled
-            />
-          </div>
-        ))}
-      </div>
-      <div className='marker-div'>
-        <ImageMarker src={humanImage} markers={saved.markers ?? []} />
-      </div>
-    </div>
-  );
-};
-
-export default ViewPatientImageMarker;

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -1,481 +1,240 @@
-import {
+import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-  Button,
+import { useFormik } from "formik";
-  Checkbox,
+import * as yup from "yup";
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  FormLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-  TextField,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import * as yup from 'yup';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import React, { useEffect } from 'react';
 
-interface Patient {
+interface FormValues {
-  maritalStatus: string | undefined;
+  maritalStatus: string;
-  numberOfChildren: string | undefined;
+  numberOfChildren: string;
-  occupation: string | undefined;
+  ages: string;
-  hoursPerWeek: number | string | undefined;
+  occupation: string;
-  employer: string | undefined;
+  hoursPerWeek: number | string;
-  businessPhone: string | undefined;
+  employer: string;
-  spouseName: string | undefined;
+  businessPhone: string;
-  spouseEmployer: string | undefined;
+  spouseName: string;
-  spouseBusinessPhone: string | undefined;
+  spouseEmployer: string;
-  emergencyContact: string | undefined;
+  spouseBusinessPhone: string;
-  relationship: string | undefined;
+  emergencyContact: string;
-  spousePhone: string | undefined;
+  relationship: string;
+  spousePhone: string;
 }
 
-type Props = {
+const validationSchema = yup.object({
-  handleFormSection2Data: (
+  maritalStatus:yup.string().required("Marital Status is required"),
-    maritalStatus: string | undefined,
+  numberOfChildren:yup.string().required("Full name is required"),
-    numberOfChildren: string | undefined,
+  ages:yup.string().required("Full name is required"),
-    occupation: string | undefined,
+  occupation:yup.string().required("Occupation is required"),
-    hoursPerWeek: number | string | undefined,
+//   hoursPerWeek: yup.number().required('Required'),
-    employer: string | undefined,
+//   employer:yup.string().required("Full name is required"),
-    businessPhone: string | undefined,
+//   businessPhone:yup.string().required("Full name is required"),
-    spouseName: string | undefined,
+  spouseName:yup.string().required("Spouse name is required"),
-    spouseEmployer: string | undefined,
+//   spouseEmployer:yup.string().required("Full name is required"),
-    spouseBusinessPhone: string | undefined,
+//   spouseBusinessPhone:yup.string().required("Full name is required"),
-    emergencyContact: string | undefined,
+  emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-    relationship: string | undefined,
+  relationship:yup.string().required("Relationship is required"),
-    spousePhone: string | undefined
+  spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-  ) => void;
+});
-  patientDataDiplay: any;
-  type: string;
-};
 
-export default function FamilyFormSection({
+export default function FamilyFormSection(){
-  handleFormSection2Data,
+    const formik = useFormik<FormValues>({
-  patientDataDiplay,
+        initialValues:{
-  type,
+            maritalStatus:'',
-}: Props) {
+            numberOfChildren:'',
-  const [patient, setPatient] = React.useState<Patient>({
+            ages:'',
-    maritalStatus: '',
+            occupation:'',
-    numberOfChildren: '',
+            hoursPerWeek:'',
-    occupation: '',
+            employer:'',
-    hoursPerWeek: '',
+            businessPhone:'',
-    employer: '',
+            spouseName:'',
-    businessPhone: '',
+            spouseEmployer:'',
-    spouseName: '',
+            spouseBusinessPhone:'',
-    spouseEmployer: '',
+            emergencyContact:'',
-    spouseBusinessPhone: '',
+            relationship:'',
-    emergencyContact: '',
+            spousePhone:''
-    relationship: '',
+        },
-    spousePhone: '',
+        validationSchema,
-  });
+        onSubmit:(values)=>{
-
+            console.log(values);
-  useEffect(() => {
+        }
-    handleFormSection2Data(
+    })
-      patient.maritalStatus,
+    return(
-      patient.numberOfChildren,
+        <>
-      patient.occupation,
+        <form onSubmit={formik.handleSubmit}>
-      patient.hoursPerWeek,
+        <Grid container direction="row">
-      patient.employer,
+            <Grid item xs={8} className='collapsable-form-style-radioButtons'>
-      patient.businessPhone,
+            <FormControl>
-      patient.spouseName,
-      patient.spouseEmployer,
-      patient.spouseBusinessPhone,
-      patient.emergencyContact,
-      patient.relationship,
-      patient.spousePhone
-    );
-  }, [patient]);
-
-  return (
-    <>
-      <Grid container direction='row'>
-        <Grid item xs={8} className='collapsable-form-style-radioButtons'>
-          <FormControl>
             <FormLabel>Marital Status</FormLabel>
-            <RadioGroup
+                <RadioGroup
-              aria-labelledby='demo-radio-buttons-group-label'
+                    aria-labelledby="demo-radio-buttons-group-label"
-              name='maritalStatus'
+                    defaultValue="married"
-              defaultValue={
+                    name="maritalStatus"
-                type == 'display'
+                    onChange={formik.handleChange}
-                  ? patientDataDiplay && patientDataDiplay.maritalStatus
+                    value={formik.values.maritalStatus}
-                  : patient.maritalStatus
+                    sx={{display:'flex', flexDirection:'row'}}
-              }
+                    // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
-              sx={{ display: 'flex', flexDirection: 'row' }}
+                    // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
-              onChange={(e) => {
+                    >
-                setPatient((prevValues: any) => ({
+                    <FormControlLabel value="married" control={<Radio />} label="Married" />
-                  ...prevValues,
+                    <FormControlLabel value="single" control={<Radio />} label="Single" />
-                  maritalStatus: e.target.value,
+                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
-                }));
+                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
-              }}
+                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
-            >
+                </RadioGroup>
-              <FormControlLabel
+                
-                value='married'
+            </FormControl>
-                control={<Radio />}
+            </Grid>
-                label='Married'
+           
-                disabled={type == 'display'}
+            <Grid item xs={4} className='collapsable-form-style '></Grid>
-              />
+            <Grid item xs={4} className='collapsable-form-style '>
-              <FormControlLabel
+                <TextField 
-                value='single'
+                
-                control={<Radio />}
+                variant="outlined" 
-                label='Single'
+                type="number"
-                disabled={type == 'display'}
+                label="Number of Children/Ages" 
-              />
+                className='collapsable-form-style'
-              <FormControlLabel
+                name='numberOfChildren'
-                value='widowed'
+                onChange={formik.handleChange}
-                control={<Radio />}
+                value={formik.values.numberOfChildren}
-                label='Widowed'
+                onBlur={formik.handleBlur}
-                disabled={type == 'display'}
+                // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
-              />
+                // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
-              <FormControlLabel
+                />
-                value='seperated'
+            </Grid>
-                control={<Radio />}
+            <Grid item xs={4} className='collapsable-form-style '>
-                label='Seperated'
+                <TextField 
-                disabled={type == 'display'}
+                // required
-              />
+                variant="outlined" 
-              <FormControlLabel
+                label="Occupation" 
-                value='divorced'
+                className='collapsable-form-style'
-                control={<Radio />}
+                name='occupation'
-                label='Divorced'
+                onChange={formik.handleChange}
-                disabled={type == 'display'}
+                value={formik.values.occupation}
-              />
+                onBlur={formik.handleBlur}
-            </RadioGroup>
+                // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
-          </FormControl>
+                // helperText={formik.touched.occupation && formik.errors.occupation}
-        </Grid>
+                />
+               
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
+                 <TextField 
+                 variant="outlined" 
+                 label="Hours/Week" 
+                 type="number" 
+                 className='collapsable-form-style'
+                 name='hoursPerWeek'
+                 onChange={formik.handleChange}
+                 value={formik.values.hoursPerWeek}
+                 onBlur={formik.handleBlur}
+                 />
+                 
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
+                <TextField 
+                variant="outlined" 
+                label="Employer" 
+                className='collapsable-form-style'
+                name='employer'
+                onChange={formik.handleChange}
+                value={formik.values.employer}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
+                <TextField 
+                variant="outlined" 
+                label="Business Phone" 
+                type="number"
+                className='collapsable-form-style'
+                name='businessPhone'
+                onChange={formik.handleChange}
+                value={formik.values.businessPhone}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
 
-        <Grid item xs={4} className='collapsable-form-style '></Grid>
+            <Grid item xs={4} className='collapsable-form-style '></Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            type='number'
-            label='Number of Children/Ages'
-            className='collapsable-form-style'
-            name='numberOfChildren'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                numberOfChildren: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.numberOfChildren
-                : patient.numberOfChildren
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            // required
-            variant='outlined'
-            label='Occupation'
-            className='collapsable-form-style'
-            name='occupation'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                occupation: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.occupation
-                : patient.occupation
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Hours/Week'
-            type='number'
-            className='collapsable-form-style'
-            name='hoursPerWeek'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                hoursPerWeek: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.hoursPerWeek
-                : patient.hoursPerWeek
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Employer'
-            className='collapsable-form-style'
-            name='employer'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                employer: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display' ? patientDataDiplay && patientDataDiplay.employer : patient.employer
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Business Phone'
-            type='number'
-            className='collapsable-form-style'
-            name='businessPhone'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                businessPhone: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.businessPhone
-                : patient.businessPhone
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style '> 
-          item
+                <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
-          xs={12}
+            </Grid>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        ></Grid>
 
-        <Grid item xs={12} className='collapsable-form-style '>
+            <Grid item xs={4} className='collapsable-form-style '>
-          <FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
+                 <TextField 
-        </Grid>
+                 variant="outlined" 
+                 label="Spouse's Name" 
+                 className='collapsable-form-style'
+                 name='spouseName'
+                 onChange={formik.handleChange}
+                 value={formik.values.spouseName}
+                 onBlur={formik.handleBlur}
+                 />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
+                 <TextField 
+                 variant="outlined" 
+                 label="Spouse's Employer" 
+                 className='collapsable-form-style'
+                 name='spouseEmployer'
+                 onChange={formik.handleChange}
+                 value={formik.values.spouseEmployer}
+                 onBlur={formik.handleBlur}
+                 />
+            </Grid>
+            <Grid item xs={4} className='collapsable-form-style '>
+                  <TextField 
+                  variant="outlined" 
+                  label="Business Phone" 
+                  type="number"
+                  className='collapsable-form-style'
+                  name='spouseBusinessPhone'
+                  onChange={formik.handleChange}
+                  value={formik.values.spouseBusinessPhone}
+                  onBlur={formik.handleBlur}
+                  />
+            </Grid>
+            
+            <Grid item xs={12} className='collapsable-form-style '> 
+                <FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
+            </Grid>
+           
 
-        <Grid
+            <Grid item xs={4} className='collapsable-form-style '>
-          item
+                   <TextField 
-          xs={12}
+                   variant="outlined" 
-          xl={3}
+                   label="Emergency Contact" 
-          lg={4}
+                   type="number"
-          md={6}
+                   className='collapsable-form-style'
-          sm={12}
+                   name='emergencyContact'
-          className='collapsable-form-style '
+                   onChange={formik.handleChange}
-        >
+                   value={formik.values.emergencyContact}
-          <TextField
+                   onBlur={formik.handleBlur}
-            variant='outlined'
+                   />
-            label="Spouse's Name"
+            </Grid>
-            className='collapsable-form-style'
+            <Grid item xs={4} className='collapsable-form-style '>
-            name='spouseName'
+                    <TextField 
-            onChange={(e) => {
+                    variant="outlined" 
-              setPatient((prevValues: any) => ({
+                    label="Relationship" 
-                ...prevValues,
+                    className='collapsable-form-style'
-                spouseName: e.target.value,
+                    name='relationship'
-              }));
+                    onChange={formik.handleChange}
-            }}
+                    value={formik.values.relationship}
-            value={
+                    onBlur={formik.handleBlur}
-              type == 'display'
+                    />
-                ? patientDataDiplay && patientDataDiplay.spouseName
+            </Grid>
-                : patient.spouseName
+            <Grid item xs={4} className='collapsable-form-style '>
-            }
+                     <TextField 
-            disabled={type == 'display'}
+                     variant="outlined" 
-          />
+                     type="number"
+                     label="Phone" 
+                     className='collapsable-form-style'
+                     name='spousePhone'
+                     onChange={formik.handleChange}
+                     value={formik.values.spousePhone}
+                     onBlur={formik.handleBlur}
+                     />
+            </Grid>
         </Grid>
-        <Grid
+        </form>
-          item
+        </>
-          xs={12}
+    )
-          xl={3}
+};
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label="Spouse's Employer"
-            className='collapsable-form-style'
-            name='spouseEmployer'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                spouseEmployer: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.spouseEmployer
-                : patient.spouseEmployer
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Business Phone'
-            type='number'
-            className='collapsable-form-style'
-            name='spouseBusinessPhone'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                spouseBusinessPhone: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.spouseBusinessPhone
-                : patient.spouseBusinessPhone
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-
-        <Grid item xs={12} className='collapsable-form-style '>
-          <FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Emergency Contact'
-            className='collapsable-form-style'
-            name='emergencyContact'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                emergencyContact: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.emergencyContact
-                : patient.emergencyContact
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label='Relationship'
-            className='collapsable-form-style'
-            name='relationship'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                relationship: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.relationship
-                : patient.relationship
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            type='number'
-            label='Phone'
-            className='collapsable-form-style'
-            name='spousePhone'
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                spousePhone: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.spousePhone
-                : patient.spousePhone
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-      </Grid>
-    </>
-  );
-}

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -2,250 +2,147 @@ import * as React from 'react';
 import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useEffect } from 'react';
 
-interface Patient {
+interface FormValues {
-  physicianname: string |undefined;
+  physicianname: string;
-  physiciancity: string |undefined;
+  physiciancity: string;
-  physicianstate: string |undefined;
+  physicianstate: string;
-  physicianphone: string |undefined;
+  physicianphone: string;
-  chiropractorName: string |undefined;
+  chiropractorName: string;
-  chiropractorState: string |undefined;
+  chiropractorState: string;
-  xray: string|undefined;
+  xray: boolean;
-  haveChiropractor: string|undefined;
+  ctScan: boolean;
-  reference: string|undefined;
+  cdImages: boolean;
-  visitDetails: string |undefined;
+  visitDetails: string;
-  cellPhoneProvider: string |undefined;
+  cellPhoneProvider: string;
 }
 
-type Props = {
+const validationSchema = Yup.object({
-    handleFormSection3Data:(
+  familyphysician: Yup.string().required('Required'),
-        physicianname?: string |undefined,
+  city: Yup.string().required('Required'),
-        physiciancity?: string |undefined,
+  state: Yup.string().required('Required'),
-        physicianstate?: string |undefined,
+  phone: Yup.string().required('Required'),
-        physicianphone?: string |undefined,
+  chiropractorName: Yup.string().required('Required'),
-        chiropractorName?: string |undefined,
+  xray: Yup.boolean().required('Required'),
-        chiropractorState?: string |undefined,
+  ctScan: Yup.boolean().required('Required'),
-        xray?: string|undefined,
+  cdImages: Yup.boolean().required('Required'),
-        haveChiropractor?: string|undefined,
+  visitDetails: Yup.string().required('Required'),
-        reference?: string|undefined,
+  cellPhoneProvider: Yup.string().required('Required'),
-        visitDetails?: string |undefined,
+});
-        cellPhoneProvider?: string |undefined,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
-
-export default function MedicalHistoryForm({handleFormSection3Data,patientDataDiplay,type}:Props){
-    
-    const [patient, setPatient] = React.useState<Patient>({
-        physicianname: '',
-        physiciancity: '',
-        physicianstate: '',
-        physicianphone: '',
-        chiropractorName: '',
-        chiropractorState: '',
-        xray: '',
-        haveChiropractor: '',
-        reference: '',
-        visitDetails: '',
-        cellPhoneProvider: '',
-      });
-   
-      useEffect(()=>{
-        handleFormSection3Data(
-            patient.physicianname,
-            patient.physiciancity,
-            patient.physicianstate,
-            patient.physicianphone,
-            patient.chiropractorName,
-            patient.chiropractorState,
-            patient.xray,
-            patient.haveChiropractor,
-            patient.reference,
-            patient.visitDetails,
-            patient.cellPhoneProvider,
-        )
-      },[patient])
 
+export default function MedicalHistoryForm(){
+    const formik = useFormik<FormValues>({
+        initialValues:{
+            physicianname: '',
+            physiciancity: '',
+            physicianstate: '',
+            physicianphone: '',
+            chiropractorName: '',
+            chiropractorState: '',
+            xray: false,
+            ctScan: false,
+            cdImages: false,
+            visitDetails: '',
+            cellPhoneProvider: '',
+        },
+        validationSchema,
+        onSubmit:(values)=>{
+            console.log(values);
+        }
+    })
     return(
         <>
+        <form onSubmit={formik.handleSubmit}>
         <Grid item xs={12} className='collapsable-form-style '> 
             <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
         </Grid>
 
         <Grid container direction="row">
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Family physician" 
                 name='physicianname'
-                onChange={(e)=>{
+                onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                value={formik.values.physicianname}
-                        ...prevValues,
+                onBlur={formik.handleBlur}
-                        physicianname: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
-                disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City" 
                 name='physiciancity'
-                onChange={(e)=>{
+                onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                value={formik.values.physiciancity}
-                        ...prevValues,
+                onBlur={formik.handleBlur}
-                        physiciancity: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
-                disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="State" 
                  name='physicianstate'
-                 onChange={(e)=>{
+                 onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                 value={formik.values.physicianstate}
-                        ...prevValues,
+                 onBlur={formik.handleBlur}
-                        physicianstate: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
-                disabled={type=='display'}
                  />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Phone" 
                 type="number"
                 name='physicianphone'
-                onChange={(e)=>{
+                onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                value={formik.values.physicianphone}
-                        ...prevValues,
+                onBlur={formik.handleBlur}
-                        physicianphone: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
-                disabled={type=='display'}
                 />
             </Grid>
             
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            xs={12}
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style'></Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style'></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
+                    // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
+                    // defaultValue="yes"
                     name="radio-buttons-group"
-                    onChange={(e)=>{
+                    onChange={formik.handleChange}
-                        setPatient((prevValues) => ({
-                            ...prevValues,
-                            haveChiropractor: e.target.value,
-                          }));
-                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
+                    <FormControlLabel value="no" control={<Radio />} label="No" />
                 </RadioGroup>
                 </FormControl>
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="Chiropractor's Name" 
                  name='chiropractorName'
-                 onChange={(e)=>{
+                 onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                 value={formik.values.chiropractorName}
-                        ...prevValues,
+                 onBlur={formik.handleBlur}
-                        chiropractorName: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
-                disabled={type=='display'}
                  />
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="City/State" 
                  name='chiropractorState'
-                 onChange={(e)=>{
+                 onChange={formik.handleChange}
-                    setPatient((prevValues) => ({
+                 value={formik.values.chiropractorState}
-                        ...prevValues,
+                 onBlur={formik.handleBlur}
-                        chiropractorState: e.target.value,
-                      }));
-                }}
-                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
-                disabled={type=='display'}
                  />
             </Grid>
         </Grid>
@@ -256,18 +153,13 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
+                    // defaultValue="yes"
                     name="radio-buttons-group"
-                    onChange={(e)=>{
+                    onChange={formik.handleChange}
-                        setPatient((prevValues) => ({
-                            ...prevValues,
-                            xray: e.target.value,
-                          }));
-                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel disabled={type=='display'} value="yes" control={<Radio />} label="Yes" />
+                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                    <FormControlLabel disabled={type=='display'} value="no" control={<Radio />} label="No" />
+                    <FormControlLabel value="no" control={<Radio />} label="No" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -278,22 +170,17 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
+                    // defaultValue="physician"
                     name="radio-buttons-group"
-                    onChange={(e)=>{
+                    onChange={formik.handleChange}
-                        setPatient((prevValues) => ({
-                            ...prevValues,
-                            reference: e.target.value,
-                          }));
-                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
+                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
-                    <FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
+                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
-                    <FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
+                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
-                    <FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
+                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
-                    <FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
+                    <FormControlLabel value="google" control={<Radio />} label="Google" />
-                    <FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
+                    <FormControlLabel value="others" control={<Radio />} label="Others" />
                 </RadioGroup>
             </FormControl>
         </Grid>
@@ -304,21 +191,17 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 <RadioGroup
                     // value={patient.gender}
                     aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
+                    // defaultValue="email"
                     name="radio-buttons-group"
-                    onChange={(e)=>{
+                    onChange={formik.handleChange}
-                        setPatient((prevValues) => ({
-                            ...prevValues,
-                            cellPhoneProvider: e.target.value,
-                          }));
-                    }}
                     sx={{display:'flex', flexDirection:'row'}}
                 >
-                    <FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
+                    <FormControlLabel value="email" control={<Radio />} label="Email" />
-                    <FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
+                    <FormControlLabel value="text" control={<Radio />} label="Text" />
                 </RadioGroup>
             </FormControl>
         </Grid>
+        </form>
         </>
     )}
             

src/Components/PatientForm/OtherDetails8.tsx

@@ -1,318 +1,178 @@
-import {
+import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
-  Grid,
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-  FormLabel,
+import React from "react";
-  TextField,
-  FormControl,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-} from '@mui/material';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import React, { useEffect } from 'react';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
 
-interface Patient {
+interface FormValues {
-  familyHistory: string;
+    familyHistory: string;
-  sleep: string;
+    sleep: string;
-  pillow: string;
+    pillow:string;
-  orthotics: string;
+    orthotics:string;
-  brestExam: any;
+    brestExam: any;
-  pregnancy: string;
+    pregnancy:string;
-  menstralCycle: any;
+    menstralCycle: any;
-}
+  }
 
-type Props = {
+export default function OtherDetails8(){
-  handleFormSection8Data: (
+  
-    familyHistory: string | undefined,
+    const [values, setValues] = React.useState<FormValues>({
-    sleep: string | undefined,
+        familyHistory: '',
-    pillow: string | undefined,
+        sleep: '',
-    orthotics: string | undefined,
+        pillow:'',
-    brestExam: any,
+        orthotics:'',
-    pregnancy: string | undefined,
+        brestExam: dayjs('2022-04-17'),
-    menstralCycle: any
+        pregnancy:'',
-  ) => void;
+        menstralCycle: dayjs('2022-04-17'),
-  patientDataDiplay: any;
+    });
-  type: string;
-};
 
-export default function OtherDetails8({
+    const formatDate = (inputDate:any) => {
-  handleFormSection8Data,
+      const date = new Date(inputDate);
-  patientDataDiplay,
+      const year = date.getUTCFullYear();
-  type,
+      const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-}: Props) {
+      const day = String(date.getUTCDate()+1).padStart(2, '0');
-  const [patient, setPatient] = React.useState<Patient>({
+      
-    familyHistory: '',
+      return `${year}-${month}-${day}`;
-    sleep: '',
+    };
-    pillow: '',
-    orthotics: '',
-    brestExam: dayjs('2022-04-17'),
-    pregnancy: '',
-    menstralCycle: dayjs('2022-04-17'),
-  });
 
-  useEffect(() => {
+    console.log("dsfdsfsdf",values)
-    handleFormSection8Data(
+    
-      patient.familyHistory,
+    return(
-      patient.sleep,
+        <>
-      patient.pillow,
+        <Grid container direction="row">
-      patient.orthotics,
+        <Grid item xs={12} className='collapsable-form-style-multiline'>
-      (patient.brestExam = dayjs(patient.brestExam)),
+          <FormLabel>Family history and health status:</FormLabel><br></br>
-      patient.pregnancy,
+                <TextField 
-      (patient.menstralCycle = dayjs(patient.menstralCycle))
+                multiline
-    );
+                variant="outlined"
-  }, [patient]);
+                label="" 
-
+                name='explanation'
-  const formatDate = (inputDate: any) => {
+                onChange={(event:any) => {
-    const date = new Date(inputDate);
+                  setValues((prevValues) => ({
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(date.getUTCDate() + 1).padStart(2, '0');
-
-    return `${year}-${month}-${day}`;
-  };
-
-  return (
-    <>
-      <Grid container direction='row'>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style-multiline'
-        >
-          <FormLabel>Family history and health status:</FormLabel>
-          <br></br>
-          <TextField
-            multiline
-            variant='outlined'
-            label=''
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.familyHistory
-                : patient.familyHistory
-            }
-            disabled={type == 'display'}
-            onChange={(event: any) => {
-              setPatient((prevValues) => ({
-                ...prevValues,
-                familyHistory: event.target.value,
-              }));
-            }}
-          />
-        </Grid>
-
-        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          <FormControl>
-            <FormLabel>How do you sleep?</FormLabel>
-            <RadioGroup
-              sx={{ display: 'flex', flexDirection: 'row' }}
-              defaultValue={
-                type == 'display' ? patientDataDiplay && patientDataDiplay.sleep : patient.sleep
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  sleep: event.target.value,
-                }));
-              }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Back'
-                control={<Radio />}
-                label='Back'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Side'
-                control={<Radio />}
-                label='Side'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Stomach'
-                control={<Radio />}
-                label='Stomach'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-
-        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          <FormControl>
-            <FormLabel>Do you use a pillow?</FormLabel>
-            <RadioGroup
-              sx={{ display: 'flex', flexDirection: 'row' }}
-              defaultValue={
-                type == 'display' ? patientDataDiplay && patientDataDiplay.pillow : patient.pillow
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  pillow: event.target.value,
-                }));
-              }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Yes'
-                control={<Radio />}
-                label='Yes'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='No'
-                control={<Radio />}
-                label='No'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-
-        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          <FormControl>
-            <FormLabel>Do you wear orthotics or arch support?</FormLabel>
-            <RadioGroup
-              sx={{ display: 'flex', flexDirection: 'row' }}
-              defaultValue={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.orthotics
-                  : patient.orthotics
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  orthotics: event.target.value,
-                }));
-              }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Yes'
-                control={<Radio />}
-                label='Yes'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='No'
-                control={<Radio />}
-                label='No'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style-radioButtons'
-        >
-          <FormLabel>Date of last gynecological and brest exam?</FormLabel>
-          <br></br>
-          <FormControl>
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-              <DatePicker
-                value={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.brestExam
-                    : patient.brestExam
-                }
-                disabled={type == 'display'}
-                onChange={(event) => {
-                  const formattedDate = formatDate(event);
-                  setPatient((prevValues) => ({
                     ...prevValues,
-                    brestExam: formattedDate,
+                    familyHistory: event.target.value,
                   }));
                 }}
-                renderInput={(params) => (
+                />
-                  <TextField variant='outlined' {...params} />
+          </Grid>
-                )}
-              />
-            </LocalizationProvider>
-          </FormControl>
-        </Grid>
 
-        {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+                <FormControl>
+                    <FormLabel>How do you sleep?</FormLabel>
+                    <RadioGroup
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            educationLevel: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Back" control={<Radio />} label="Back" />
+                        <FormControlLabel value="Side" control={<Radio />} label="Side" />
+                        <FormControlLabel value="Stomach" control={<Radio />} label="Stomach" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+                <FormControl>
+                    <FormLabel>Do you use a pillow?</FormLabel>
+                    <RadioGroup
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            pillow: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+                <FormControl>
+                    <FormLabel>Do you wear orthotics or arch support?</FormLabel>
+                    <RadioGroup
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            orthotics: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
+                <FormControl>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                    <DatePicker
+                    value={values.brestExam}
+                    onChange={(event) => {
+                      const formattedDate = formatDate(event)
+                      setValues((prevValues) => ({
+                        ...prevValues,
+                        brestExam: formattedDate,
+                      }));
+                      }}
+                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
+                    />
+                </LocalizationProvider>
+              </FormControl>
+          </Grid>
+
+          {/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
                 <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
           </Grid> */}
 
-        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          <FormControl>
+                <FormControl>
-            <FormLabel>Possible pregnancy?</FormLabel>
+                    <FormLabel>Possible pregnancy?</FormLabel>
-            <RadioGroup
+                    <RadioGroup
-              sx={{ display: 'flex', flexDirection: 'row' }}
+                        sx={{display:'flex', flexDirection:'row'}}
-              defaultValue={
+                        onChange={(event) => {
-                type == 'display'
+                          setValues((prevValues) => ({
-                  ? patientDataDiplay && patientDataDiplay.pregnancy
+                            ...prevValues,
-                  : patient.pregnancy
+                            orthotics: event.target.value,
-              }
+                          }));
-              onChange={(event) => {
+                        }}
-                setPatient((prevValues) => ({
+                        >
-                  ...prevValues,
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                  pregnancy: event.target.value,
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                }));
+                    </RadioGroup>
-              }}
+              </FormControl>
-            >
+          </Grid>
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='Yes'
-                control={<Radio />}
-                label='Yes'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='No'
-                control={<Radio />}
-                label='No'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-          item
+            <FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
-          xs={12}
+                <FormControl>
-          xl={3}
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-          lg={4}
+                    <DatePicker
-          md={6}
+                    value={values.menstralCycle}
-          sm={12}
+                    onChange={(event) => {
-          className='collapsable-form-style-radioButtons'
+                      const formattedDate = formatDate(event)
-        >
+                      setValues((prevValues) => ({
-          <FormLabel>Date of last menstrual cycle?</FormLabel>
+                        ...prevValues,
-          <br></br>
+                        menstralCycle: formattedDate,
-          <FormControl>
+                      }));
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                      }}
-              <DatePicker
+                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                value={
+                    />
-                  type == 'display'
+                </LocalizationProvider>
-                    ? patientDataDiplay && patientDataDiplay.menstralCycle
+              </FormControl>
-                    : patient.menstralCycle
+          </Grid>
-                }
+
-                disabled={type == 'display'}
+       
-                onChange={(event) => {
-                  const formattedDate = formatDate(event);
-                  setPatient((prevValues) => ({
-                    ...prevValues,
-                    menstralCycle: formattedDate,
-                  }));
-                }}
-                renderInput={(params) => (
-                  <TextField variant='outlined' {...params} />
-                )}
-              />
-            </LocalizationProvider>
-          </FormControl>
         </Grid>
-      </Grid>
+        </>
-    </>
+    )
-  );
+}
-}

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -1,587 +1,266 @@
 import * as React from 'react';
-import {
+import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
-  Checkbox,
-  FormControlLabel,
-  TextField,
-  FormGroup,
-  Grid,
-  FormControl,
-  FormLabel,
-  Radio,
-  RadioGroup,
-} from '@mui/material';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import path from 'path';
-import { useEffect } from 'react';
 
-interface Patient {
+interface FormValues {
-  chiefComplaint: string;
+    chiefComplaint:string;
-  painWorse: string[];
+    painQuality: string[];
-  painBetter: string[];
+    painDuration: string;
-  painQuality: string[];
+    currentTreatment: string;
-  painWorstTime: string[];
+    treatmentResults: string;
-  currentComplaintIssues: string[];
+    treatmentGoal: string;
-  painDuration: string;
+  }
-  currentTreatment: string;
+  
-  treatmentGoal: string;
+  const validationSchema = Yup.object({
-  selfTreatment: string;
+    chiefComplaint:Yup.array().required('Required'),
-}
+    painQuality: Yup.array().required('Required'),
-
+    painDuration: Yup.string().required('Required'),
-type Props = {
+    currentTreatment: Yup.string().required('Required'),
-  handleFormSection4Data: (
+    treatmentResults: Yup.string().required('Required'),
-    chiefComplaint: string | undefined,
+    treatmentGoal: Yup.string().required('Required'),
-    painWorse: any,
-    painBetter: any,
-    painQuality: any,
-    painWorstTime: any,
-    currentComplaintIssues: any,
-    painDuration: string | undefined,
-    currentTreatment: string | undefined,
-    treatmentGoal: string | undefined,
-    selfTreatment: string | undefined
-  ) => void;
-  patientDataDiplay: any;
-  type: string;
-};
-
-export default function PainAnalysisSection4({
-  handleFormSection4Data,
-  patientDataDiplay,
-  type,
-}: Props) {
-  const [patient, setPatient] = React.useState<Patient>({
-    chiefComplaint: '',
-    painWorse: [],
-    painBetter: [],
-    painQuality: [],
-    painWorstTime: [],
-    currentComplaintIssues: [],
-    painDuration: '',
-    currentTreatment: '',
-    treatmentGoal: '',
-    selfTreatment: '',
   });
 
-  useEffect(() => {
+export default function PainAnalysisSection4(){
-    handleFormSection4Data(
+    const formik = useFormik<FormValues>({
-      patient.chiefComplaint,
+        initialValues:{
-      patient.painWorse,
+            chiefComplaint:'',
-      patient.painBetter,
+            painQuality:[],
-      patient.painQuality,
+            painDuration:'',
-      patient.painWorstTime,
+            currentTreatment:'',
-      patient.currentComplaintIssues,
+            treatmentResults:'',
-      patient.painDuration,
+            treatmentGoal:'',
-      patient.currentTreatment,
+        },
-      patient.treatmentGoal,
+        validationSchema,
-      patient.selfTreatment
+        onSubmit:(values)=>{
-    );
+            console.log(values);
-  }, [patient]);
+        }
+    })
+    const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.checked) {
+          formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
+        } else {
+          formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
+        }
+    };
 
-  const handlePainWorseChange = (
+    return(
-    event: React.ChangeEvent<HTMLInputElement>
+        <>
-  ) => {
+        <form onSubmit={formik.handleSubmit}>
-    const { name, checked } = event.target;
+        <Grid item xs={12} className='collapsable-form-style '> 
-    setPatient((prevValues) => ({
+            <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
-      ...prevValues,
-      painWorse: checked
-        ? [...prevValues.painWorse, name]
-        : prevValues.painWorse.filter((item) => item !== name),
-    }));
-  };
-
-  const handlePainBetterChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const { name, checked } = event.target;
-    setPatient((prevValues) => ({
-      ...prevValues,
-      painBetter: checked
-        ? [...prevValues.painBetter, name]
-        : prevValues.painBetter.filter((item) => item !== name),
-    }));
-  };
-
-  const handlePainQualityChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const { name, checked } = event.target;
-    setPatient((prevValues) => ({
-      ...prevValues,
-      painQuality: checked
-        ? [...prevValues.painQuality, name]
-        : prevValues.painQuality.filter((item) => item !== name),
-    }));
-  };
-
-  const handlePainWorstTimeChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const { name, checked } = event.target;
-    setPatient((prevValues) => ({
-      ...prevValues,
-      painWorstTime: checked
-        ? [...prevValues.painWorstTime, name]
-        : prevValues.painWorstTime.filter((item) => item !== name),
-    }));
-  };
-
-  const handleCurrentComplaintIssuesTimeChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const { name, checked } = event.target;
-    setPatient((prevValues) => ({
-      ...prevValues,
-      currentComplaintIssues: checked
-        ? [...prevValues.currentComplaintIssues, name]
-        : prevValues.currentComplaintIssues.filter((item) => item !== name),
-    }));
-  };
-
-  return (
-    <>
-      <Grid item xs={12} className='collapsable-form-style '>
-        <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
-      </Grid>
-      <Grid container direction='row'>
-        <Grid
-          item
-          xs={12}
-          xl={10}
-          lg={10}
-          md={10}
-          sm={12}
-          className='collapsable-form-style-form7'
-        >
-          <TextField
-            variant='outlined'
-            label='How did your Chief complaint start?(ex-fell on ice)'
-            name='chiefComplaint'
-            onChange={(e) => {
-              setPatient((prevValues) => ({
-                ...prevValues,
-                chiefComplaint: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.chiefComplaint
-                : patient.chiefComplaint
-            }
-            disabled={type == 'display'}
-          />
         </Grid>
+        <Grid container direction="row">
+            <Grid item xs={4} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="How did your Chief complaint start?(ex-fell on ice)" 
+                name='chiefComplaint'
+                onChange={formik.handleChange}
+                value={formik.values.chiefComplaint}
+                onBlur={formik.handleBlur}
+                />
+            </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>What makes your pain worse?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-        >
+                        <FormControlLabel
-          <FormControl>
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-            <FormLabel>What makes your pain worse?</FormLabel>
+                            label="Bending"
-            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+                        />
-              <FormControlLabel
+                        <FormControlLabel
-                control={
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
+                            label="Standing"
-                }
+                        />
-                label='Bending'
+                        <FormControlLabel
-                disabled={type == 'display'}
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-              />
+                            label="Sitting"
-              <FormControlLabel
+                        />
-                control={
+                        <FormControlLabel
-                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                }
+                            label="Walking"
-                label='Standing'
+                        />
-                disabled={type == 'display'}
+                        <FormControlLabel
-              />
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-              <FormControlLabel
+                            label="Others"
-                control={
+                        />
-                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
+                    </FormGroup>
-                }
+                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                label='Sitting'
+                        <div>{formik.errors.painQuality}</div>
-                disabled={type == 'display'}
+                    ) : null}
-              />
+                </FormControl>
-              <FormControlLabel
+            </Grid>
-                control={
-                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
-                }
-                label='Walking'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
-                }
-                label='Others'
-                disabled={type == 'display'}
-              />
-            </FormGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>What makes your pain better?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-        >
+                        <FormControlLabel
-          <FormControl>
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-            <FormLabel>What makes your pain better?</FormLabel>
+                            label="laying down"
-            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+                        />
-              <FormControlLabel
+                        <FormControlLabel
-                control={
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                  <Checkbox
+                            label="Standing"
-                    onChange={handlePainBetterChange}
+                        />
-                    name='laying down'
+                        <FormControlLabel
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                  />
+                            label="Sitting"
-                }
+                        />
-                label='laying down'
+                        <FormControlLabel
-                disabled={type == 'display'}
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-              />
+                            label="Walking"
-              <FormControlLabel
+                        />
-                control={
+                        <FormControlLabel
-                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                }
+                            label="Others"
-                label='Standing'
+                        />
-                disabled={type == 'display'}
+                    </FormGroup>
-              />
+                </FormControl>
-              <FormControlLabel
+            </Grid>
-                control={
-                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
-                }
-                label='Sitting'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
-                }
-                label='Walking'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
-                }
-                label='Others'
-                disabled={type == 'display'}
-              />
-            </FormGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>What is the quality of your pain?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-        >
+                        <FormControlLabel
-          <FormControl>
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-            <FormLabel>What is the quality of your pain?</FormLabel>
+                            label="Sharp"
-            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+                        />
-              <FormControlLabel
+                        <FormControlLabel
-                control={
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
+                            label="Dull/Ache"
-                }
+                        />
-                label='Sharp'
+                        <FormControlLabel
-                disabled={type == 'display'}
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-              />
+                            label="Throbbing"
-              <FormControlLabel
+                        />
-                control={
+                        <FormControlLabel
-                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                }
+                            label="Tingling/Numbness/Burning"
-                label='Dull/Ache'
+                        />
-                disabled={type == 'display'}
+                        <FormControlLabel
-              />
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-              <FormControlLabel
+                            label="Others"
-                control={
+                        />
-                  <Checkbox
+                    </FormGroup>
-                    onChange={handlePainQualityChange}
+                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                    name='Throbbing'
+                        <div>{formik.errors.painQuality}</div>
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
+                    ) : null}
-                  />
+                </FormControl>
-                }
+            </Grid>
-                label='Throbbing'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    onChange={handlePainQualityChange}
-                    name='Tingling/Numbness/Burning'
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
-                  />
-                }
-                label='Tingling/Numbness/Burning'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
-                }
-                label='Others'
-                disabled={type == 'display'}
-              />
-            </FormGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>What is the worst time for your pain?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-        >
+                        <FormControlLabel
-          <FormControl>
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-            <FormLabel>What is the worst time for your pain?</FormLabel>
+                            label="Morning"
-            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+                        />
-              <FormControlLabel
+                        <FormControlLabel
-                control={
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                  <Checkbox
+                            label="During day"
-                    onChange={handlePainWorstTimeChange}
+                        />
-                    name='Morning'
+                        <FormControlLabel
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                  />
+                            label="Evening"
-                }
+                        />
-                label='Morning'
+                        <FormControlLabel
-                disabled={type == 'display'}
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-              />
+                            label="Lying in bed"
-              <FormControlLabel
+                        />
-                control={
+                        <FormControlLabel
-                  <Checkbox
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                    onChange={handlePainWorstTimeChange}
+                            label="Others"
-                    name='During day'
+                        />
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
+                    </FormGroup>
-                  />
+                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                }
+                        <div>{formik.errors.painQuality}</div>
-                label='During day'
+                    ) : null}
-                disabled={type == 'display'}
+                </FormControl>
-              />
+            </Grid>
-              <FormControlLabel
+            
-                control={
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                  <Checkbox
+                <FormControl>
-                    onChange={handlePainWorstTimeChange}
+                    <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
-                    name='Evening'
+                    <RadioGroup
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
+                        name="painDuration"
-                  />
+                        onChange={formik.handleChange}
-                }
+                        value={formik.values.painDuration}
-                label='Evening'
+                        sx={{display:'flex', flexDirection:'row'}}
-                disabled={type == 'display'}
+                        >
-              />
+                        <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
-              <FormControlLabel
+                        <FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
-                control={
+                        <FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
-                  <Checkbox
+                        <FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
-                    onChange={handlePainWorstTimeChange}
+                    </RadioGroup>
-                    name='Lying in bed'
+                </FormControl>
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
+            </Grid>
-                  />
-                }
-                label='Lying in bed'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    onChange={handlePainWorstTimeChange}
-                    name='Others'
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
-                  />
-                }
-                label='Others'
-                disabled={type == 'display'}
-              />
-            </FormGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>Has your current complaint caused any of the following?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-        >
+                        <FormControlLabel
-          <FormControl>
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-            <FormLabel>
+                            label="Muscle weakness"
-              How much of the day do you experience your chief complaint?
+                        />
-            </FormLabel>
+                        <FormControlLabel
-            <RadioGroup
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-              name='painDuration'
+                            label="Bowel/Bladder problem"
-              onChange={(e) => {
+                        />
-                setPatient((prevValues) => ({
+                        <FormControlLabel
-                  ...prevValues,
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                  painDuration: e.target.value,
+                            label="Digestion"
-                }));
+                        />
-              }}
+                        <FormControlLabel
-              value={
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                type == 'display'
+                            label="Cardiac/Respiratory"
-                  ? patientDataDiplay && patientDataDiplay.painDuration
+                        />
-                  : patient.painDuration
+                       
-              }
+                    </FormGroup>
-              sx={{ display: 'flex', flexDirection: 'row' }}
+                </FormControl>
-            >
+            </Grid>
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='0-25%'
-                control={<Radio />}
-                label='0-25%'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='25-50%'
-                control={<Radio />}
-                label='25-50%'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='50-75%'
-                control={<Radio />}
-                label='50-75%'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='75-100%'
-                control={<Radio />}
-                label='75-100%'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-          item
+                <FormControl>
-          xs={12}
+                    <FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
-          className='collapsable-form-style-radioButtons-fullwidth'
+                    <RadioGroup
-        >
+                        name="painDuration"
-          <FormControl>
+                        onChange={formik.handleChange}
-            <FormLabel>
+                        value={formik.values.painDuration}
-              Has your current complaint caused any of the following?
+                        sx={{display:'flex', flexDirection:'row'}}
-            </FormLabel>
+                        >
-            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+                        <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-              <FormControlLabel
+                        <FormControlLabel value="no" control={<Radio />} label="No" />
-                control={
+                    </RadioGroup>
-                  <Checkbox
+                    {formik.touched.painDuration && formik.errors.painDuration ? (
-                    onChange={handleCurrentComplaintIssuesTimeChange}
+                        <div>{formik.errors.painDuration}</div>
-                    name='Muscle weakness'
+                    ) : null}
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
+                </FormControl>
-                  />
+            </Grid>
-                }
-                label='Muscle weakness'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    onChange={handleCurrentComplaintIssuesTimeChange}
-                    name='Bowel/Bladder problem'
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
-                  />
-                }
-                label='Bowel/Bladder problem'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    onChange={handleCurrentComplaintIssuesTimeChange}
-                    name='Digestion'
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
-                  />
-                }
-                label='Digestion'
-                disabled={type == 'display'}
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    onChange={handleCurrentComplaintIssuesTimeChange}
-                    name='Cardiac/Respiratory'
-                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
-                  />
-                }
-                label='Cardiac/Respiratory'
-                disabled={type == 'display'}
-              />
-            </FormGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}> 
-          item
+                <FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
-          xs={12}
+            </Grid>
-          className='collapsable-form-style-radioButtons-fullwidth'
-        >
-          <FormControl>
-            <FormLabel>
-              Have you tried any self treatment (ex-ice, heat, excercise) or
-              taken any medication(over the counter or prescription)?
-            </FormLabel>
-            <RadioGroup
-              name='painDuration'
-              onChange={(e) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  selfTreatment: e.target.value,
-                }));
-              }}
-              value={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.selfTreatment
-                  : patient.selfTreatment
-              }
-              sx={{ display: 'flex', flexDirection: 'row' }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='yes'
-                control={<Radio />}
-                label='Yes'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='no'
-                control={<Radio />}
-                label='No'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
 
-        <Grid
+            <Grid item xs={4} className='collapsable-form-style-form7'>
-          item
+                <TextField 
-          xs={12}
+                variant="outlined"
-          className='collapsable-form-style'
+                label="What is your goal from treatment?(ex-play golf without pain)" 
-          sx={{ marginTop: 3 }}
+                name='treatmentGoal'
-        >
+                onChange={formik.handleChange}
-          <FormLabel sx={{ fontWeight: 600 }}>
+                value={formik.values.treatmentGoal}
-            Expected Treatment Result:
+                onBlur={formik.handleBlur}
-          </FormLabel>
+                />
+            </Grid>
+          
         </Grid>
+        </form>
 
-        <Grid
+        </>
-          item
+    )}
-          xs={12}
+            
-          xl={10}
-          lg={10}
-          md={10}
-          sm={12}
-          className='collapsable-form-style-form7'
-        >
-          <TextField
-            variant='outlined'
-            label='What is your goal from treatment?(ex-play golf without pain)'
-            name='treatmentGoal'
-            onChange={(e) => {
-              setPatient((prevValues) => ({
-                ...prevValues,
-                treatmentGoal: e.target.value,
-              }));
-            }}
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.treatmentGoal
-                : patient.treatmentGoal
-            }
-            disabled={type == 'display'}
-          />
-        </Grid>
-      </Grid>
-    </>
-  );
-}

src/Components/PatientForm/PastTreatment5.tsx

@@ -1,21 +1,11 @@
-import {
+import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
-  TextField,
-  FormControlLabel,
-  Grid,
-  Checkbox,
-  FormControl,
-  FormLabel,
-  Radio,
-  RadioGroup,
-} from '@mui/material';
 import * as React from 'react';
 import Table from '../Helper/AddNewTable';
-import { useEffect } from 'react';
 
-interface Patient {
+interface FormValues {
   generalHealth: string;
   presentProblemBefore: string;
-  ifYespresentProblemBefore: string;
+  ifYespresentProblemBefore:string;
   ifYestreatmentProvided: string;
   ifYesOutcome: string;
   strokeBloodclotting: string;
@@ -27,512 +17,244 @@ interface Patient {
   supplementsOrDrugs: string;
 }
 
-type Props = {
-  handleFormSection5Data: (
-    generalHealth: string | undefined,
-    presentProblemBefore: string | undefined,
-    ifYespresentProblemBefore: string | undefined,
-    ifYestreatmentProvided: string | undefined,
-    ifYesOutcome: string | undefined,
-    strokeBloodclotting: string | undefined,
-    ifYesstrokeBloodclotting: string | undefined,
-    dizzinessFetigue: string | undefined,
-    ifyesdizzinessFetigue: string | undefined,
-    antiColligent: string | undefined,
-    injuriesHospitalization: string | undefined,
-    supplementsOrDrugs: string | undefined
-  ) => void;
-  patientDataDiplay: any;
-  type: string;
-};
 
-export default function PastTreatment5({
+export default function PastTreatment5(){
-  handleFormSection5Data,
-  patientDataDiplay,
-  type,
-}: Props) {
-  const [patient, setPatient] = React.useState<Patient>({
-    generalHealth: '',
-    presentProblemBefore: '',
-    ifYespresentProblemBefore: '',
-    ifYestreatmentProvided: '',
-    ifYesOutcome: '',
-    strokeBloodclotting: '',
-    ifYesstrokeBloodclotting: '',
-    dizzinessFetigue: '',
-    ifyesdizzinessFetigue: '',
-    antiColligent: '',
-    injuriesHospitalization: '',
-    supplementsOrDrugs: '',
-  });
 
-  useEffect(() => {
+    const [values, setValues] = React.useState<FormValues>({
-    handleFormSection5Data(
+        generalHealth: '',
-      patient.generalHealth,
+        presentProblemBefore: '',
-      patient.presentProblemBefore,
+        ifYespresentProblemBefore:'',
-      patient.ifYespresentProblemBefore,
+        ifYestreatmentProvided:'',
-      patient.ifYestreatmentProvided,
+        ifYesOutcome:'',
-      patient.ifYesOutcome,
+        strokeBloodclotting: '',
-      patient.strokeBloodclotting,
+        ifYesstrokeBloodclotting: '',
-      patient.ifYesstrokeBloodclotting,
+        dizzinessFetigue: '',
-      patient.dizzinessFetigue,
+        ifyesdizzinessFetigue:'',
-      patient.ifyesdizzinessFetigue,
+        antiColligent: '',
-      patient.antiColligent,
+        injuriesHospitalization: '',
-      patient.injuriesHospitalization,
+        supplementsOrDrugs:''
-      patient.supplementsOrDrugs
+      });
-    );
-  }, [patient]);
 
-  return (
+    console.log("dsfdsfdsfg",values)
-    <>
+    return(
-      <form>
+        <>
-        <Grid container direction='row'>
+        <form>
-          <Grid
+      <Grid container direction="row">
-            item
+        
-            xs={12}
+      <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-            className='collapsable-form-style-radioButtons-fullwidth'
+                <FormControl>
-          >
+                    <FormLabel>Overall your General Healgth is:</FormLabel>
-            <FormControl>
+                    <RadioGroup
-              <FormLabel>Overall your General Health is:</FormLabel>
+                        name="painDuration"
-              <RadioGroup
+                        sx={{display:'flex', flexDirection:'row'}}
-                name='painDuration'
+                        onChange={(event) => {
-                defaultValue={
+                          setValues((prevValues) => ({
-                  type == 'display'
+                            ...prevValues,
-                    ? patientDataDiplay && patientDataDiplay.generalHealth
+                            generalHealth: event.target.value,
-                    : patient.generalHealth
+                          }));
-                }
+                        }}
-                sx={{ display: 'flex', flexDirection: 'row' }}
+                      >
+                        <FormControlLabel value="Excellent" control={<Radio />} label="Excellent" />
+                        <FormControlLabel value="Very Good" control={<Radio />} label="Very Good" />
+                        <FormControlLabel value="Good" control={<Radio />} label="Good" />
+                        <FormControlLabel value="Fair" control={<Radio />} label="Fair" />
+                        <FormControlLabel value="Poor" control={<Radio />} label="Poor" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+
+          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
+                <FormControl>
+                    <FormLabel>Have you experienced your present problem before?</FormLabel>
+                    <RadioGroup
+                        name="painDuration"
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            presentProblemBefore: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+          
+        
+          <Grid item xs={4} className='collapsable-form-style-form7'>
+                <TextField 
+                variant="outlined"
+                label="If yes, when?" 
+                name='treatmentGoal'
+                disabled={values.presentProblemBefore!=='Yes'}
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    generalHealth: event.target.value,
+                    ifYespresentProblemBefore: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Excellent'
-                  control={<Radio />}
-                  label='Excellent'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+            <Grid item xs={4} className='collapsable-form-style-form7'>
-                  value='Very Good'
+                <TextField 
-                  control={<Radio />}
+                variant="outlined"
-                  label='Very Good'
+                label="Was treatment provided?If yes, by whom?" 
-                />
+                name='treatmentGoal'
-                <FormControlLabel
+                disabled={values.presentProblemBefore!=='Yes'}
-                  disabled={type == 'display'}
-                  value='Good'
-                  control={<Radio />}
-                  label='Good'
-                />
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Fair'
-                  control={<Radio />}
-                  label='Fair'
-                />
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Poor'
-                  control={<Radio />}
-                  label='Poor'
-                />
-              </RadioGroup>
-            </FormControl>
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            className='collapsable-form-style-radioButtons-fullwidth'
-          >
-            <FormControl>
-              <FormLabel>
-                Have you experienced your present problem before?
-              </FormLabel>
-              <RadioGroup
-                name='painDuration'
-                defaultValue={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.presentProblemBefore
-                    : patient.presentProblemBefore
-                }
-                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    presentProblemBefore: event.target.value,
+                    ifYestreatmentProvided: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Yes'
-                  control={<Radio />}
-                  label='Yes'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+            <Grid item xs={4} className='collapsable-form-style-form7'>
-                  value='No'
+                <TextField 
-                  control={<Radio />}
+                variant="outlined"
-                  label='No'
+                label="Outcome?" 
-                />
+                name='treatmentGoal'
-              </RadioGroup>
+                disabled={values.presentProblemBefore!=='Yes'}
-            </FormControl>
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style-form7'
-          >
-            <TextField
-              variant='outlined'
-              label='If yes, when?'
-              name='treatmentGoal'
-              disabled={
-                patient.presentProblemBefore !== 'Yes' || type == 'display'
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  ifYespresentProblemBefore: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style-form7'
-          >
-            <TextField
-              variant='outlined'
-              label='Was treatment provided?If yes, by whom?'
-              name='treatmentGoal'
-              disabled={
-                patient.presentProblemBefore !== 'Yes' || type == 'display'
-              }
-              value={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.ifYestreatmentProvided
-                  : patient.ifYestreatmentProvided
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  ifYestreatmentProvided: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style-form7'
-          >
-            <TextField
-              variant='outlined'
-              label='Outcome?'
-              name='treatmentGoal'
-              disabled={
-                patient.presentProblemBefore !== 'Yes' || type == 'display'
-              }
-              value={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.ifYesOutcome
-                  : patient.ifYesOutcome
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  ifYesOutcome: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            className='collapsable-form-style-radioButtons-fullwidth'
-          >
-            <FormControl>
-              <FormLabel>
-                Have you ever had a stroke or issues with blood clotting?
-              </FormLabel>
-              <RadioGroup
-                name='painDuration'
-                defaultValue={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
-                    : patient.strokeBloodclotting
-                }
-                value={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.strokeBloodclotting
-                    : patient.strokeBloodclotting
-                }
-                sx={{ display: 'flex', flexDirection: 'row' }}
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    strokeBloodclotting: event.target.value,
+                    ifYesOutcome: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Yes'
-                  control={<Radio />}
-                  label='Yes'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+           
-                  value='No'
+
-                  control={<Radio />}
+          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                  label='No'
+                <FormControl>
-                />
+                    <FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
-              </RadioGroup>
+                    <RadioGroup
-            </FormControl>
+                        name="painDuration"
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            strokeBloodclotting: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
           </Grid>
 
-          <Grid
+          <Grid item xs={4} className='collapsable-form-style-form7'>
-            item
+                <TextField 
-            xs={12}
+                variant="outlined"
-            xl={10}
+                label="If yes, when?" 
-            lg={10}
+                name='treatmentGoal'
-            md={10}
+                disabled={values.strokeBloodclotting!=='Yes'}
-            sm={12}
-            className='collapsable-form-style-form7'
-          >
-            <TextField
-              variant='outlined'
-              label='If yes, when?'
-              name='treatmentGoal'
-              value={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.ifYesstrokeBloodclotting
-                  : patient.ifYesstrokeBloodclotting
-              }
-              disabled={
-                patient.strokeBloodclotting !== 'Yes' || type == 'display'
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  ifYesstrokeBloodclotting: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            className='collapsable-form-style-radioButtons-fullwidth'
-          >
-            <FormControl>
-              <FormLabel>
-                Have you recently experienced dizziness, unexplained fatigue,
-                weight loss or blood loss?
-              </FormLabel>
-              <RadioGroup
-                name='painDuration'
-                sx={{ display: 'flex', flexDirection: 'row' }}
-                defaultValue={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.dizzinessFetigue
-                    : patient.dizzinessFetigue
-                }
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    dizzinessFetigue: event.target.value,
+                    ifYesstrokeBloodclotting: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Yes'
-                  control={<Radio />}
-                  label='Yes'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+
-                  value='No'
+          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                  control={<Radio />}
+                <FormControl>
-                  label='No'
+                    <FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
-                />
+                    <RadioGroup
-              </RadioGroup>
+                        name="painDuration"
-            </FormControl>
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            dizzinessFetigue: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
           </Grid>
 
-          <Grid
+          <Grid item xs={4} className='collapsable-form-style-form7'>
-            item
+                <TextField 
-            xs={12}
+                variant="outlined"
-            xl={10}
+                label="If yes, when?" 
-            lg={10}
+                name='treatmentGoal'
-            md={10}
+                disabled={values.dizzinessFetigue!=='Yes'}
-            sm={12}
-            className='collapsable-form-style-form7'
-          >
-            <TextField
-              variant='outlined'
-              label='If yes, when?'
-              name='treatmentGoal'
-              disabled={patient.dizzinessFetigue !== 'Yes'}
-              value={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.ifyesdizzinessFetigue
-                  : patient.ifyesdizzinessFetigue
-              }
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  ifyesdizzinessFetigue: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            className='collapsable-form-style-radioButtons-fullwidth'
-          >
-            <FormControl>
-              <FormLabel>
-                Are you currently taking anti-coagulant or blood thinning
-                medication?
-              </FormLabel>
-              <RadioGroup
-                name='painDuration'
-                sx={{ display: 'flex', flexDirection: 'row' }}
-                defaultValue={
-                  type == 'display'
-                    ? patientDataDiplay && patientDataDiplay.antiColligent
-                    : patient.antiColligent
-                }
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    antiColligent: event.target.value,
+                    ifyesdizzinessFetigue: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Yes'
-                  control={<Radio />}
-                  label='Yes'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+
-                  value='No'
+          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                  control={<Radio />}
+                <FormControl>
-                  label='No'
+                    <FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
-                />
+                    <RadioGroup
-              </RadioGroup>
+                        name="painDuration"
-            </FormControl>
+                        sx={{display:'flex', flexDirection:'row'}}
+                        onChange={(event) => {
+                          setValues((prevValues) => ({
+                            ...prevValues,
+                            antiColligent: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    </RadioGroup>
+              </FormControl>
           </Grid>
 
-          <Grid
+          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-            item
+                <FormControl>
-            xs={12}
+                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
-            className='collapsable-form-style-radioButtons-fullwidth'
+                    <RadioGroup
-          >
+                        name="painDuration"
-            <FormControl>
+                        sx={{display:'flex', flexDirection:'row'}}
-              <FormLabel>
+                        onChange={(event) => {
-                Have you ever had any major illness, injuries, hospitalization
+                          setValues((prevValues) => ({
-                or surgeries?
+                            ...prevValues,
-              </FormLabel>
+                            injuriesHospitalization: event.target.value,
-              <RadioGroup
+                          }));
-                name='painDuration'
+                        }}
-                defaultValue={
+                        >
-                  type == 'display'
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                    ? patientDataDiplay && patientDataDiplay.injuriesHospitalization
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    : patient.injuriesHospitalization
+                    </RadioGroup>
-                }
+              </FormControl>
-                sx={{ display: 'flex', flexDirection: 'row' }}
+          </Grid>
+
+          <Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
+                <Table />
+          </Grid>
+
+          <Grid item xs={6} className='collapsable-form-style-multiline'>
+          <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
+                <TextField 
+                multiline
+                variant="outlined"
+                label="" 
+                name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    injuriesHospitalization: event.target.value,
+                    supplementsOrDrugs: event.target.value,
                   }));
                 }}
-              >
-                <FormControlLabel
-                  disabled={type == 'display'}
-                  value='Yes'
-                  control={<Radio />}
-                  label='Yes'
                 />
-                <FormControlLabel
+            </Grid>
-                  disabled={type == 'display'}
+            
-                  value='No'
+      </Grid>
-                  control={<Radio />}
+    </form>
-                  label='No'
+        </>
-                />
+    )
-              </RadioGroup>
+}
-            </FormControl>
-          </Grid>
-
-          <Grid item xs={12} sx={{ marginLeft: 2, marginBottom: 3 }}>
-            <Table
-              handleFormSection5Data={handleFormSection5Data}
-              patientDataDiplay={patientDataDiplay}
-              type={type}
-            />
-          </Grid>
-
-          <Grid
-            item
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style-multiline'
-          >
-            <FormLabel>
-              Please list current supplements or drugs you may be taking:
-            </FormLabel>
-            <TextField
-              multiline
-              variant='outlined'
-              label=''
-              name='treatmentGoal'
-              defaultValue={
-                type == 'display'
-                  ? patientDataDiplay && patientDataDiplay.supplementsOrDrugs
-                  : patient.supplementsOrDrugs
-              }
-              disabled={type == 'display'}
-              onChange={(event) => {
-                setPatient((prevValues) => ({
-                  ...prevValues,
-                  supplementsOrDrugs: event.target.value,
-                }));
-              }}
-            />
-          </Grid>
-        </Grid>
-      </form>
-    </>
-  );
-}

src/Components/PatientForm/PatientForm.tsx

@@ -1,21 +1,9 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Footer from '../Footer';
+import Footer from "../Footer";
-import Header from '../Header';
+import Header from "../Header";
-import {
+import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  FormLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-  TextField,
-} from '@mui/material';
 import PersonalSection from './PersonalSection1';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@@ -31,736 +19,232 @@ import PastTreatment5 from './PastTreatment5';
 import SystemReviewSection6 from './SyestemReviewSection6';
 import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
 import OtherDetails8 from './OtherDetails8';
-import PatientImageMarker from '../ImageMarker/PatientImageMarker';
-import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
-import AlertDialog from '../Helper/AlertDialogBox';
-import SignatureComponent from '../Helper/SignatureComponent';
-import { Link, useLocation  } from 'react-router-dom';
 
-const Accordion = styled((props: AccordionProps) => (
+interface Patient {
-  <MuiAccordion disableGutters elevation={0} square {...props} />
+    fullName: string;
-))(({ theme }) => ({
+    homePhone: string;
-  border: `1px solid ${theme.palette.divider}`,
+    cellPhone: string;
-  '&:not(:last-child)': {
+    email: string;
-    borderBottom: 0,
+    age: number;
-  },
+    dateOfBirth: string;
-  '&:before': {
+    socialSecurityNumber: string;
-    display: 'none',
+    mailingAddress: string;
-  },
+    city: string;
-}));
+    state: string;
+    zipCode: string;
+    gender: string;
+    maritalStatus: string;
+  }
 
-const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  const Accordion = styled((props: AccordionProps) => (
-  <MuiAccordionSummary
+    <MuiAccordion disableGutters elevation={0} square {...props} />
-    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+  ))(({ theme }) => ({
-    {...props}
+    border: `1px solid ${theme.palette.divider}`,
-  />
+    '&:not(:last-child)': {
-))(({ theme }) => ({
+      borderBottom: 0,
-  backgroundColor:
+    },
-    theme.palette.mode === 'dark'
+    '&:before': {
-      ? 'rgba(255, 255, 255, .05)'
+      display: 'none',
-      : 'rgba(0, 0, 0, .03)',
+    },
-  flexDirection: 'row-reverse',
+  }));
-  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+  
-    transform: 'rotate(90deg)',
+  const AccordionSummary = styled((props: AccordionSummaryProps) => (
-  },
+    <MuiAccordionSummary
-  '& .MuiAccordionSummary-content': {
+      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
-    marginLeft: theme.spacing(1),
+      {...props}
-  },
+    />
-}));
+  ))(({ theme }) => ({
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, .05)'
+        : 'rgba(0, 0, 0, .03)',
+    flexDirection: 'row-reverse',
+    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+      transform: 'rotate(90deg)',
+    },
+    '& .MuiAccordionSummary-content': {
+      marginLeft: theme.spacing(1),
+    },
+  }));
+  
+  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+    padding: theme.spacing(2),
+    borderTop: '1px solid rgba(0, 0, 0, .125)',
+  }));
 
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+export default function PatientForm(){
-  padding: theme.spacing(2),
+    const [expanded, setExpanded] = React.useState<string | false>('panel1');
-  borderTop: '1px solid rgba(0, 0, 0, .125)',
+    const [isChecked, setIsChecked] = React.useState(false);
-}));
+    const [signature,setSignature]=React.useState('');
-
+ 
-type Props = {
+    const [patient, setPatient] = React.useState<Patient>({
-  type: any;
+        fullName: "",
-};
+        homePhone: "",
-
+        cellPhone: "",
-export default function PatientForm({ type }: Props) {
+        email: "",
-  const [alertProps, setAlertProps] = React.useState<any>({});
+        age: 0,
-  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+        dateOfBirth: "",
-  const [isChecked, setIsChecked] = React.useState(false);
+        socialSecurityNumber: "",
-  const [signature, setSignature] = React.useState<any>();
+        mailingAddress: "",
-  const [section1Data, setSection1Data] = React.useState<any>({});
+        city: "",
-  const [section2Data, setSection2Data] = React.useState<any>({});
+        state: "",
-  const [section3Data, setSection3Data] = React.useState<any>({});
+        zipCode: "",
-  const [section4Data, setSection4Data] = React.useState<any>({});
+        gender: "",
-  const [section5Data, setSection5Data] = React.useState<any>({});
+        maritalStatus: "",
-  const [section6Data, setSection6Data] = React.useState<any>({});
-  const [section7Data, setSection7Data] = React.useState<any>({});
-  const [section8Data, setSection8Data] = React.useState<any>({});
-  const [allPatientData, setAllPatientData] = React.useState<any>([]);
-  const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState<boolean>(false)
-
-  const handleFormSection1Data = (
-    fullName?: string | undefined,
-    homePhone?: string | undefined,
-    cellPhone?: string | undefined,
-    email?: string | undefined,
-    age?: number | undefined | string,
-    dateOfBirth?: string | undefined,
-    socialSecurityNumber?: string | undefined,
-    mailingAddress?: string | undefined,
-    city?: string | undefined,
-    state?: string | undefined,
-    zipCode?: string | undefined,
-    gender?: string | undefined
-  ) => {
-    setSection1Data({
-      fullName,
-      homePhone,
-      cellPhone,
-      email,
-      age,
-      dateOfBirth,
-      socialSecurityNumber,
-      mailingAddress,
-      city,
-      state,
-      zipCode,
-      gender,
-    });
-  };
-
-  const handleFormSection2Data = (
-    maritalStatus: string | undefined,
-    numberOfChildren: string | undefined,
-    occupation: string | undefined,
-    hoursPerWeek: number | string | undefined,
-    employer: string | undefined,
-    businessPhone: string | undefined,
-    spouseName: string | undefined,
-    spouseEmployer: string | undefined,
-    spouseBusinessPhone: string | undefined,
-    emergencyContact: string | undefined,
-    relationship: string | undefined,
-    spousePhone: string | undefined
-  ) => {
-    setSection2Data({
-      maritalStatus,
-      numberOfChildren,
-      occupation,
-      hoursPerWeek,
-      employer,
-      businessPhone,
-      spouseName,
-      spouseEmployer,
-      spouseBusinessPhone,
-      emergencyContact,
-      relationship,
-      spousePhone,
-    });
-  };
-
-  const handleFormSection3Data = (
-    physicianname: string | undefined,
-    physiciancity: string | undefined,
-    physicianstate: string | undefined,
-    physicianphone: string | undefined,
-    chiropractorName: string | undefined,
-    chiropractorState: string | undefined,
-    xray: string | undefined,
-    haveChiropractor: string | undefined,
-    reference: string | undefined,
-    visitDetails: string | undefined,
-    cellPhoneProvider: string | undefined
-  ) => {
-    setSection3Data({
-      physicianname,
-      physiciancity,
-      physicianstate,
-      physicianphone,
-      chiropractorName,
-      chiropractorState,
-      xray,
-      haveChiropractor,
-      reference,
-      visitDetails,
-      cellPhoneProvider,
-    });
-  };
-
-  const handleFormSection4Data = (
-    chiefComplaint: string | undefined,
-    painWorse: any,
-    painBetter: any,
-    painQuality: any,
-    painWorstTime: any,
-    currentComplaintIssues: any,
-    painDuration: string | undefined,
-    currentTreatment: string | undefined,
-    treatmentGoal: string | undefined,
-    selfTreatment: string | undefined
-  ) => {
-    setSection4Data({
-      chiefComplaint,
-      painWorse,
-      painBetter,
-      painQuality,
-      painWorstTime,
-      currentComplaintIssues,
-      painDuration,
-      currentTreatment,
-      treatmentGoal,
-      selfTreatment,
-    });
-  };
-
-  const handleFormSection5Data = (
-    generalHealth: string | undefined,
-    presentProblemBefore: string | undefined,
-    ifYespresentProblemBefore: string | undefined,
-    ifYestreatmentProvided: string | undefined,
-    ifYesOutcome: string | undefined,
-    strokeBloodclotting: string | undefined,
-    ifYesstrokeBloodclotting: string | undefined,
-    dizzinessFetigue: string | undefined,
-    ifyesdizzinessFetigue: string | undefined,
-    antiColligent: string | undefined,
-    injuriesHospitalization: string | undefined,
-    supplementsOrDrugs: string | undefined
-  ) => {
-    setSection5Data({
-      generalHealth,
-      presentProblemBefore,
-      ifYespresentProblemBefore,
-      ifYestreatmentProvided,
-      ifYesOutcome,
-      strokeBloodclotting,
-      ifYesstrokeBloodclotting,
-      dizzinessFetigue,
-      ifyesdizzinessFetigue,
-      antiColligent,
-      injuriesHospitalization,
-      supplementsOrDrugs,
-    });
-  };
-
-  const handleFormSection6Data = (
-    eyes: string | undefined,
-    IntestinesBowls: string | undefined,
-    jointsBones: string | undefined,
-    allergies: string | undefined,
-    earsNoseMouth: string | undefined,
-    urinary: string | undefined,
-    skin: string | undefined,
-    psychological: string | undefined,
-    heart: string | undefined,
-    muscles: string | undefined,
-    internalOrgans: string | undefined,
-    gynecological: string | undefined,
-    lungsBreathing: string | undefined,
-    nerves: string | undefined,
-    blood: string | undefined,
-    prostate: string | undefined,
-    explanation: string | undefined
-  ) => {
-    setSection6Data({
-      eyes,
-      IntestinesBowls,
-      jointsBones,
-      allergies,
-      earsNoseMouth,
-      urinary,
-      skin,
-      psychological,
-      heart,
-      muscles,
-      internalOrgans,
-      gynecological,
-      lungsBreathing,
-      nerves,
-      blood,
-      prostate,
-      explanation,
-    });
-  };
-
-  const handleFormSection7Data = (
-    hobbies: string | undefined,
-    educationLevel: string | undefined,
-    excercise: string | undefined,
-    excerciseExplanation: string | undefined,
-    tobacco: string | undefined,
-    tobaccoExplanation: string | undefined,
-    alcohol: string | undefined,
-    alcoholExplanation: string | undefined,
-    healthyDiet: string | undefined,
-    healthyDietExplanation: string | undefined,
-    sleep: string | undefined,
-    sleepExplanation: string | undefined,
-    workSchool: string | undefined,
-    workSchoolExplanation: string | undefined,
-    familyLife: string | undefined,
-    familyLifeExplanation: string | undefined,
-    drugs: string | undefined,
-    drugsExplanation: string | undefined
-  ) => {
-    setSection7Data({
-      hobbies,
-      educationLevel,
-      excercise,
-      excerciseExplanation,
-      tobacco,
-      tobaccoExplanation,
-      alcohol,
-      alcoholExplanation,
-      healthyDiet,
-      healthyDietExplanation,
-      sleep,
-      sleepExplanation,
-      workSchool,
-      workSchoolExplanation,
-      familyLife,
-      familyLifeExplanation,
-      drugs,
-      drugsExplanation,
-    });
-  };
-
-  const handleFormSection8Data = (
-    familyHistory: string | undefined,
-    sleep: string | undefined,
-    pillow: string | undefined,
-    orthotics: string | undefined,
-    brestExam: any,
-    pregnancy: string | undefined,
-    menstralCycle: any
-  ) => {
-    setSection8Data({
-      familyHistory,
-      sleep,
-      pillow,
-      orthotics,
-      brestExam,
-      pregnancy,
-      menstralCycle,
-    });
-  };
-
-  const handleSubmit = () => {
-    const saved = JSON.parse(localStorage.getItem('entry') || '{}');
-    const newPatientData = {
-      personalInformation: section1Data,
-      familyInformation: section2Data,
-      medicalHistory: section3Data,
-      injuryDetails: section4Data,
-      pastTreatment: section5Data,
-      systemReviewQuestions: section6Data,
-      recreationalActivities: section7Data,
-      otherDetails: section8Data,
-      injuryPainDetails: saved.entries,
-      signature: signature,
-    };
-
-    // Create a copy of the existing data array and push the new patient data
-    const updatedAllPatientData = [...allPatientData, newPatientData];
-
-    // Update the state with the new array
-    setAllPatientData(updatedAllPatientData);
-
-    localStorage.setItem('patientData', JSON.stringify(newPatientData));
-
-    if (
-      section1Data.fullName !== '' &&
-      section1Data.cellPhone &&
-      /^\d{10}$/.test(section1Data.cellPhone) &&
-      section1Data.email &&
-      /^\S+@\S+\.\S+$/.test(section1Data.email) &&
-      section1Data.age &&
-      section1Data.age !== '' &&
-      Number(section1Data.age) >= 0 &&
-      section1Data.mailingAddress &&
-      section1Data.mailingAddress !== ''
-    ) {
-      TextFile();
-      setPatientDetailsButtonFlag(true)
-      setAlertProps({
-        open: true,
-        severity: 'success',
-        message: 'The patient details have been submitted!',
-        duration: 5000,
       });
-    } else {
+    
-      setAlertProps({
+      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-        open: true,
+        event.preventDefault();
-        severity: 'error',
+      };
-        message: 'Please fill all the mandatory fields with valid data!',
-        duration: 4000,
-      });
-    }
-  };
 
-  const TextFile = () => {
+      const handleExpandChange =
-    const element = document.createElement('a');
+        (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
-    //@ts-ignore
+        setExpanded(newExpanded ? panel : false);
-    const textFile = new Blob([localStorage.getItem('patientData')], {
+        };
-      type: 'text/json',
+ 
-    });
+      const handleCheckboxChange = (event:any) => {
-    element.href = URL.createObjectURL(textFile);
+        setIsChecked(event.target.checked);
-    element.download = 'patientData.json';
+      };
-    document.body.appendChild(element);
+    
-    element.click();
-  };
 
-  const handleExpandChange =
+    return(
-    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+        <>
-      setExpanded(newExpanded ? panel : false);
+            <Paper elevation={0} className='app-screen-constants'>
-    };
+                <Header/>
+                    <Paper  elevation={0} sx={{margin:4, minHeight:550}} >
+                    <form onSubmit={handleSubmit}>
+                        <Typography sx={{fontSize:20}}  gutterBottom>
+                            Confidential Patient Information
+                        </Typography>
+                        <Grid>
+                        <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
+                            
+                            <AccordionSummary
+                                expandIcon={<ExpandMoreIcon />}
+                                aria-controls="panel1a-content"
+                                id="panel1a-header"
+                                >
+                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
+                            </AccordionSummary>
+                           
+                            <AccordionDetails>
+                                <PersonalSection/>
+                            </AccordionDetails>
+                           
+                        </Accordion>
 
-  const handleCheckboxChange = (event: any) => {
+                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
-    setIsChecked(event.target.checked);
+                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-  };
+                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
+                            </AccordionSummary>
 
-  const handleAlertClose = () => {
+                            <AccordionDetails>
-    setAlertProps({});
+                                <FamilyFormSection/>
-  };
+                            </AccordionDetails>
+                        </Accordion>
 
-  const patientData = localStorage.getItem('patientData')
+                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
-    ? //@ts-ignore
+                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-      JSON.parse(localStorage.getItem('patientData'))
+                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
-    : [];
+                            </AccordionSummary>
+                            
+                            <AccordionDetails>
+                                <MedicalHistory/>
+                            </AccordionDetails>
+                        </Accordion>
 
-  return (
+                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
-    <>
+                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
-      {alertProps && alertProps.open && (
+                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
-        <AlertDialog
+                            </AccordionSummary>
-          open={alertProps.open}
+                            
-          message={alertProps.message}
+                            <AccordionDetails>
-          severity={alertProps.severity}
+                                <PainAnalysisSection4/>
-          duration={alertProps.duration}
+                            </AccordionDetails>
-          handleAlertClose={handleAlertClose}
+                        </Accordion>
-        />
-      )}
-      <Paper elevation={0} className='app-screen-constants'>
-        <Header />
-        <Paper elevation={0} sx={{ margin: '2%', minHeight: 550 }}>
-          {/* <form onSubmit={handleSubmit}> */}
-          <Typography sx={{ fontSize: 20 }} gutterBottom>
-            Confidential Patient Information
-          </Typography>
-          <Grid>
-            <Accordion
-              expanded={expanded === 'panel1'}
-              onChange={handleExpandChange('panel1')}
-            >
-              <AccordionSummary
-                // expandIcon={<ExpandMoreIcon />}
-                aria-controls='panel1a-content'
-                id='panel1a-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Personal Information
-                </Typography>
-              </AccordionSummary>
 
-              <AccordionDetails>
+                        <Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
-                <PersonalSection
+                            <AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
-                  handleFormSection1Data={handleFormSection1Data}
+                                <Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
-                  patientDataDiplay={patientData.personalInformation}
+                            </AccordionSummary>
-                  type={type}
+                            
-                />
+                            <AccordionDetails>
-              </AccordionDetails>
+                                <PastTreatment5/>
-            </Accordion>
+                            </AccordionDetails>
+                        </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
-              expanded={expanded === 'panel2'}
+                            <AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
-              onChange={handleExpandChange('panel2')}
+                                <Typography sx={{fontSize:18}}>System Review Questions</Typography>
-            >
+                            </AccordionSummary>
-              <AccordionSummary
+                            
-                aria-controls='panel2d-content'
+                            <AccordionDetails>
-                id='panel2d-header'
+                                <SystemReviewSection6/>
-              >
+                            </AccordionDetails>
-                <Typography sx={{ fontSize: 18 }}>
+                        </Accordion>
-                  Patient's Family Information
-                </Typography>
-              </AccordionSummary>
 
-              <AccordionDetails>
+                        <Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
-                <FamilyFormSection
+                            <AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
-                  handleFormSection2Data={handleFormSection2Data}
+                                <Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
-                  patientDataDiplay={patientData.familyInformation}
+                            </AccordionSummary>
-                  type={type}
+                            
-                />
+                            <AccordionDetails>
-              </AccordionDetails>
+                                <RecreationalHobbiesSection7/>
-            </Accordion>
+                            </AccordionDetails>
+                        </Accordion>
 
-            <Accordion
+                        <Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
-              expanded={expanded === 'panel3'}
+                            <AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
-              onChange={handleExpandChange('panel3')}
+                                <Typography sx={{fontSize:18}}>Other Details</Typography>
-            >
+                            </AccordionSummary>
-              <AccordionSummary
+                            
-                aria-controls='panel3d-content'
+                            <AccordionDetails>
-                id='panel3d-header'
+                                <OtherDetails8/>
-              >
+                            </AccordionDetails>
-                <Typography sx={{ fontSize: 18 }}>
+                        </Accordion>
-                  Patient's Medical History Information
-                </Typography>
-              </AccordionSummary>
 
-              <AccordionDetails>
+                        <Grid container>
-                <MedicalHistory
-                  handleFormSection3Data={handleFormSection3Data}
-                  patientDataDiplay={patientData.medicalHistory}
-                  type={type}
-                />
-              </AccordionDetails>
-            </Accordion>
 
-            <Accordion
+                        <Grid item xs={12} className='collapsable-form-style-multiline'>
-              expanded={expanded === 'panel9'}
+                          <FormGroup sx={{ marginTop: 3 }}>
-              onChange={handleExpandChange('panel9')}
+                            <FormControlLabel
-            >
+                              required
-              <AccordionSummary
+                              control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
-                aria-controls='panel9d-content'
+                              label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
-                id='panel9d-header'
+                            />
-              >
+                          </FormGroup>
-                <Typography sx={{ fontSize: 18 }}>
+                        </Grid>
-                  Patient's Pain Zone
-                </Typography>
-              </AccordionSummary>
 
-              <AccordionDetails>
+                        <Grid item xs={6} className='collapsable-form-style'>
-                {type === 'fill' ? (
+                              <TextField 
-                  <PatientImageMarker />
+                              
-                ) : (
+                              variant="outlined"
-                  <ViewPatientImageMarker />
+                              label="SIGNATURE" 
-                )}
+                              name='treatmentGoal'
-              </AccordionDetails>
+                              placeholder='Please type your name'
-            </Accordion>
+                              onChange={(event) => {
-
+                                setSignature(event.target.value)
-            <Accordion
+                              }}
-              expanded={expanded === 'panel4'}
+                              />
-              onChange={handleExpandChange('panel4')}
+                        </Grid>
-            >
+                        </Grid>                
-              <AccordionSummary
+                        <Grid>
-                aria-controls='panel4d-content'
+                          <Button
-                id='panel4d-header'
+                            type="submit"
-              >
+                            variant="contained"
-                <Typography sx={{ fontSize: 18 }}>
+                            color="primary"
-                  Patient's Injury Details
+                            sx={{ margin: 5, left: '40%', width: '200px' }}
-                </Typography>
+                            disabled={isChecked==false || signature==''}
-              </AccordionSummary>
+                          >
-
+                            Submit
-              <AccordionDetails>
+                          </Button>
-                <PainAnalysisSection4
+                        </Grid>
-                  handleFormSection4Data={handleFormSection4Data}
+                        </Grid>
-                  patientDataDiplay={patientData.injuryDetails}
+                        </form>
-                  type={type}
+                       
-                />
+                    </Paper>
-              </AccordionDetails>
+                <Footer/>
-            </Accordion>
+             </Paper>
-
+        </>
-            <Accordion
+    )
-              expanded={expanded === 'panel5'}
+}
-              onChange={handleExpandChange('panel5')}
-            >
-              <AccordionSummary
-                aria-controls='panel5d-content'
-                id='panel5d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Patient's Past Treatment Details
-                </Typography>
-              </AccordionSummary>
-
-              <AccordionDetails>
-                <PastTreatment5
-                  handleFormSection5Data={handleFormSection5Data}
-                  patientDataDiplay={patientData.pastTreatment}
-                  type={type}
-                />
-              </AccordionDetails>
-            </Accordion>
-
-            <Accordion
-              expanded={expanded === 'panel6'}
-              onChange={handleExpandChange('panel6')}
-            >
-              <AccordionSummary
-                aria-controls='panel6d-content'
-                id='panel6d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  System Review Questions
-                </Typography>
-              </AccordionSummary>
-
-              <AccordionDetails>
-                <SystemReviewSection6
-                  handleFormSection6Data={handleFormSection6Data}
-                  patientDataDiplay={patientData.systemReviewQuestions}
-                  type={type}
-                />
-              </AccordionDetails>
-            </Accordion>
-
-            <Accordion
-              expanded={expanded === 'panel7'}
-              onChange={handleExpandChange('panel7')}
-            >
-              <AccordionSummary
-                aria-controls='panel7d-content'
-                id='panel7d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>
-                  Recreational Activities/Hobbies Details
-                </Typography>
-              </AccordionSummary>
-
-              <AccordionDetails>
-                <RecreationalHobbiesSection7
-                  handleFormSection7Data={handleFormSection7Data}
-                  patientDataDiplay={patientData.recreationalActivities}
-                  type={type}
-                />
-              </AccordionDetails>
-            </Accordion>
-
-            <Accordion
-              expanded={expanded === 'panel8'}
-              onChange={handleExpandChange('panel8')}
-            >
-              <AccordionSummary
-                aria-controls='panel8d-content'
-                id='panel8d-header'
-              >
-                <Typography sx={{ fontSize: 18 }}>Other Details</Typography>
-              </AccordionSummary>
-
-              <AccordionDetails>
-                <OtherDetails8
-                  handleFormSection8Data={handleFormSection8Data}
-                  patientDataDiplay={patientData.otherDetails}
-                  type={type}
-                />
-              </AccordionDetails>
-            </Accordion>
-
-            <Grid container>
-              <Grid item xs={12} className='collapsable-form-style-multiline'>
-                <FormGroup sx={{ marginTop: 3 }}>
-                  <FormControlLabel
-                    required
-                    disabled={type == 'display'}
-                    control={
-                      <Checkbox
-                        checked={type === 'display' ? true : isChecked}
-                        onChange={handleCheckboxChange}
-                      />
-                    }
-                    label='I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history.'
-                  />
-                </FormGroup>
-              </Grid>
-
-              <Grid item xs={12}>
-                <Grid container spacing={2} flexDirection={'row'}>
-                  {type !== 'display' ? (
-                    <>
-
-                    <Grid item className='collapsable-form-style'>
-                      <FormLabel sx={{marginLeft:'10px'}}>  Signature:</FormLabel>
-                      <SignatureComponent signature={signature} setSignature={setSignature} />
-                    </Grid>
-
-                      <Grid item>
-                        <FormLabel sx={{ margin: 0, padding: 0 }}>
-                          Please verify your signature here:
-                        </FormLabel>
-                        <Box
-                          sx={{
-                            border: '1px solid black',
-                            borderRadius: 2,
-                            height: '110px',
-                            width: '250px',
-                          }}
-                        >
-                          <img
-                            src={signature}
-                            style={{ height: '110px', width: '250px' }}
-                          />
-                        </Box>
-                      </Grid>
-                    </>
-                  ) : (
-                    <Grid item>
-                      <FormLabel sx={{ margin: 0, padding: 0 }}>
-                        Your signature:
-                      </FormLabel>
-                      <Box
-                        sx={{
-                          border: '1px solid black',
-                          borderRadius: 2,
-                          height: '110px',
-                          width: '250px',
-                        }}
-                      >
-                        <img
-                          src={patientData.signature}
-                          style={{ height: '110px', width: '250px' }}
-                        />
-                      </Box>
-                    </Grid>
-                  )}
-                </Grid>
-              </Grid>
-            </Grid>
-            <Grid container flexDirection={'row-reverse'}>
-              {patientDetailsButtonFlag && type!=='display'?
-            <Grid item>
-                <Button
-                  variant='contained'
-                  color='primary'
-                  sx={{ margin: 5, width: '200px' }}
-                  onClick={(e)=>{
-                    
-                  }}
-                  component={Link}
-                  to='/view-details'
-                >
-                  View Patient Details
-                </Button>
-              </Grid>:null}
-
-              {type=='display'?
-            <Grid item>
-                <Button
-                  variant='contained'
-                  color='primary'
-                  sx={{ margin: 5, width: '200px' }}
-                  onClick={(e)=>{
-                    
-                  }}
-                  component={Link}
-                  to='/'
-                >
-                  New Patient Form
-                </Button>
-              </Grid>:null}
-
-              <Grid item>
-                <Button
-                  variant='contained'
-                  color='primary'
-                  sx={{ margin: 5, width: '200px' }}
-                  disabled={
-                    isChecked == false ||
-                    signature == undefined ||
-                    type == 'display'
-                  }
-                  onClick={handleSubmit}
-                >
-                  Submit
-                </Button>
-              </Grid>
-            </Grid>
-          </Grid>
-          {/* </form> */}
-        </Paper>
-        <Footer />
-      </Paper>
-    </>
-  );
-}

src/Components/PatientForm/PersonalSection1.tsx

@@ -1,539 +1,268 @@
 import * as React from 'react';
-import {
+import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-  Button,
+import { useFormik } from "formik";
-  FormControl,
+import * as yup from "yup";
-  FormControlLabel,
-  FormLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-  TextField,
-} from '@mui/material';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { useEffect } from 'react';
 
 interface Patient {
-  fullName: string;
+    fullName: string;
-  homePhone: string;
+    homePhone: string;
-  cellPhone: string;
+    cellPhone: string;
-  email: string;
+    email: string;
-  age: number | string;
+    age: number | string;
-  dateOfBirth: string;
+    dateOfBirth: string;
-  socialSecurityNumber: string;
+    socialSecurityNumber: string;
-  mailingAddress: string;
+    mailingAddress: string;
-  city: string;
+    city: string;
-  state: string;
+    state: string;
-  zipCode: string;
+    zipCode: string;
-  gender: string;
+    gender: string;
-}
+    maritalStatus: string;
+  }
 
-type Props = {
+  const validationSchema = yup.object({
-  handleFormSection1Data: (
+    fullName: yup.string().required("Full name is required"),
-    fullName?: string | undefined,
+    homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
-    homePhone?: string | undefined,
+    cellPhone: yup.string().required("Phone number is required").matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-    cellPhone?: string | undefined,
+    email: yup.string().required("Email is required"),
-    email?: string | undefined,
+    age: yup.number().positive().integer("Age must be a positive integer").required("Age is required"),
-    age?: number | undefined | string,
+    dateOfBirth: yup.date().required("Date of birth is required"),
-    dateOfBirth?: string | undefined,
+    socialSecurityNumber: yup.string(),
-    socialSecurityNumber?: string | undefined,
+    mailingAddress: yup.string().required("Mailing address is required"),
-    mailingAddress?: string | undefined,
+    city: yup.string().required("City is required"),
-    city?: string | undefined,
+    state: yup.string().required("State is required"),
-    state?: string | undefined,
+    zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
-    zipCode?: string | undefined,
-    gender?: string | undefined
-  ) => void;
-  patientDataDiplay: any;
-  type: string;
-};
-
-export default function PersonalSection({
-  handleFormSection1Data,
-  patientDataDiplay,
-  type,
-}: Props) {
-  const [birthDateValue, setBirthDateValue] = React.useState<any>();
-  const [patient, setPatient] = React.useState<any>({
-    fullName: '',
-    fullNameError: false,
-    homePhone: '',
-    cellPhone: '',
-    cellPhoneError: false,
-    email: '',
-    emailError: false,
-    age: '',
-    ageError: false,
-    dateOfBirth: birthDateValue,
-    socialSecurityNumber: '',
-    mailingAddress: '',
-    mailingAddressFalse: false,
-    city: '',
-    state: '',
-    zipCode: '',
-    gender: 'male',
   });
 
-  useEffect(() => {
+export default function PersonalSection(){
-    handleFormSection1Data(
-      patient.fullName,
-      patient.homePhone,
-      patient.cellPhone,
-      patient.email,
-      patient.age,
-      birthDateValue,
-      patient.socialSecurityNumber,
-      patient.mailingAddress,
-      patient.city,
-      patient.state,
-      patient.zipCode,
-      patient.gender
-    );
-  }, [patient]);
 
-  return (
+    const [startDateValue, setStartDateValue] = React.useState<any>();
-    <>
+    const [emailValue, setEmailValue]= React.useState<string>('');
-      <Grid container direction='row' className='section1-test-class'>
+    const [patient, setPatient] = React.useState<Patient>({
-        <Grid
+        fullName: "",
-          item
+        homePhone: "",
-          xs={12}
+        cellPhone: "",
-          xl={3}
+        email: "",
-          lg={4}
+        age: 0,
-          md={6}
+        dateOfBirth: "",
-          sm={12}
+        socialSecurityNumber: "",
-          className='collapsable-form-style '
+        mailingAddress:"",
-        >
+        city: "",
-          <TextField
+        state: "",
-            variant='outlined'
+        zipCode: "",
-            label="Patient's Full Name"
+        gender: "male",
-            name='fullName'
+        maritalStatus: "",
-            placeholder='Please enter your name'
+      });
-            value={
-              type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                fullName: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  fullNameError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  fullNameError: false,
-                }));
-              }
-            }}
-            required
-            error={patient.fullNameError}
-            helperText={patient.fullNameError ? 'Please enter your name' : ''}
-          />
-        </Grid>
 
-        <Grid
+      const formik = useFormik<Patient>({
-          item
+        initialValues: {
-          xs={12}
+          fullName: "",
-          xl={3}
+          homePhone: "",
-          lg={4}
+          cellPhone: "",
-          md={6}
+          email: "",
-          sm={12}
+          age: "",
-          className='collapsable-form-style'
+          dateOfBirth: "",
-        >
+          socialSecurityNumber: "",
-          <TextField
+          mailingAddress:"",
-            required
+          city: "",
-            variant='outlined'
+          state: "",
-            label='Phone Number'
+          zipCode: "",
-            name='cellPhone'
+          gender: "male",
-            type='number'
+          maritalStatus: "",
-            placeholder='Please enter your cell Phone number'
+        },
-            value={
+        validationSchema,
-              type == 'display'
+        onSubmit: (values) => {
-                ? patientDataDiplay && patientDataDiplay.cellPhone
+          // Do something with the patient data
-                : patient.cellPhone
+          console.log(values);
-            }
+        },
-            disabled={type == 'display'}
+      });
-            onChange={(e) => {
+    
-              let value = e.target.value;
+      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-              if (value[0] === '0') {
+        console.log("dsfsdfsdf",event.target.value)
-                value = value.slice(1);
+        const { name, value } = event.target;
-              }
+        setPatient((prevPatient) => ({
-              setPatient((prevValues: any) => ({
+          ...prevPatient,
-                ...prevValues,
+          [name]: value,
-                cellPhone: value,
+        }));
-              }));
+      };
-            }}
+    
-            onBlur={(e) => {
+    return(
-              if (!/^\d{10}$/.test(e.target.value)) {
+        <>
-                setPatient((prevValues: any) => ({
+        <Grid container direction="row" className='section1-test-class'>
-                  ...prevValues,
+            <Grid item xs={4} className='collapsable-form-style '>
-                  cellPhoneError: true,
+             <TextField
-                }));
+                    variant="outlined"
-              } else {
+                    label="Patient's Full Name"
-                setPatient((prevValues: any) => ({
+                    name="fullName"
-                  ...prevValues,
+                    placeholder='Please enter your name'
-                  cellPhoneError: false,
+                    value={formik.values.fullName}
-                }));
+                    onChange={formik.handleChange}
-              }
+                    onBlur={formik.handleBlur}
-            }}
+                    error={formik.touched.fullName && Boolean(formik.errors.fullName)}
-            error={patient.cellPhoneError}
+                    helperText={formik.touched.fullName && formik.errors.fullName}
-            helperText={
+                    required
-              patient.cellPhoneError
+                />
-                ? 'Please enter a valid 10-digit phone number'
+                </Grid>
-                : ''
+               
-            }
+                <Grid item xs={4} className='collapsable-form-style'>
-          />
+                <TextField
-        </Grid>
+                    required
+                    variant="outlined"
+                    label="Phone Number"
+                    name="cellPhone"
+                    placeholder='Please enter your cell Phone number'
+                    value={formik.values.cellPhone}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
+                    helperText={formik.touched.cellPhone && formik.errors.cellPhone}
+                />
+                </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <TextField
-          xs={12}
+                    variant="outlined"
-          xl={3}
+                    label="Home Phone Number"
-          lg={4}
+                    name="homePhone"
-          md={6}
+                    placeholder='Please enter your home phone'
-          sm={12}
+                    value={formik.values.homePhone}
-          className='collapsable-form-style'
+                    onChange={formik.handleChange}
-        >
+                    onBlur={formik.handleBlur}
-          <TextField
+                    error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
-            variant='outlined'
+                    helperText={formik.touched.homePhone && formik.errors.homePhone}
-            label='Home Phone Number'
+                />
-            name='homePhone'
+                </Grid>
-            type='number'
-            placeholder='Please enter your home phone'
-            value={
-              type == 'display'
-                ? patientDataDiplay && patientDataDiplay.homePhone
-                : patient.homePhone
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                homePhone: e.target.value,
-              }));
-            }}
-            // error={!(/^\d{10}$/.test(patient.homePhone))}
-            // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <TextField
-          xs={12}
+                    variant="outlined"
-          xl={3}
+                    label="Email"
-          lg={4}
+                    name="email"
-          md={6}
+                    placeholder='Please enter your email'
-          sm={12}
+                    value={emailValue}
-          className='collapsable-form-style'
+                    onChange={(e)=>{
-        >
+                        setEmailValue(e.target.value)
-          <TextField
+                    }}
-            required
+                    onBlur={formik.handleBlur}
-            variant='outlined'
+                    // error={formik.touched.email && Boolean(formik.errors.email)}
-            label='Email'
+                    // helperText={formik.touched.email && formik.errors.email}
-            name='email'
+                />
-            placeholder='Please enter your email'
+                </Grid>
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
+                <Grid item xs={4} className='collapsable-form-style'>
-            disabled={type == 'display'}
+                <TextField
-            onChange={(e) => {
+                    required
-              setPatient((prevValues: any) => ({
+                    variant="outlined"
-                ...prevValues,
+                    label="Age"
-                email: e.target.value,
+                    name="age"
-              }));
+                    type="number"
-            }}
+                    placeholder='Please enter your age'
-            onBlur={(e) => {
+                    value={formik.values.age}
-              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
+                    onChange={formik.handleChange}
-                setPatient((prevValues: any) => ({
+                    onBlur={formik.handleBlur}
-                  ...prevValues,
+                    error={formik.touched.age && Boolean(formik.errors.age)}
-                  emailError: true,
+                    helperText={formik.touched.age && formik.errors.age}
-                }));
+                />
-              } else {
+                </Grid>
-                setPatient((prevValues: any) => ({
+                <Grid item xs={4} className='collapsable-form-style'>
-                  ...prevValues,
+                <FormControl >
-                  emailError: false,
+        
-                }));
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
-              }
+                    <DatePicker
-            }}
+                    label="Date of Birth"
-            error={patient.emailError}
+                    value={startDateValue}
-            helperText={
+                    onChange={(newValue) => {
-              patient.emailError ? 'Please enter a valid email address' : ''
+                        setStartDateValue(newValue);
-            }
+                    }}
-          />
+                    renderInput={(params) => <TextField required  variant="outlined" {...params} />}
-        </Grid>
+                    />
-        <Grid
+                </LocalizationProvider>
-          item
+                </FormControl>
-          xs={12}
+            
-          xl={3}
+                </Grid>
-          lg={4}
+                <Grid item xs={4} className='collapsable-form-style'>
-          md={6}
+                <TextField
-          sm={12}
+                    variant="outlined"
-          className='collapsable-form-style'
+                    label="Social Security Number"
-        >
+                    name="socialSecurityNumber"
-          <TextField
+                    value={formik.values.socialSecurityNumber}
-            required
+                    onChange={formik.handleChange}
-            variant='outlined'
+                    onBlur={formik.handleBlur}
-            label='Age'
+                    error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-            name='age'
+                    helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-            type='number'
+                />
-            placeholder='Please enter your age'
+                </Grid>
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                age: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  ageError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  ageError: false,
-                }));
-              }
-            }}
-            error={patient.ageError}
-            helperText={patient.ageError ? 'Please enter your age' : ''}
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                    <TextField
-          xs={12}
+                        required
-          xl={3}
+                        variant="outlined"
-          lg={4}
+                        label="Mailing Address"
-          md={6}
+                        name="mailingAddress"
-          sm={12}
+                        value={formik.values.mailingAddress}
-          className='collapsable-form-style'
+                        onChange={formik.handleChange}
-        >
+                        onBlur={formik.handleBlur}
-          <FormControl>
+                        error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
-              <DatePicker
+                    />
-                label='Date of Birth'
+                </Grid>                
-                value={
+            
-                  type == 'display'
+                <Grid item xs={4} className='collapsable-form-style'>
-                    ? patientDataDiplay && patientDataDiplay.dateOfBirth
+                <TextField
-                    : birthDateValue
+                    variant="outlined"
-                }
+                    label="State"
-                disabled={type == 'display'}
+                    name="state"
-                onChange={(newValue) => {
+                    value={formik.values.state}
-                  setBirthDateValue(newValue);
+                    onChange={formik.handleChange}
-                }}
+                    onBlur={formik.handleBlur}
-                renderInput={(params) => (
+                    // error={formik.touched.state && Boolean(formik.errors.state)}
-                  <TextField variant='outlined' {...params} />
+                    // helperText={formik.touched.state && formik.errors.state}
-                )}
+                />
-              />
+                </Grid>
-            </LocalizationProvider>
-          </FormControl>
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                    <TextField
-          xs={12}
+                        required
-          xl={3}
+                        variant="outlined"
-          lg={4}
+                        label="City"
-          md={6}
+                        name="city"
-          sm={12}
+                        value={formik.values.city}
-          className='collapsable-form-style'
+                        onChange={formik.handleChange}
-        >
+                        onBlur={formik.handleBlur}
-          <TextField
+                        error={formik.touched.city && Boolean(formik.errors.city)}
-            variant='outlined'
+                        helperText={formik.touched.city && formik.errors.city}
-            label='Social Security Number'
+                    />
-            name='socialSecurityNumber'
+                </Grid>
-            value={
+                
-              type == 'display'
+                <Grid item xs={4} className='collapsable-form-style'>
-                ? patientDataDiplay && patientDataDiplay.socialSecurityNumber
+                <TextField
-                : patient.socialSecurityNumber
+                    variant="outlined"
-            }
+                    label="Zip Code"
-            disabled={type == 'display'}
+                    name="zipCode"
-            onChange={(e) => {
+                    value={formik.values.zipCode}
-              setPatient((prevValues: any) => ({
+                    onChange={formik.handleChange}
-                ...prevValues,
+                    onBlur={formik.handleBlur}
-                socialSecurityNumber: e.target.value,
+                    error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
-              }));
+                    helperText={formik.touched.zipCode && formik.errors.zipCode}
-            }}
+                />
-            // onBlur={formik.handleBlur}
+                </Grid>
-            // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-            // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
-          item
+                <FormControl >
-          xs={12}
+                <FormLabel>Gender</FormLabel>
-          xl={3}
+                <RadioGroup
-          lg={4}
+                    aria-labelledby="demo-radio-buttons-group-label"
-          md={6}
+                    defaultValue="male"
-          sm={12}
+                    name="radio-buttons-group"
-          className='collapsable-form-style'
+                    onChange={handleChange}
-        >
+                    sx={{display:'flex', flexDirection:'row'}}
-          <TextField
+                >
-            required
+                    <FormControlLabel value="male" control={<Radio />} label="Male" />
-            variant='outlined'
+                    <FormControlLabel value="female" control={<Radio />} label="Female" />
-            label='Mailing Address'
+                </RadioGroup>
-            name='mailingAddress'
+                </FormControl>
-            value={
+                </Grid>
-              type == 'display'
+            </Grid>       
-                ? patientDataDiplay && patientDataDiplay.mailingAddress
+        </>
-                : patient.mailingAddress
+    )
-            }
+}
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                mailingAddress: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  mailingAddressError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  mailingAddressError: false,
-                }));
-              }
-            }}
-            error={patient.mailingAddressError}
-            helperText={
-              patient.mailingAddressError
-                ? 'Please enter your mailing address'
-                : ''
-            }
-          />
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style'
-        >
-          <TextField
-            variant='outlined'
-            label='State'
-            name='state'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                state: e.target.value,
-              }));
-            }}
-          />
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style'
-        >
-          <TextField
-            variant='outlined'
-            label='City'
-            name='city'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                city: e.target.value,
-              }));
-            }}
-          />
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style'
-        >
-          <TextField
-            variant='outlined'
-            label='Zip Code'
-            name='zipCode'
-            value={
-              type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                zipCode: e.target.value,
-              }));
-            }}
-            // onBlur={formik.handleBlur}
-            // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
-            // helperText={formik.touched.zipCode && formik.errors.zipCode}
-          />
-        </Grid>
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style-radioButtons'
-        >
-          <FormControl>
-            <FormLabel>Gender</FormLabel>
-            <RadioGroup
-              aria-labelledby='demo-radio-buttons-group-label'
-              defaultValue={
-                type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
-              }
-              name='radio-buttons-group'
-              onChange={(e) => {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  gender: e.target.value,
-                }));
-              }}
-              sx={{ display: 'flex', flexDirection: 'row' }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='male'
-                control={<Radio />}
-                label='Male'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='female'
-                control={<Radio />}
-                label='Female'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-      </Grid>
-    </>
-  );
-}

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -1,7 +1,7 @@
 import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
-import React, { useEffect } from "react";
+import React from "react";
 
-interface Patient {
+interface FormValues {
     hobbies: string;
     educationLevel: string;
     excercise: string;
@@ -22,33 +22,8 @@ interface Patient {
     drugsExplanation:string;
   }
 
-  type Props = {
+export default function RecreationalHobbiesSection7(){
-    handleFormSection7Data:(
+    const [values, setValues] = React.useState<FormValues>({
-      hobbies: string|undefined,
-      educationLevel: string|undefined,
-      excercise: string|undefined,
-      excerciseExplanation: string|undefined,
-      tobacco: string|undefined,
-      tobaccoExplanation: string|undefined,
-      alcohol: string|undefined,
-      alcoholExplanation: string|undefined,
-      healthyDiet: string|undefined,
-      healthyDietExplanation: string|undefined,
-      sleep: string|undefined,
-      sleepExplanation: string|undefined,
-      workSchool: string|undefined,
-      workSchoolExplanation: string|undefined,
-      familyLife: string|undefined,
-      familyLifeExplanation: string|undefined,
-      drugs: string|undefined,
-      drugsExplanation:string|undefined,
-    )=> void
-    patientDataDiplay:any;
-    type:string;
-  }
-
-export default function RecreationalHobbiesSection7({handleFormSection7Data,patientDataDiplay,type}:Props){
-    const [patient, setPatient] = React.useState<Patient>({
           hobbies: '',
           educationLevel: '',
           excercise:'',
@@ -68,31 +43,6 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
           drugs: '',
           drugsExplanation:''
       });
-
-
-    useEffect(()=>{
-      handleFormSection7Data(
-        patient.hobbies,
-        patient.educationLevel,
-        patient.excercise,
-        patient.excerciseExplanation,
-        patient.tobacco,
-        patient.tobaccoExplanation,
-        patient.alcohol,
-        patient.alcoholExplanation,
-        patient.healthyDiet,
-        patient.healthyDietExplanation,
-        patient.sleep,
-        patient.sleepExplanation,
-        patient.workSchool,
-        patient.workSchoolExplanation,
-        patient.familyLife,
-        patient.familyLifeExplanation,
-        patient.drugs,
-        patient.drugsExplanation
-      )
-    },[patient])
-    
     return(
         <>
         
@@ -103,10 +53,9 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 multiline
                 variant="outlined"
                 label="" 
-                value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies}
+                name='explanation'
-                disabled={type=='display'}
                 onChange={(event:any) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     hobbies: event.target.value,
                   }));
@@ -119,60 +68,49 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                     <FormLabel>Your education level:</FormLabel>
                     <RadioGroup
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.educationLevel:patient.educationLevel}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             educationLevel: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="High School" control={<Radio />} label="High School" />
+                        <FormControlLabel value="High School" control={<Radio />} label="High School" />
-                        <FormControlLabel disabled={type=='display'} value="Some college" control={<Radio />} label="Some college" />
+                        <FormControlLabel value="Some college" control={<Radio />} label="Some college" />
-                        <FormControlLabel disabled={type=='display'} value="College Graduate" control={<Radio />} label="College Graduate" />
+                        <FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
-                        <FormControlLabel disabled={type=='display'} value="Post college" control={<Radio />} label="Post college" />
+                        <FormControlLabel value="Post college" control={<Radio />} label="Post college" />
-                        <FormControlLabel disabled={type=='display'} value="Other" control={<Radio />} label="Other" />
+                        <FormControlLabel value="Other" control={<Radio />} label="Other" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.excercise:patient.excercise}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             excercise: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.excercise!=='Yes'||type=='display'}
+                disabled={values.excercise!=='Yes'}
                 variant="outlined"
                 label="Times per week?" 
                 name='treatmentGoal'
-                value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     excerciseExplanation: event.target.value,
                   }));
@@ -180,87 +118,67 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.tobacco:patient.tobacco}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             tobacco: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.tobacco!=='Yes'||type=='display'}
+                disabled={values.tobacco!=='Yes'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
                 variant="outlined"
                 label="Packs/Cans per day(If you have quit, when did you quit?)" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
-                    tobaccoExplanation: event.target.value,
+                    excerciseExplanation: event.target.value,
                   }));
                 }}
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.alcohol:patient.alcohol}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             alcohol: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.alcohol!=='Yes'||type=='display'}
+                disabled={values.alcohol!=='Yes'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
                 variant="outlined"
                 label="How many drinks per week?" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     alcoholExplanation: event.target.value,
                   }));
@@ -268,43 +186,33 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.healthyDiet:patient.healthyDiet}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             healthyDiet: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.healthyDiet!=='No'||type=='display'}
+                disabled={values.healthyDiet!=='No'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     healthyDietExplanation: event.target.value,
                   }));
@@ -312,43 +220,33 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.sleep:patient.sleep}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             sleep: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.sleep!=='No'||type=='display'}
+                disabled={values.sleep!=='No'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.sleepExplanation:patient.sleepExplanation}
                 variant="outlined"
                 label="If no, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     sleepExplanation: event.target.value,
                   }));
@@ -356,43 +254,33 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             workSchool: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.workSchool!=='Yes'||type=='display'}
+                disabled={values.workSchool!=='Yes'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     workSchool: event.target.value,
                   }));
@@ -400,43 +288,33 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.familyLife:patient.familyLife}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             familyLife: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.familyLife!=='Yes'||type=='display'}
+                disabled={values.familyLife!=='Yes'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     familyLifeExplanation: event.target.value,
                   }));
@@ -444,43 +322,33 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
                         name="painDuration"
                         sx={{display:'flex', flexDirection:'row'}}
-                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.drugs:patient.drugs}
                         onChange={(event) => {
-                          setPatient((prevValues) => ({
+                          setValues((prevValues) => ({
                             ...prevValues,
                             drugs: event.target.value,
                           }));
                         }}
                         >
-                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
+                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
+                        <FormControlLabel value="No" control={<Radio />} label="No" />
                     </RadioGroup>
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
-                disabled={patient.drugs!=='Yes'||type=='display'}
+                disabled={values.drugs!=='Yes'}
-                value={type=='display'?patientDataDiplay && patientDataDiplay.drugsExplanation:patient.drugsExplanation}
                 variant="outlined"
                 label="If yes, explain" 
                 name='treatmentGoal'
                 onChange={(event) => {
-                  setPatient((prevValues) => ({
+                  setValues((prevValues) => ({
                     ...prevValues,
                     drugsExplanation: event.target.value,
                   }));