type cleanup

Reviewed-on: #6

package-lock.json

@@ -37,9 +37,11 @@
         "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",
@@ -52,6 +54,7 @@
         "@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"
@@ -4971,6 +4974,16 @@
         "@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",
@@ -5028,6 +5041,12 @@
         "@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",
@@ -15795,6 +15814,15 @@
         "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",
@@ -15951,6 +15979,20 @@
         }
       }
     },
+    "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",
@@ -16834,6 +16876,11 @@
       "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",
@@ -17681,6 +17728,11 @@
         "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,9 +33,11 @@
     "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",
@@ -72,6 +74,7 @@
     "@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="Web site created using create-react-app"
+      content="In Motion Spine & Joint Center"
     />
     <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>React App</title>
+    <title>In Motion Spine & Joint Center</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.css

@@ -1,37 +1,34 @@
-.app-screen-constants .MuiInputBase-root{
+/* .app-screen-constants .MuiInputBase-root{
     margin:auto;
     max-width:1500;
     height:800 !important;
-}
+} */
 
-.collapsable-form-style .MuiInputBase-root {
-    width: 300px !important;
-    margin: 5%;
+/* .collapsable-form-style .MuiInputBase-root {
+    margin:3%;
     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;
@@ -41,7 +38,6 @@
 }
 
 .collapsable-form-style-radioButtons-fullwidth{
-    /* width: 300px !important; */
     margin: 5%;
     padding-top: 12px;
     padding-left: 16px;
@@ -58,3 +54,32 @@
 .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,7 +11,8 @@ function App() {
         <div className='flex'>
           <BrowserRouter>
           <Routes>
-              <Route path='/' element={<PatientForm />}/>
+            <Route path='/' element={<PatientForm type={"fill"}/>} />
+            <Route path='/view-details' element={<PatientForm type={"display"}/>}/>
           </Routes>
           </BrowserRouter>
         </div>

src/Components/Helper/AddNewTable.tsx

@@ -1,5 +1,19 @@
-import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
+import {
+  Button,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  TextField,
+  Paper,
+  Grid,
+  FormLabel,
+  FormControl,
+} from '@mui/material';
 import * as React from 'react';
+import { PastTreatmentInterface } from '../Interface/Patient';
 
 interface RowData {
   date: string;
@@ -13,31 +27,51 @@ interface DataTableProps {
   onAddRow: () => void;
 }
 
-const DataTable: React.FC= () => {
+type Props = {
+  handlePastTreatmentFormData: (patient:PastTreatmentInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
 
+function DataTable({ handlePastTreatmentFormData, patientDataDiplay, type }: Props) {
   const [illnessFromData, setIllnessFromData] = React.useState<any>({
-    id:0,date:'',illness:'',treatment:'',results:''
-  })
+    id: 0,
+    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 updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
+  const deleteIllnessData = (idToDelete: number) => {
+    const updatedIllnessData = illnessData.filter(
+      (item) => item.id !== idToDelete
+    );
     setIllnessData(updatedIllnessData);
   };
 
-
   const handleAddRow = () => {
-    if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){
-
-      const newId = Math.max(...illnessData.map(item => item.id)) + 1;
+    if (
+      illnessFromData.date != '' &&
+      illnessFromData.illness != '' &&
+      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({
@@ -45,89 +79,136 @@ const DataTable: React.FC= () => {
         date: '',
         illness: '',
         treatment: '',
-        results: ''
+        results: '',
       });
     }
   };
 
-  console.log("sdfsdfdsf",illnessData, illnessFromData)
-  
-
   return (
     <>
-    <FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
+      <FormLabel>If yes, Please enter the details below:</FormLabel>
+      <br></br>
+      {type !== 'display' ? (
         <FormControl>
-      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
-        <Grid item xs={2} className='addNew-form-table-style'>
+          <Grid container spacing={1.5}>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
-                label="Date" 
+                variant='outlined'
+                label='Date'
                 value={illnessFromData.date}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     date: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={3.7} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
-                label="Injury/Illness/Surgeries" 
+                variant='outlined'
+                label='Injury/Illness/Surgeries'
                 value={illnessFromData.illness}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     illness: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={3.5} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
-                label="Treatment" 
+                variant='outlined'
+                label='Treatment'
                 value={illnessFromData.treatment}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     treatment: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={2} className='addNew-form-table-style'>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
               <TextField
                 required
-                variant="outlined"
-                label="Results" 
+                variant='outlined'
+                label='Results'
                 value={illnessFromData.results}
                 onChange={(event) => {
-                  setIllnessFromData((prevValues:any) => ({
+                  setIllnessFromData((prevValues: any) => ({
                     ...prevValues,
                     results: event.target.value,
                   }));
                 }}
               />
             </Grid>
-        <Grid item xs={0.8} className='addNew-form-table-style'>
-          <Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
+            <Grid
+              item
+              xs={12}
+              xl={3}
+              lg={3}
+              md={6}
+              sm={12}
+              className='addNew-form-table-style'
+            >
+              <Button
+                sx={{ height: '40px', bgcolor: 'skyblue' }}
+                onClick={handleAddRow}
+              >
+                Add
+              </Button>
             </Grid>
-        
           </Grid>
         </FormControl>
+      ) : (
+        ''
+      )}
 
-     
-      <TableContainer sx={{width:800}} className='illness-table-style'>
-        <Table  aria-label="simple table">
+      <TableContainer className='illness-table-style'>
+        <Table aria-label='simple table'>
           <TableHead>
             <TableRow>
               <TableCell align='left'>Date</TableCell>
-              <TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
+              <TableCell align='center'>
+                Injury/Fracture/Illness/Surgeries
+              </TableCell>
               <TableCell align='left'>Treatment</TableCell>
               <TableCell align='left'>Results</TableCell>
               <TableCell align='left'></TableCell>
@@ -136,22 +217,23 @@ const DataTable: React.FC= () => {
           <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'>
-                    {row.date}
-                </TableCell>
-                <TableCell align='center'> 
-                  {row.illness}
-                </TableCell>
-                <TableCell align='left'> 
-                  {row.treatment}
-                </TableCell>
-                <TableCell align='left'> 
-                  {row.results}
-                </TableCell>
-                <TableCell align='left'> 
-                  <Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
+                  {type !== 'display' ? (
+                    <Button
+                      sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
+                      onClick={(e) => {
+                        deleteIllnessData(row.id);
+                      }}
+                    >
                       Delete
                     </Button>
+                  ) : (
+                    ''
+                  )}
                 </TableCell>
               </TableRow>
             ))}
@@ -160,6 +242,6 @@ const DataTable: React.FC= () => {
       </TableContainer>
     </>
   );
-};
+}
 
 export default DataTable;

src/Components/Helper/AlertDialogBox.tsx

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,185 @@
+.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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,35 @@
+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/Interface/Patient.tsx

@@ -0,0 +1,122 @@
+export interface PersonalInformationInterface {
+  fullName: string;
+  homePhone: string;
+  cellPhone: string;
+  email: string;
+  age: number | string;
+  dateOfBirth: string;
+  socialSecurityNumber: string;
+  mailingAddress: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  gender: string;
+}
+
+export interface FamilyInformationInterface {
+  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;
+}
+
+export interface MedicalHistoryInterface {
+  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;
+}
+
+export interface InjuryDetailsInterface {
+  chiefComplaint: string;
+  painWorse: string[];
+  painBetter: string[];
+  painQuality: string[];
+  painWorstTime: string[];
+  currentComplaintIssues: string[];
+  painDuration: string;
+  currentTreatment: string;
+  treatmentGoal: string;
+  selfTreatment: string;
+}
+
+export interface PastTreatmentInterface {
+  generalHealth: string;
+  presentProblemBefore: string;
+  ifYespresentProblemBefore: string;
+  ifYestreatmentProvided: string;
+  ifYesOutcome: string;
+  strokeBloodclotting: string;
+  ifYesstrokeBloodclotting: string;
+  dizzinessFetigue: string;
+  ifyesdizzinessFetigue: string;
+  antiColligent: string;
+  injuriesHospitalization: string;
+  supplementsOrDrugs: string;
+}
+
+export interface SystemReviewInterface {
+  eyes: string;
+  IntestinesBowls: string;
+  jointsBones: string;
+  allergies: string;
+  earsNoseMouth: string;
+  urinary: string;
+  skin: string;
+  psychological: string;
+  heart: string;
+  muscles: string;
+  internalOrgans: string;
+  gynecological: string;
+  lungsBreathing: string;
+  nerves: string;
+  blood: string;
+  prostate: string;
+  explanation: string;
+}
+
+export interface RecreationalHobbieInterface {
+  hobbies: string;
+    educationLevel: string;
+    excercise: string;
+    excerciseExplanation: string;
+    tobacco: string;
+    tobaccoExplanation: string;
+    alcohol: string;
+    alcoholExplanation: string;
+    healthyDiet: string;
+    healthyDietExplanation: string;
+    sleep: string;
+    sleepExplanation: string;
+    workSchool: string;
+    workSchoolExplanation: string;
+    familyLife: string;
+    familyLifeExplanation: string;
+    drugs: string;
+    drugsExplanation:string;
+}
+
+export interface OtherDetailsInterface {
+  familyHistory: string;
+  sleep: string;
+  pillow: string;
+  orthotics: string;
+  brestExam: any;
+  pregnancy: string;
+  menstralCycle: any;
+}

src/Components/PatientForm/FamilyFormSection2.tsx

@@ -1,240 +0,0 @@
-import { Button, Checkbox, 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';
-
-interface FormValues {
-  maritalStatus: string;
-  numberOfChildren: string;
-  ages: string;
-  occupation: string;
-  hoursPerWeek: number | string;
-  employer: string;
-  businessPhone: string;
-  spouseName: string;
-  spouseEmployer: string;
-  spouseBusinessPhone: string;
-  emergencyContact: string;
-  relationship: string;
-  spousePhone: string;
-}
-
-const validationSchema = yup.object({
-  maritalStatus:yup.string().required("Marital Status is required"),
-  numberOfChildren:yup.string().required("Full name is required"),
-  ages:yup.string().required("Full name is required"),
-  occupation:yup.string().required("Occupation is required"),
-//   hoursPerWeek: yup.number().required('Required'),
-//   employer:yup.string().required("Full name is required"),
-//   businessPhone:yup.string().required("Full name is required"),
-  spouseName:yup.string().required("Spouse name is required"),
-//   spouseEmployer:yup.string().required("Full name is required"),
-//   spouseBusinessPhone:yup.string().required("Full name is required"),
-  emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-  relationship:yup.string().required("Relationship is required"),
-  spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
-});
-
-export default function FamilyFormSection(){
-    const formik = useFormik<FormValues>({
-        initialValues:{
-            maritalStatus:'',
-            numberOfChildren:'',
-            ages:'',
-            occupation:'',
-            hoursPerWeek:'',
-            employer:'',
-            businessPhone:'',
-            spouseName:'',
-            spouseEmployer:'',
-            spouseBusinessPhone:'',
-            emergencyContact:'',
-            relationship:'',
-            spousePhone:''
-        },
-        validationSchema,
-        onSubmit:(values)=>{
-            console.log(values);
-        }
-    })
-    return(
-        <>
-        <form onSubmit={formik.handleSubmit}>
-        <Grid container direction="row">
-            <Grid item xs={8} className='collapsable-form-style-radioButtons'>
-            <FormControl>
-            <FormLabel>Marital Status</FormLabel>
-                <RadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    defaultValue="married"
-                    name="maritalStatus"
-                    onChange={formik.handleChange}
-                    value={formik.values.maritalStatus}
-                    sx={{display:'flex', flexDirection:'row'}}
-                    // error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
-                    // helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
-                    >
-                    <FormControlLabel value="married" control={<Radio />} label="Married" />
-                    <FormControlLabel value="single" control={<Radio />} label="Single" />
-                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
-                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
-                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
-                </RadioGroup>
-                
-            </FormControl>
-            </Grid>
-           
-            <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                
-                variant="outlined" 
-                type="number"
-                label="Number of Children/Ages" 
-                className='collapsable-form-style'
-                name='numberOfChildren'
-                onChange={formik.handleChange}
-                value={formik.values.numberOfChildren}
-                onBlur={formik.handleBlur}
-                // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
-                // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                <TextField 
-                // required
-                variant="outlined" 
-                label="Occupation" 
-                className='collapsable-form-style'
-                name='occupation'
-                onChange={formik.handleChange}
-                value={formik.values.occupation}
-                onBlur={formik.handleBlur}
-                // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
-                // helperText={formik.touched.occupation && formik.errors.occupation}
-                />
-               
-            </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={12} className='collapsable-form-style '> 
-                <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style '>
-                 <TextField 
-                 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 item xs={4} className='collapsable-form-style '>
-                   <TextField 
-                   variant="outlined" 
-                   label="Emergency Contact" 
-                   type="number"
-                   className='collapsable-form-style'
-                   name='emergencyContact'
-                   onChange={formik.handleChange}
-                   value={formik.values.emergencyContact}
-                   onBlur={formik.handleBlur}
-                   />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                    <TextField 
-                    variant="outlined" 
-                    label="Relationship" 
-                    className='collapsable-form-style'
-                    name='relationship'
-                    onChange={formik.handleChange}
-                    value={formik.values.relationship}
-                    onBlur={formik.handleBlur}
-                    />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style '>
-                     <TextField 
-                     variant="outlined" 
-                     type="number"
-                     label="Phone" 
-                     className='collapsable-form-style'
-                     name='spousePhone'
-                     onChange={formik.handleChange}
-                     value={formik.values.spousePhone}
-                     onBlur={formik.handleBlur}
-                     />
-            </Grid>
-        </Grid>
-        </form>
-        </>
-    )
-};

src/Components/PatientForm/FamilyInformationSection.tsx

@@ -0,0 +1,441 @@
+import {
+  Button,
+  Checkbox,
+  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';
+import { FamilyInformationInterface } from '../Interface/Patient';
+
+type Props = {
+  handleFamilyInformationFormData: (patient:FamilyInformationInterface ) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function FamilyInformationForm({
+  handleFamilyInformationFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<FamilyInformationInterface>({
+    maritalStatus: '',
+    numberOfChildren: '',
+    occupation: '',
+    hoursPerWeek: '',
+    employer: '',
+    businessPhone: '',
+    spouseName: '',
+    spouseEmployer: '',
+    spouseBusinessPhone: '',
+    emergencyContact: '',
+    relationship: '',
+    spousePhone: '',
+  });
+
+  useEffect(() => {
+    handleFamilyInformationFormData(patient);
+  }, [patient]);
+
+  return (
+    <>
+      <Grid container direction='row'>
+        <Grid item xs={8} className='collapsable-form-style-radioButtons'>
+          <FormControl>
+            <FormLabel>Marital Status</FormLabel>
+            <RadioGroup
+              aria-labelledby='demo-radio-buttons-group-label'
+              name='maritalStatus'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.maritalStatus
+                  : patient.maritalStatus
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(e) => {
+                setPatient((prevValues: any) => ({
+                  ...prevValues,
+                  maritalStatus: e.target.value,
+                }));
+              }}
+            >
+              <FormControlLabel
+                value='married'
+                control={<Radio />}
+                label='Married'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='single'
+                control={<Radio />}
+                label='Single'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='widowed'
+                control={<Radio />}
+                label='Widowed'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='seperated'
+                control={<Radio />}
+                label='Seperated'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                value='divorced'
+                control={<Radio />}
+                label='Divorced'
+                disabled={type == 'display'}
+              />
+            </RadioGroup>
+          </FormControl>
+        </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
+          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 }}>Spouse's Information:</FormLabel>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Spouse's Name"
+            className='collapsable-form-style'
+            name='spouseName'
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                spouseName: e.target.value,
+              }));
+            }}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.spouseName
+                : patient.spouseName
+            }
+            disabled={type == 'display'}
+          />
+        </Grid>
+        <Grid
+          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/MedicalHistorySection.tsx

@@ -0,0 +1,287 @@
+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';
+import { MedicalHistoryInterface } from '../Interface/Patient';
+
+type Props = {
+    handleMedicalHistoryFormData:(patient:MedicalHistoryInterface)=> void
+    patientDataDiplay:any;
+    type:string;
+  }
+
+export default function MedicalHistoryForm({handleMedicalHistoryFormData,patientDataDiplay,type}:Props){
+    
+    const [patient, setPatient] = React.useState<MedicalHistoryInterface>({
+        physicianname: '',
+        physiciancity: '',
+        physicianstate: '',
+        physicianphone: '',
+        chiropractorName: '',
+        chiropractorState: '',
+        xray: '',
+        haveChiropractor: '',
+        reference: '',
+        visitDetails: '',
+        cellPhoneProvider: '',
+      });
+   
+      useEffect(()=>{
+        handleMedicalHistoryFormData(patient)
+      },[patient])
+
+    return(
+        <>
+        <Grid item xs={12} className='collapsable-form-style '> 
+            <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
+        </Grid>
+
+        <Grid container direction="row">
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
+                <TextField 
+                variant="outlined"
+                label="Family physician" 
+                name='physicianname'
+                onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianname: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
+                disabled={type=='display'}
+                />
+            </Grid>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
+                <TextField 
+                variant="outlined"
+                label="City" 
+                name='physiciancity'
+                onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physiciancity: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
+                disabled={type=='display'}
+                />
+            </Grid>
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
+                 <TextField 
+                 variant="outlined"
+                 label="State" 
+                 name='physicianstate'
+                 onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianstate: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
+                disabled={type=='display'}
+                 />
+            </Grid>
+            <Grid item 
+            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)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        physicianphone: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
+                disabled={type=='display'}
+                />
+            </Grid>
+            
+            <Grid item 
+            xs={12}
+            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 
+            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
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
+                    name="radio-buttons-group"
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            haveChiropractor: e.target.value,
+                          }));
+                    }}
+                    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 item 
+            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)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        chiropractorName: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
+                disabled={type=='display'}
+                 />
+            </Grid>
+
+            <Grid item 
+            xs={12}
+            xl={3}
+            lg={4}
+            md={6}
+            sm={12}
+             className='collapsable-form-style'>
+                 <TextField 
+                 variant="outlined"
+                 label="City/State" 
+                 name='chiropractorState'
+                 onChange={(e)=>{
+                    setPatient((prevValues) => ({
+                        ...prevValues,
+                        chiropractorState: e.target.value,
+                      }));
+                }}
+                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
+                disabled={type=='display'}
+                 />
+            </Grid>
+        </Grid>
+
+        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
+            <FormControl>
+                <FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
+                    name="radio-buttons-group"
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            xray: e.target.value,
+                          }));
+                    }}
+                    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 item xs={12}  className='collapsable-form-style-radioButtons-fullwidth'>
+                <FormControl>
+                <FormLabel>Who can we thank for referring you to our office:</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
+                    name="radio-buttons-group"
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            reference: e.target.value,
+                          }));
+                    }}
+                    sx={{display:'flex', flexDirection:'row'}}
+                >
+                    <FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
+                    <FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
+                    <FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
+                    <FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
+                    <FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
+                    <FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
+                </RadioGroup>
+            </FormControl>
+        </Grid>
+
+        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
+            <FormControl>
+                <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
+                <RadioGroup
+                    // value={patient.gender}
+                    aria-labelledby="demo-radio-buttons-group-label"
+                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
+                    name="radio-buttons-group"
+                    onChange={(e)=>{
+                        setPatient((prevValues) => ({
+                            ...prevValues,
+                            cellPhoneProvider: e.target.value,
+                          }));
+                    }}
+                    sx={{display:'flex', flexDirection:'row'}}
+                >
+                    <FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
+                    <FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
+                </RadioGroup>
+            </FormControl>
+        </Grid>
+        </>
+    )}
+            

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -1,207 +0,0 @@
-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';
-
-interface FormValues {
-  physicianname: string;
-  physiciancity: string;
-  physicianstate: string;
-  physicianphone: string;
-  chiropractorName: string;
-  chiropractorState: string;
-  xray: boolean;
-  ctScan: boolean;
-  cdImages: boolean;
-  visitDetails: string;
-  cellPhoneProvider: string;
-}
-
-const validationSchema = Yup.object({
-  familyphysician: Yup.string().required('Required'),
-  city: Yup.string().required('Required'),
-  state: Yup.string().required('Required'),
-  phone: Yup.string().required('Required'),
-  chiropractorName: Yup.string().required('Required'),
-  xray: Yup.boolean().required('Required'),
-  ctScan: Yup.boolean().required('Required'),
-  cdImages: Yup.boolean().required('Required'),
-  visitDetails: Yup.string().required('Required'),
-  cellPhoneProvider: Yup.string().required('Required'),
-});
-
-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 xs={4} className='collapsable-form-style'>
-                <TextField 
-                variant="outlined"
-                label="Family physician" 
-                name='physicianname'
-                onChange={formik.handleChange}
-                value={formik.values.physicianname}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
-                <TextField 
-                variant="outlined"
-                label="City" 
-                name='physiciancity'
-                onChange={formik.handleChange}
-                value={formik.values.physiciancity}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
-                 <TextField 
-                 variant="outlined"
-                 label="State" 
-                 name='physicianstate'
-                 onChange={formik.handleChange}
-                 value={formik.values.physicianstate}
-                 onBlur={formik.handleBlur}
-                 />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style'>
-                <TextField 
-                variant="outlined"
-                label="Phone" 
-                type="number"
-                name='physicianphone'
-                onChange={formik.handleChange}
-                value={formik.values.physicianphone}
-                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} className='collapsable-form-style '> 
-                <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
-            </Grid>
-
-            <Grid item xs={4} 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="yes"
-                    name="radio-buttons-group"
-                    onChange={formik.handleChange}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <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'>
-                 <TextField 
-                 variant="outlined"
-                 label="Chiropractor's Name" 
-                 name='chiropractorName'
-                 onChange={formik.handleChange}
-                 value={formik.values.chiropractorName}
-                 onBlur={formik.handleBlur}
-                 />
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style'>
-                 <TextField 
-                 variant="outlined"
-                 label="City/State" 
-                 name='chiropractorState'
-                 onChange={formik.handleChange}
-                 value={formik.values.chiropractorState}
-                 onBlur={formik.handleBlur}
-                 />
-            </Grid>
-        </Grid>
-
-        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
-            <FormControl>
-                <FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
-                <RadioGroup
-                    // value={patient.gender}
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="yes"
-                    name="radio-buttons-group"
-                    onChange={formik.handleChange}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <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-fullwidth'>
-                <FormControl>
-                <FormLabel>Who can we thank for referring you to our office:</FormLabel>
-                <RadioGroup
-                    // value={patient.gender}
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="physician"
-                    name="radio-buttons-group"
-                    onChange={formik.handleChange}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
-                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
-                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
-                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
-                    <FormControlLabel value="google" control={<Radio />} label="Google" />
-                    <FormControlLabel value="others" control={<Radio />} label="Others" />
-                </RadioGroup>
-            </FormControl>
-        </Grid>
-
-        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
-            <FormControl>
-                <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
-                <RadioGroup
-                    // value={patient.gender}
-                    aria-labelledby="demo-radio-buttons-group-label"
-                    // defaultValue="email"
-                    name="radio-buttons-group"
-                    onChange={formik.handleChange}
-                    sx={{display:'flex', flexDirection:'row'}}
-                >
-                    <FormControlLabel value="email" control={<Radio />} label="Email" />
-                    <FormControlLabel value="text" control={<Radio />} label="Text" />
-                </RadioGroup>
-            </FormControl>
-        </Grid>
-        </form>
-        </>
-    )}
-            

src/Components/PatientForm/OtherDetails8.tsx

@@ -1,178 +0,0 @@
-import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import React from "react";
-import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
-import dayjs from "dayjs";
-
-interface FormValues {
-    familyHistory: string;
-    sleep: string;
-    pillow:string;
-    orthotics:string;
-    brestExam: any;
-    pregnancy:string;
-    menstralCycle: any;
-  }
-
-export default function OtherDetails8(){
-  
-    const [values, setValues] = React.useState<FormValues>({
-        familyHistory: '',
-        sleep: '',
-        pillow:'',
-        orthotics:'',
-        brestExam: dayjs('2022-04-17'),
-        pregnancy:'',
-        menstralCycle: dayjs('2022-04-17'),
-    });
-
-    const formatDate = (inputDate:any) => {
-      const date = new Date(inputDate);
-      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}`;
-    };
-
-    console.log("dsfdsfsdf",values)
-    
-    return(
-        <>
-        <Grid container direction="row">
-        <Grid item xs={12} className='collapsable-form-style-multiline'>
-          <FormLabel>Family history and health status:</FormLabel><br></br>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='explanation'
-                onChange={(event:any) => {
-                  setValues((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'}}
-                        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'>
-                <FormControl>
-                    <FormLabel>Possible pregnancy?</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 menstrual cycle?</FormLabel><br></br>
-                <FormControl>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    <DatePicker
-                    value={values.menstralCycle}
-                    onChange={(event) => {
-                      const formattedDate = formatDate(event)
-                      setValues((prevValues) => ({
-                        ...prevValues,
-                        menstralCycle: formattedDate,
-                      }));
-                      }}
-                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                    />
-                </LocalizationProvider>
-              </FormControl>
-          </Grid>
-
-       
-        </Grid>
-        </>
-    )
-}

src/Components/PatientForm/OtherDetailsSection.tsx

@@ -0,0 +1,293 @@
+import {
+  Grid,
+  FormLabel,
+  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 { OtherDetailsInterface } from '../Interface/Patient';
+
+type Props = {
+  handleOtherDetailsFormData: (patient:OtherDetailsInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function OtherDetailsForm({
+  handleOtherDetailsFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<OtherDetailsInterface>({
+    familyHistory: '',
+    sleep: '',
+    pillow: '',
+    orthotics: '',
+    brestExam: dayjs('2022-04-17'),
+    pregnancy: '',
+    menstralCycle: dayjs('2022-04-17'),
+  });
+
+  useEffect(() => {
+    handleOtherDetailsFormData(patient);
+  }, [patient]);
+
+  const formatDate = (inputDate: any) => {
+    const date = new Date(inputDate);
+    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: dayjs(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'>
+          <FormControl>
+            <FormLabel>Possible pregnancy?</FormLabel>
+            <RadioGroup
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.pregnancy
+                  : patient.pregnancy
+              }
+              onChange={(event) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  pregnancy: 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 menstrual cycle?</FormLabel>
+          <br></br>
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.menstralCycle
+                    : patient.menstralCycle
+                }
+                disabled={type == 'display'}
+                onChange={(event) => {
+                  const formattedDate = formatDate(event);
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    menstralCycle: dayjs(formattedDate),
+                  }));
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/PainAnalysisSection.tsx

@@ -0,0 +1,553 @@
+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 path from 'path';
+import { useEffect } from 'react';
+import { InjuryDetailsInterface } from '../Interface/Patient';
+
+type Props = {
+  handleInjuryDetailsFormData: (patient:InjuryDetailsInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function InjuryDetailsForm({
+  handleInjuryDetailsFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<InjuryDetailsInterface>({
+    chiefComplaint: '',
+    painWorse: [],
+    painBetter: [],
+    painQuality: [],
+    painWorstTime: [],
+    currentComplaintIssues: [],
+    painDuration: '',
+    currentTreatment: '',
+    treatmentGoal: '',
+    selfTreatment: '',
+  });
+
+  useEffect(() => {
+    handleInjuryDetailsFormData(patient);
+  }, [patient]);
+
+  const handlePainWorseChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, checked } = event.target;
+    setPatient((prevValues) => ({
+      ...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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What makes your pain worse?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
+                }
+                label='Bending'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
+                }
+                label='Sitting'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What makes your pain better?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainBetterChange}
+                    name='laying down'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
+                  />
+                }
+                label='laying down'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
+                }
+                label='Standing'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What is the quality of your pain?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
+                }
+                label='Sharp'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
+                }
+                label='Dull/Ache'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainQualityChange}
+                    name='Throbbing'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
+                  />
+                }
+                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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>What is the worst time for your pain?</FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Morning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
+                  />
+                }
+                label='Morning'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='During day'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
+                  />
+                }
+                label='During day'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Evening'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
+                  />
+                }
+                label='Evening'
+                disabled={type == 'display'}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handlePainWorstTimeChange}
+                    name='Lying in bed'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
+                  />
+                }
+                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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>
+              How much of the day do you experience your chief complaint?
+            </FormLabel>
+            <RadioGroup
+              name='painDuration'
+              onChange={(e) => {
+                setPatient((prevValues) => ({
+                  ...prevValues,
+                  painDuration: e.target.value,
+                }));
+              }}
+              value={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.painDuration
+                  : patient.painDuration
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+            >
+              <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
+          item
+          xs={12}
+          className='collapsable-form-style-radioButtons-fullwidth'
+        >
+          <FormControl>
+            <FormLabel>
+              Has your current complaint caused any of the following?
+            </FormLabel>
+            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    onChange={handleCurrentComplaintIssuesTimeChange}
+                    name='Muscle weakness'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
+                  />
+                }
+                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
+          item
+          xs={12}
+          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
+          item
+          xs={12}
+          className='collapsable-form-style'
+          sx={{ marginTop: 3 }}
+        >
+          <FormLabel sx={{ fontWeight: 600 }}>
+            Expected Treatment Result:
+          </FormLabel>
+        </Grid>
+
+        <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/PainAnalysisSection4.tsx

@@ -1,266 +0,0 @@
-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';
-
-interface FormValues {
-    chiefComplaint:string;
-    painQuality: string[];
-    painDuration: string;
-    currentTreatment: string;
-    treatmentResults: string;
-    treatmentGoal: string;
-  }
-  
-  const validationSchema = Yup.object({
-    chiefComplaint:Yup.array().required('Required'),
-    painQuality: Yup.array().required('Required'),
-    painDuration: Yup.string().required('Required'),
-    currentTreatment: Yup.string().required('Required'),
-    treatmentResults: Yup.string().required('Required'),
-    treatmentGoal: Yup.string().required('Required'),
-  });
-
-export default function PainAnalysisSection4(){
-    const formik = useFormik<FormValues>({
-        initialValues:{
-            chiefComplaint:'',
-            painQuality:[],
-            painDuration:'',
-            currentTreatment:'',
-            treatmentResults:'',
-            treatmentGoal:'',
-        },
-        validationSchema,
-        onSubmit:(values)=>{
-            console.log(values);
-        }
-    })
-    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));
-        }
-    };
-
-    return(
-        <>
-        <form onSubmit={formik.handleSubmit}>
-        <Grid item xs={12} className='collapsable-form-style '> 
-            <FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
-        </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 item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What makes your pain worse?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Bending"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Standing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Sitting"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Walking"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What makes your pain better?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="laying down"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Standing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Sitting"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Walking"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What is the quality of your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Sharp"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Dull/Ache"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Throbbing"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Tingling/Numbness/Burning"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>What is the worst time for your pain?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Morning"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="During day"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Evening"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Lying in bed"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Others"
-                        />
-                    </FormGroup>
-                    {formik.touched.painQuality && formik.errors.painQuality ? (
-                        <div>{formik.errors.painQuality}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-            
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        onChange={formik.handleChange}
-                        value={formik.values.painDuration}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        >
-                        <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
-                        <FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
-                        <FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
-                        <FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
-                    </RadioGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Has your current complaint caused any of the following?</FormLabel>
-                    <FormGroup sx={{display:'flex', flexDirection:'row'}}>
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
-                            label="Muscle weakness"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
-                            label="Bowel/Bladder problem"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
-                            label="Digestion"
-                        />
-                        <FormControlLabel
-                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
-                            label="Cardiac/Respiratory"
-                        />
-                       
-                    </FormGroup>
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} 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={formik.handleChange}
-                        value={formik.values.painDuration}
-                        sx={{display:'flex', flexDirection:'row'}}
-                        >
-                        <FormControlLabel value="yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="no" control={<Radio />} label="No" />
-                    </RadioGroup>
-                    {formik.touched.painDuration && formik.errors.painDuration ? (
-                        <div>{formik.errors.painDuration}</div>
-                    ) : null}
-                </FormControl>
-            </Grid>
-
-            <Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}> 
-                <FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
-            </Grid>
-
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="What is your goal from treatment?(ex-play golf without pain)" 
-                name='treatmentGoal'
-                onChange={formik.handleChange}
-                value={formik.values.treatmentGoal}
-                onBlur={formik.handleBlur}
-                />
-            </Grid>
-          
-        </Grid>
-        </form>
-
-        </>
-    )}
-            

src/Components/PatientForm/PastTreatment.tsx

@@ -0,0 +1,498 @@
+import {
+  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';
+import { PastTreatmentInterface } from '../Interface/Patient';
+
+type Props = {
+  handlePastTreatmentFormData: (patient:PastTreatmentInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function PastTreatmentForm({
+  handlePastTreatmentFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatient] = React.useState<PastTreatmentInterface>({
+    generalHealth: '',
+    presentProblemBefore: '',
+    ifYespresentProblemBefore: '',
+    ifYestreatmentProvided: '',
+    ifYesOutcome: '',
+    strokeBloodclotting: '',
+    ifYesstrokeBloodclotting: '',
+    dizzinessFetigue: '',
+    ifyesdizzinessFetigue: '',
+    antiColligent: '',
+    injuriesHospitalization: '',
+    supplementsOrDrugs: '',
+  });
+
+  useEffect(() => {
+    handlePastTreatmentFormData(patient);
+  }, [patient]);
+
+  return (
+    <>
+      <form>
+        <Grid container direction='row'>
+          <Grid
+            item
+            xs={12}
+            className='collapsable-form-style-radioButtons-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>Overall your General Health is:</FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.generalHealth
+                    : patient.generalHealth
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    generalHealth: event.target.value,
+                  }));
+                }}
+              >
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Excellent'
+                  control={<Radio />}
+                  label='Excellent'
+                />
+                <FormControlLabel
+                  disabled={type == 'display'}
+                  value='Very Good'
+                  control={<Radio />}
+                  label='Very Good'
+                />
+                <FormControlLabel
+                  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) => ({
+                    ...prevValues,
+                    presentProblemBefore: 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-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) => ({
+                    ...prevValues,
+                    strokeBloodclotting: 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={10}
+            lg={10}
+            md={10}
+            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) => ({
+                    ...prevValues,
+                    dizzinessFetigue: 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={10}
+            lg={10}
+            md={10}
+            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) => ({
+                    ...prevValues,
+                    antiColligent: 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-fullwidth'
+          >
+            <FormControl>
+              <FormLabel>
+                Have you ever had any major illness, injuries, hospitalization
+                or surgeries?
+              </FormLabel>
+              <RadioGroup
+                name='painDuration'
+                defaultValue={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.injuriesHospitalization
+                    : patient.injuriesHospitalization
+                }
+                sx={{ display: 'flex', flexDirection: 'row' }}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    injuriesHospitalization: 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} sx={{ marginLeft: 2, marginBottom: 3 }}>
+            <Table
+              handlePastTreatmentFormData={handlePastTreatmentFormData}
+              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/PastTreatment5.tsx

@@ -1,260 +0,0 @@
-import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
-import * as React from 'react';
-import Table from '../Helper/AddNewTable';
-
-interface FormValues {
-  generalHealth: string;
-  presentProblemBefore: string;
-  ifYespresentProblemBefore:string;
-  ifYestreatmentProvided: string;
-  ifYesOutcome: string;
-  strokeBloodclotting: string;
-  ifYesstrokeBloodclotting: string;
-  dizzinessFetigue: string;
-  ifyesdizzinessFetigue: string;
-  antiColligent: string;
-  injuriesHospitalization: string;
-  supplementsOrDrugs: string;
-}
-
-
-export default function PastTreatment5(){
-
-    const [values, setValues] = React.useState<FormValues>({
-        generalHealth: '',
-        presentProblemBefore: '',
-        ifYespresentProblemBefore:'',
-        ifYestreatmentProvided:'',
-        ifYesOutcome:'',
-        strokeBloodclotting: '',
-        ifYesstrokeBloodclotting: '',
-        dizzinessFetigue: '',
-        ifyesdizzinessFetigue:'',
-        antiColligent: '',
-        injuriesHospitalization: '',
-        supplementsOrDrugs:''
-      });
-
-    console.log("dsfdsfdsfg",values)
-    return(
-        <>
-        <form>
-      <Grid container direction="row">
-        
-      <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Overall your General Healgth is:</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            generalHealth: event.target.value,
-                          }));
-                        }}
-                      >
-                        <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) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    ifYespresentProblemBefore: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="Was treatment provided?If yes, by whom?" 
-                name='treatmentGoal'
-                disabled={values.presentProblemBefore!=='Yes'}
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    ifYestreatmentProvided: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            <Grid item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="Outcome?" 
-                name='treatmentGoal'
-                disabled={values.presentProblemBefore!=='Yes'}
-                onChange={(event) => {
-                  setValues((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"
-                        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 item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={values.strokeBloodclotting!=='Yes'}
-                onChange={(event) => {
-                  setValues((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'}}
-                        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 item xs={4} className='collapsable-form-style-form7'>
-                <TextField 
-                variant="outlined"
-                label="If yes, when?" 
-                name='treatmentGoal'
-                disabled={values.dizzinessFetigue!=='Yes'}
-                onChange={(event) => {
-                  setValues((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'}}
-                        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 item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
-                <FormControl>
-                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            injuriesHospitalization: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </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) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    supplementsOrDrugs: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            
-      </Grid>
-    </form>
-        </>
-    )
-}

src/Components/PatientForm/PatientForm.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Footer from "../Footer";
-import Header from "../Header";
-import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-import PersonalSection from './PersonalSection1';
+import Footer from '../Footer';
+import Header from '../Header';
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Grid,
+  Paper,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import PersonalInformationForm from './PersonalInformationSection';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
@@ -12,33 +24,23 @@ import MuiAccordionSummary, {
   AccordionSummaryProps,
 } from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
-import MedicalHistory from './MedicalHistorySection3';
-import FamilyFormSection from './FamilyFormSection2';
-import PainAnalysisSection4 from './PainAnalysisSection4';
-import PastTreatment5 from './PastTreatment5';
-import SystemReviewSection6 from './SyestemReviewSection6';
-import RecreationalHobbiesSection7 from './RecreationalHobbiesSection7';
-import OtherDetails8 from './OtherDetails8';
+import MedicalHistory from './MedicalHistorySection';
+import FamilyInformationForm from './FamilyInformationSection';
+import InjuryDetailsForm from './PainAnalysisSection';
+import PastTreatmentForm from './PastTreatment';
+import SystemReviewForm from './SyestemReviewSection';
+import RecreationalHobbiesForm from './RecreationalHobbiesSection';
+import OtherDetailsForm from './OtherDetailsSection';
+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';
+import { FamilyInformationInterface, InjuryDetailsInterface, MedicalHistoryInterface, OtherDetailsInterface, PastTreatmentInterface, PersonalInformationInterface, RecreationalHobbieInterface, SystemReviewInterface } from '../Interface/Patient';
 
-interface Patient {
-    fullName: string;
-    homePhone: string;
-    cellPhone: string;
-    email: string;
-    age: number;
-    dateOfBirth: string;
-    socialSecurityNumber: string;
-    mailingAddress: string;
-    city: string;
-    state: string;
-    zipCode: string;
-    gender: string;
-    maritalStatus: string;
-  }
-
-  const Accordion = styled((props: AccordionProps) => (
+const Accordion = styled((props: AccordionProps) => (
   <MuiAccordion disableGutters elevation={0} square {...props} />
-  ))(({ theme }) => ({
+))(({ theme }) => ({
   border: `1px solid ${theme.palette.divider}`,
   '&:not(:last-child)': {
     borderBottom: 0,
@@ -46,14 +48,14 @@ interface Patient {
   '&:before': {
     display: 'none',
   },
-  }));
+}));
 
-  const AccordionSummary = styled((props: AccordionSummaryProps) => (
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
   <MuiAccordionSummary
     expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
     {...props}
   />
-  ))(({ theme }) => ({
+))(({ theme }) => ({
   backgroundColor:
     theme.palette.mode === 'dark'
       ? 'rgba(255, 255, 255, .05)'
@@ -65,36 +67,131 @@ interface Patient {
   '& .MuiAccordionSummary-content': {
     marginLeft: theme.spacing(1),
   },
-  }));
+}));
 
-  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
   padding: theme.spacing(2),
   borderTop: '1px solid rgba(0, 0, 0, .125)',
-  }));
+}));
 
-export default function PatientForm(){
+type Props = {
+  type: any;
+};
+
+export default function PatientForm({ type }: Props) {
+  const [alertProps, setAlertProps] = React.useState<any>({});
   const [expanded, setExpanded] = React.useState<string | false>('panel1');
   const [isChecked, setIsChecked] = React.useState(false);
-    const [signature,setSignature]=React.useState('');
+  const [signature, setSignature] = React.useState<any>();
+  const [personalInformation, setPersonalInformation] = React.useState<any>({});
+  const [familyInformation, setFamilyInformation] = React.useState<any>({});
+  const [medicalHistory, setMedicalHistory] = React.useState<any>({});
+  const [injuryDetails, setInjuryDetails] = React.useState<any>({});
+  const [pastTreatment, setPastTreatment] = React.useState<any>({});
+  const [systemReviewQuestions, setSystemReviewQuestions] = React.useState<any>({});
+  const [recreationalActivities, setRecreationalActivities] = React.useState<any>({});
+  const [otherDetails, setOtherDetails] = React.useState<any>({});
+  const [allPatientData, setAllPatientData] = React.useState<any>([]);
+  const [patientDetailsButtonFlag, setPatientDetailsButtonFlag] =
+    React.useState<boolean>(false);
 
-    const [patient, setPatient] = React.useState<Patient>({
-        fullName: "",
-        homePhone: "",
-        cellPhone: "",
-        email: "",
-        age: 0,
-        dateOfBirth: "",
-        socialSecurityNumber: "",
-        mailingAddress: "",
-        city: "",
-        state: "",
-        zipCode: "",
-        gender: "",
-        maritalStatus: "",
+  const handlePersonalInformationFormData = (patient: PersonalInformationInterface) => {
+    setPersonalInformation(patient);
+  };
+
+  const handleFamilyInformationFormData = (
+   patient:FamilyInformationInterface
+  ) => {
+    setFamilyInformation(patient);
+  };
+
+  const handleMedicalHistoryFormData = (patient:MedicalHistoryInterface) => {
+    setMedicalHistory(patient);
+  };
+
+  const handleInjuryDetailsFormData = (patient:InjuryDetailsInterface) => {
+    setInjuryDetails(patient);
+  };
+
+  const handlePastTreatmentFormData = (patient:PastTreatmentInterface) => {
+    setPastTreatment(patient);
+  };
+
+  const handleSystemReviewFormData = (patient:SystemReviewInterface) => {
+    setSystemReviewQuestions(patient);
+  };
+
+  const handleRecreationalActivitiesFormData = (patient:RecreationalHobbieInterface) => {
+    setRecreationalActivities(patient);
+  };
+
+  const handleOtherDetailsFormData = (patient:OtherDetailsInterface) => {
+    setOtherDetails(patient);
+  };
+
+  const handleSubmit = () => {
+    const saved = JSON.parse(localStorage.getItem('entry') || '{}');
+    const newPatientData = {
+      personalInformation: personalInformation,
+      familyInformation: familyInformation,
+      medicalHistory: medicalHistory,
+      injuryDetails: injuryDetails,
+      pastTreatment: pastTreatment,
+      systemReviewQuestions: systemReviewQuestions,
+      recreationalActivities: recreationalActivities,
+      otherDetails: otherDetails,
+      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 (
+      personalInformation.fullName !== '' &&
+      personalInformation.cellPhone &&
+      /^\d{10}$/.test(personalInformation.cellPhone) &&
+      personalInformation.email &&
+      /^\S+@\S+\.\S+$/.test(personalInformation.email) &&
+      personalInformation.age &&
+      personalInformation.age !== '' &&
+      Number(personalInformation.age) >= 0 &&
+      personalInformation.mailingAddress &&
+      personalInformation.mailingAddress !== ''
+    ) {
+      TextFile();
+      setPatientDetailsButtonFlag(true);
+      setAlertProps({
+        open: true,
+        severity: 'success',
+        message: 'The patient details have been submitted!',
+        duration: 5000,
       });
+    } else {
+      setAlertProps({
+        open: true,
+        severity: 'error',
+        message: 'Please fill all the mandatory fields with valid data!',
+        duration: 4000,
+      });
+    }
+  };
 
-      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
+  const TextFile = () => {
+    const element = document.createElement('a');
+    //@ts-ignore
+    const textFile = new Blob([localStorage.getItem('patientData')], {
+      type: 'text/json',
+    });
+    element.href = URL.createObjectURL(textFile);
+    element.download = 'patientData.json';
+    document.body.appendChild(element);
+    element.click();
   };
 
   const handleExpandChange =
@@ -102,149 +199,361 @@ export default function PatientForm(){
       setExpanded(newExpanded ? panel : false);
     };
 
-      const handleCheckboxChange = (event:any) => {
+  const handleCheckboxChange = (event: any) => {
     setIsChecked(event.target.checked);
   };
 
+  const handleAlertClose = () => {
+    setAlertProps({});
+  };
 
-    return(
+  const patientData = localStorage.getItem('patientData')
+    ? //@ts-ignore
+      JSON.parse(localStorage.getItem('patientData'))
+    : [];
+
+  return (
     <>
+      {alertProps && alertProps.open && (
+        <AlertDialog
+          open={alertProps.open}
+          message={alertProps.message}
+          severity={alertProps.severity}
+          duration={alertProps.duration}
+          handleAlertClose={handleAlertClose}
+        />
+      )}
       <Paper elevation={0} className='app-screen-constants'>
-                <Header/>
-                    <Paper  elevation={0} sx={{margin:4, minHeight:550}} >
-                    <form onSubmit={handleSubmit}>
-                        <Typography sx={{fontSize:20}}  gutterBottom>
+        <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"
+            <Accordion
+              expanded={expanded === 'panel1'}
+              onChange={handleExpandChange('panel1')}
             >
-                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
+              <AccordionSummary
+                // expandIcon={<ExpandMoreIcon />}
+                aria-controls='panel1a-content'
+                id='panel1a-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Personal Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                                <PersonalSection/>
-                            </AccordionDetails>
-                           
-                        </Accordion>
-
-                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
-                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
-                            </AccordionSummary>
-
-                            <AccordionDetails>
-                                <FamilyFormSection/>
+                <PersonalInformationForm
+                  handlePersonalInformationFormData={handlePersonalInformationFormData}
+                  patientDataDiplay={patientData.personalInformation}
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
-                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
+            <Accordion
+              expanded={expanded === 'panel2'}
+              onChange={handleExpandChange('panel2')}
+            >
+              <AccordionSummary
+                aria-controls='panel2d-content'
+                id='panel2d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Family Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                                <MedicalHistory/>
+                <FamilyInformationForm
+                  handleFamilyInformationFormData={handleFamilyInformationFormData}
+                  patientDataDiplay={patientData.familyInformation}
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
-                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
-                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
-                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
+            <Accordion
+              expanded={expanded === 'panel3'}
+              onChange={handleExpandChange('panel3')}
+            >
+              <AccordionSummary
+                aria-controls='panel3d-content'
+                id='panel3d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Medical History Information
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                                <PainAnalysisSection4/>
+                <MedicalHistory
+                  handleMedicalHistoryFormData={handleMedicalHistoryFormData}
+                  patientDataDiplay={patientData.medicalHistory}
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
-                        <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>
+            <Accordion
+              expanded={expanded === 'panel9'}
+              onChange={handleExpandChange('panel9')}
+            >
+              <AccordionSummary
+                aria-controls='panel9d-content'
+                id='panel9d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Pain Zone
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                                <PastTreatment5/>
+                {type === 'fill' ? (
+                  <PatientImageMarker />
+                ) : (
+                  <ViewPatientImageMarker />
+                )}
               </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>
+            <Accordion
+              expanded={expanded === 'panel4'}
+              onChange={handleExpandChange('panel4')}
+            >
+              <AccordionSummary
+                aria-controls='panel4d-content'
+                id='panel4d-header'
+              >
+                <Typography sx={{ fontSize: 18 }}>
+                  Patient's Injury Details
+                </Typography>
               </AccordionSummary>
 
               <AccordionDetails>
-                                <SystemReviewSection6/>
+                <InjuryDetailsForm
+                  handleInjuryDetailsFormData={handleInjuryDetailsFormData}
+                  patientDataDiplay={patientData.injuryDetails}
+                  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>
+            <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>
-                                <RecreationalHobbiesSection7/>
+                <PastTreatmentForm
+                  handlePastTreatmentFormData={handlePastTreatmentFormData}
+                  patientDataDiplay={patientData.pastTreatment}
+                  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>
+            <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>
-                                <OtherDetails8/>
+                <SystemReviewForm
+                  handleSystemReviewFormData={handleSystemReviewFormData}
+                  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>
+                <RecreationalHobbiesForm
+                  handleRecreationalActivitiesFormData={handleRecreationalActivitiesFormData}
+                  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>
+                <OtherDetailsForm
+                  handleOtherDetailsFormData={handleOtherDetailsFormData}
+                  patientDataDiplay={patientData.otherDetails}
+                  type={type}
+                />
               </AccordionDetails>
             </Accordion>
 
             <Grid container>
-
               <Grid item xs={12} className='collapsable-form-style-multiline'>
                 <FormGroup sx={{ marginTop: 3 }}>
                   <FormControlLabel
                     required
-                              control={<Checkbox checked={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."
+                    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={6} className='collapsable-form-style'>
-                              <TextField 
-                              
-                              variant="outlined"
-                              label="SIGNATURE" 
-                              name='treatmentGoal'
-                              placeholder='Please type your name'
-                              onChange={(event) => {
-                                setSignature(event.target.value)
-                              }}
+              <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>
+                    </>
+                  ) : (
+                    <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
-                            type="submit"
-                            variant="contained"
-                            color="primary"
-                            sx={{ margin: 5, left: '40%', width: '200px' }}
-                            disabled={isChecked==false || signature==''}
+                    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>
-                        </form>
-                       
+          </Grid>
+          {/* </form> */}
         </Paper>
-                <Footer/>
+        <Footer />
       </Paper>
     </>
-    )
+  );
 }

src/Components/PatientForm/PersonalInformationSection.tsx

@@ -0,0 +1,524 @@
+import * as React from 'react';
+import {
+  Button,
+  FormControl,
+  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';
+import { PersonalInformationInterface } from '../Interface/Patient';
+
+type Props = {
+  handlePersonalInformationFormData: (patient: PersonalInformationInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function PersonalInformationForm({
+  handlePersonalInformationFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [birthDateValue, setBirthDateValue] = React.useState<any>();
+  const [patient, setPatient] = React.useState<PersonalInformationInterface>({
+    fullName: '',
+    homePhone: '',
+    cellPhone: '',
+    email: '',
+    age: '',
+    dateOfBirth: birthDateValue,
+    socialSecurityNumber: '',
+    mailingAddress: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    gender: 'male',
+  });
+
+  const [errors, setErrors] = React.useState<any>({
+    fullNameError: false,
+    cellPhoneError: false,
+    emailError: false,
+    ageError: false,
+    mailingAddressFalse: false,
+  });
+
+  useEffect(() => {
+    handlePersonalInformationFormData(patient);
+  }, [patient]);
+
+  return (
+    <>
+      <Grid container direction='row' className='section1-test-class'>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style '
+        >
+          <TextField
+            variant='outlined'
+            label="Patient's Full Name"
+            name='fullName'
+            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 === '') {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: true,
+                }));
+              } else {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  fullNameError: false,
+                }));
+              }
+            }}
+            required
+            error={errors.fullNameError}
+            helperText={errors.fullNameError ? 'Please enter your name' : ''}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Phone Number'
+            name='cellPhone'
+            type='number'
+            placeholder='Please enter your cell Phone number'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.cellPhone
+                : patient.cellPhone
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              let value = e.target.value;
+              if (value[0] === '0') {
+                value = value.slice(1);
+              }
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                cellPhone: value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\d{10}$/.test(e.target.value)) {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: true,
+                }));
+              } else {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  cellPhoneError: false,
+                }));
+              }
+            }}
+            error={errors.cellPhoneError}
+            helperText={
+              errors.cellPhoneError
+                ? 'Please enter a valid 10-digit phone number'
+                : ''
+            }
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Home Phone Number'
+            name='homePhone'
+            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
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Email'
+            name='email'
+            placeholder='Please enter your email'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.email
+                : patient.email
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                email: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: true,
+                }));
+              } else {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  emailError: false,
+                }));
+              }
+            }}
+            error={errors.emailError}
+            helperText={
+              errors.emailError ? 'Please enter a valid email address' : ''
+            }
+          />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Age'
+            name='age'
+            type='number'
+            placeholder='Please enter your age'
+            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 === '') {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: true,
+                }));
+              } else {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  ageError: false,
+                }));
+              }
+            }}
+            error={errors.ageError}
+            helperText={errors.ageError ? 'Please enter your age' : ''}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <FormControl>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DatePicker
+                label='Date of Birth'
+                value={
+                  type == 'display'
+                    ? patientDataDiplay && patientDataDiplay.dateOfBirth
+                    : birthDateValue
+                }
+                disabled={type == 'display'}
+                onChange={(newValue) => {
+                  setBirthDateValue(newValue);
+                }}
+                renderInput={(params) => (
+                  <TextField variant='outlined' {...params} />
+                )}
+              />
+            </LocalizationProvider>
+          </FormControl>
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            variant='outlined'
+            label='Social Security Number'
+            name='socialSecurityNumber'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.socialSecurityNumber
+                : patient.socialSecurityNumber
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                socialSecurityNumber: e.target.value,
+              }));
+            }}
+            // onBlur={formik.handleBlur}
+            // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
+            // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
+          />
+        </Grid>
+
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style'
+        >
+          <TextField
+            required
+            variant='outlined'
+            label='Mailing Address'
+            name='mailingAddress'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.mailingAddress
+                : patient.mailingAddress
+            }
+            disabled={type == 'display'}
+            onChange={(e) => {
+              setPatient((prevValues: any) => ({
+                ...prevValues,
+                mailingAddress: e.target.value,
+              }));
+            }}
+            onBlur={(e) => {
+              if (e.target.value === '') {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: true,
+                }));
+              } else {
+                setErrors((prevValues: any) => ({
+                  ...prevValues,
+                  mailingAddressError: false,
+                }));
+              }
+            }}
+            error={errors.mailingAddressError}
+            helperText={
+              errors.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/PersonalSection1.tsx

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

src/Components/PatientForm/RecreationalHobbiesSection.tsx

@@ -0,0 +1,435 @@
+import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
+import React, { useEffect } from "react";
+import { RecreationalHobbieInterface } from "../Interface/Patient";
+
+  type Props = {
+    handleRecreationalActivitiesFormData:(patient:RecreationalHobbieInterface)=> void
+    patientDataDiplay:any;
+    type:string;
+  }
+
+export default function RecreationalHobbiesForm({handleRecreationalActivitiesFormData,patientDataDiplay,type}:Props){
+    const [patient, setPatient] = React.useState<RecreationalHobbieInterface>({
+          hobbies: '',
+          educationLevel: '',
+          excercise:'',
+          excerciseExplanation:'',
+          tobacco: '',
+          tobaccoExplanation:'',
+          alcohol: '',
+          alcoholExplanation:'',
+          healthyDiet: '',
+          healthyDietExplanation:'',
+          sleep: '',
+          sleepExplanation: '',
+          workSchool: '',
+          workSchoolExplanation:'',
+          familyLife: '',
+          familyLifeExplanation:'',
+          drugs: '',
+          drugsExplanation:''
+      });
+
+
+    useEffect(()=>{
+      handleRecreationalActivitiesFormData(patient)
+    },[patient])
+    
+    return(
+        <>
+        
+        <Grid container direction="row">
+        <Grid item xs={12} className='collapsable-form-style-multiline'>
+          <FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
+                <TextField 
+                multiline
+                variant="outlined"
+                label="" 
+                value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies}
+                disabled={type=='display'}
+                onChange={(event:any) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    hobbies: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
+        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+                <FormControl>
+                    <FormLabel>Your education level:</FormLabel>
+                    <RadioGroup
+                        sx={{display:'flex', flexDirection:'row'}}
+                        defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.educationLevel:patient.educationLevel}
+                        onChange={(event) => {
+                          setPatient((prevValues) => ({
+                            ...prevValues,
+                            educationLevel: event.target.value,
+                          }));
+                        }}
+                        >
+                        <FormControlLabel disabled={type=='display'} value="High School" control={<Radio />} label="High School" />
+                        <FormControlLabel disabled={type=='display'} value="Some college" control={<Radio />} label="Some college" />
+                        <FormControlLabel disabled={type=='display'} value="College Graduate" control={<Radio />} label="College Graduate" />
+                        <FormControlLabel disabled={type=='display'} value="Post college" control={<Radio />} label="Post college" />
+                        <FormControlLabel disabled={type=='display'} value="Other" control={<Radio />} label="Other" />
+                    </RadioGroup>
+              </FormControl>
+          </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            excercise: 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-form7'>
+                <TextField 
+                disabled={patient.excercise!=='Yes'||type=='display'}
+                variant="outlined"
+                label="Times per week?" 
+                name='treatmentGoal'
+                value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    excerciseExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            tobacco: 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-form7'>
+                <TextField 
+                disabled={patient.tobacco!=='Yes'||type=='display'}
+                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) => ({
+                    ...prevValues,
+                    tobaccoExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            alcohol: 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-form7'>
+                <TextField 
+                disabled={patient.alcohol!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
+                variant="outlined"
+                label="How many drinks per week?" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    alcoholExplanation: event.target.value,
+                  }));
+                }}
+                />
+            </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            healthyDiet: 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-form7'>
+                <TextField 
+                disabled={patient.healthyDiet!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
+                variant="outlined"
+                label="If no, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    healthyDietExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            sleep: 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-form7'>
+                <TextField 
+                disabled={patient.sleep!=='No'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.sleepExplanation:patient.sleepExplanation}
+                variant="outlined"
+                label="If no, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    sleepExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            workSchool: 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-form7'>
+                <TextField 
+                disabled={patient.workSchool!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    workSchool: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            familyLife: 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-form7'>
+                <TextField 
+                disabled={patient.familyLife!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    familyLifeExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>
+
+          <Grid item xs={12}
+          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) => ({
+                            ...prevValues,
+                            drugs: 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-form7'>
+                <TextField 
+                disabled={patient.drugs!=='Yes'||type=='display'}
+                value={type=='display'?patientDataDiplay && patientDataDiplay.drugsExplanation:patient.drugsExplanation}
+                variant="outlined"
+                label="If yes, explain" 
+                name='treatmentGoal'
+                onChange={(event) => {
+                  setPatient((prevValues) => ({
+                    ...prevValues,
+                    drugsExplanation: event.target.value,
+                  }));
+                }}
+                />
+          </Grid>            
+        </Grid>
+        </>
+    )
+}

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -1,361 +0,0 @@
-import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
-import React from "react";
-
-interface FormValues {
-    hobbies: string;
-    educationLevel: string;
-    excercise: string;
-    excerciseExplanation: string;
-    tobacco: string;
-    tobaccoExplanation: string;
-    alcohol: string;
-    alcoholExplanation: string;
-    healthyDiet: string;
-    healthyDietExplanation: string;
-    sleep: string;
-    sleepExplanation: string;
-    workSchool: string;
-    workSchoolExplanation: string;
-    familyLife: string;
-    familyLifeExplanation: string;
-    drugs: string;
-    drugsExplanation:string;
-  }
-
-export default function RecreationalHobbiesSection7(){
-    const [values, setValues] = React.useState<FormValues>({
-          hobbies: '',
-          educationLevel: '',
-          excercise:'',
-          excerciseExplanation:'',
-          tobacco: '',
-          tobaccoExplanation:'',
-          alcohol: '',
-          alcoholExplanation:'',
-          healthyDiet: '',
-          healthyDietExplanation:'',
-          sleep: '',
-          sleepExplanation: '',
-          workSchool: '',
-          workSchoolExplanation:'',
-          familyLife: '',
-          familyLifeExplanation:'',
-          drugs: '',
-          drugsExplanation:''
-      });
-    return(
-        <>
-        
-        <Grid container direction="row">
-        <Grid item xs={12} className='collapsable-form-style-multiline'>
-          <FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='explanation'
-                onChange={(event:any) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    hobbies: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
-
-        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Your education level:</FormLabel>
-                    <RadioGroup
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            educationLevel: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="High School" control={<Radio />} label="High School" />
-                        <FormControlLabel value="Some college" control={<Radio />} label="Some college" />
-                        <FormControlLabel value="College Graduate" control={<Radio />} label="College Graduate" />
-                        <FormControlLabel value="Post college" control={<Radio />} label="Post college" />
-                        <FormControlLabel value="Other" control={<Radio />} label="Other" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Do you excercise?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            excercise: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.excercise!=='Yes'}
-                variant="outlined"
-                label="Times per week?" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    excerciseExplanation: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Use tobacco?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            tobacco: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.tobacco!=='Yes'}
-                variant="outlined"
-                label="Packs/Cans per day(If you have quit, when did you quit?)" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    excerciseExplanation: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Consume alcohol?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            alcohol: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.alcohol!=='Yes'}
-                variant="outlined"
-                label="How many drinks per week?" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    alcoholExplanation: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Have a healthy diet?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            healthyDiet: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.healthyDiet!=='No'}
-                variant="outlined"
-                label="If no, explain" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    healthyDietExplanation: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Get adequate sleep?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            sleep: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.sleep!=='No'}
-                variant="outlined"
-                label="If no, explain" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    sleepExplanation: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Is Work/School stressful to you?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            workSchool: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.workSchool!=='Yes'}
-                variant="outlined"
-                label="If yes, explain" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    workSchool: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Family life stressful to you?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            familyLife: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.familyLife!=='Yes'}
-                variant="outlined"
-                label="If yes, explain" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    familyLifeExplanation: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Use recreational drugs?</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            drugs: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={6} className='collapsable-form-style-form7'>
-                <TextField 
-                disabled={values.drugs!=='Yes'}
-                variant="outlined"
-                label="If yes, explain" 
-                name='treatmentGoal'
-                onChange={(event) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    drugsExplanation: event.target.value,
-                  }));
-                }}
-                />
-          </Grid>            
-        </Grid>
-        </>
-    )
-}

src/Components/PatientForm/SyestemReviewSection.tsx

@@ -0,0 +1,731 @@
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import React, { useEffect } from 'react';
+import { SystemReviewInterface } from '../Interface/Patient';
+
+type Props = {
+  handleSystemReviewFormData: (patient:SystemReviewInterface) => void;
+  patientDataDiplay: any;
+  type: string;
+};
+
+export default function SystemReviewForm({
+  handleSystemReviewFormData,
+  patientDataDiplay,
+  type,
+}: Props) {
+  const [patient, setPatients] = React.useState<SystemReviewInterface>({
+    eyes: '',
+    IntestinesBowls: '',
+    jointsBones: '',
+    allergies: '',
+    earsNoseMouth: '',
+    urinary: '',
+    skin: '',
+    psychological: '',
+    heart: '',
+    muscles: '',
+    internalOrgans: '',
+    gynecological: '',
+    lungsBreathing: '',
+    nerves: '',
+    blood: '',
+    prostate: '',
+    explanation: '',
+  });
+
+  useEffect(() => {
+    handleSystemReviewFormData(patient);
+  }, [patient]);
+  return (
+    <>
+      <Grid item xs={12} className='collapsable-form-style '>
+        <FormLabel sx={{ fontWeight: 600 }}>
+          Please choose body areas or systems where you may have problems:
+        </FormLabel>
+      </Grid>
+      <Grid container direction='row'>
+        <Grid
+          item
+          xs={12}
+          xl={3}
+          lg={4}
+          md={6}
+          sm={12}
+          className='collapsable-form-style-radioButtons'
+        >
+          <FormControl>
+            <FormLabel>Eyes</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.eyes : patient.eyes
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  eyes: 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'
+        >
+          <FormControl>
+            <FormLabel>Intestines/Bowls</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.IntestinesBowls
+                  : patient.IntestinesBowls
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  IntestinesBowls: 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'
+        >
+          <FormControl>
+            <FormLabel>Joints/Bones</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.jointsBones
+                  : patient.jointsBones
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  jointsBones: 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'
+        >
+          <FormControl>
+            <FormLabel>Allergies</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.allergies
+                  : patient.allergies
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  allergies: 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'
+        >
+          <FormControl>
+            <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.earsNoseMouth
+                  : patient.earsNoseMouth
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  earsNoseMouth: 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'
+        >
+          <FormControl>
+            <FormLabel>Urinary</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.urinary : patient.urinary
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  urinary: 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'
+        >
+          <FormControl>
+            <FormLabel>Skin</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.skin : patient.skin
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  skin: 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'
+        >
+          <FormControl>
+            <FormLabel>Psychological/Emotional</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.psychological
+                  : patient.psychological
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  psychological: 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'
+        >
+          <FormControl>
+            <FormLabel>Heart</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.heart : patient.heart
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  heart: 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'
+        >
+          <FormControl>
+            <FormLabel>Muscles</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.muscles : patient.muscles
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  muscles: 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'
+        >
+          <FormControl>
+            <FormLabel>Internal Organs</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.internalOrgans
+                  : patient.internalOrgans
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  internalOrgans: 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'
+        >
+          <FormControl>
+            <FormLabel>Gynecological menstrual/Brest</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.gynecological
+                  : patient.gynecological
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  gynecological: 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'
+        >
+          <FormControl>
+            <FormLabel>Lungs/Breathing</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.lungsBreathing
+                  : patient.lungsBreathing
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  lungsBreathing: 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'
+        >
+          <FormControl>
+            <FormLabel>Nerves</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.nerves : patient.nerves
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  nerves: 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'
+        >
+          <FormControl>
+            <FormLabel>Blood</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display' ? patientDataDiplay && patientDataDiplay.blood : patient.blood
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  blood: 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'
+        >
+          <FormControl>
+            <FormLabel>Prostate/Testicular/Penile</FormLabel>
+            <RadioGroup
+              name='painDuration'
+              defaultValue={
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.prostate
+                  : patient.prostate
+              }
+              sx={{ display: 'flex', flexDirection: 'row' }}
+              onChange={(event) => {
+                setPatients((prevValues) => ({
+                  ...prevValues,
+                  prostate: 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={10}
+          lg={10}
+          md={10}
+          sm={12}
+          className='collapsable-form-style-multiline'
+        >
+          <FormLabel>Please explain your check marks:</FormLabel>
+          <br></br>
+          <TextField
+            multiline
+            variant='outlined'
+            label=''
+            name='explanation'
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.explanation
+                : patient.explanation
+            }
+            disabled={type == 'display'}
+            onChange={(event: any) => {
+              setPatients((prevValues) => ({
+                ...prevValues,
+                explanation: event.target.value,
+              }));
+            }}
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}

src/Components/PatientForm/SyestemReviewSection6.tsx

@@ -1,358 +0,0 @@
-import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
-import React from "react";
-
-interface FormValues {
-    eyes: string;
-    IntestinesBowls: string;
-    jointsBones:string;
-    allergies: string;
-    earsNoseMouth: string;
-    urinary: string;
-    skin: string;
-    psychological: string;
-    heart: string;
-    muscles: string;
-    internalOrgans: string;
-    gynecological: string;
-    lungsBreathing: string;
-    nerves: string;
-    blood: string;
-    prostate: string;
-    explanation:string;
-  }
-
-export default function SystemReviewSection6(){
-    const [values, setValues] = React.useState<FormValues>({
-        eyes: '',
-        IntestinesBowls: '',
-        jointsBones:'',
-        allergies: '',
-        earsNoseMouth: '',
-        urinary: '',
-        skin: '',
-        psychological: '',
-        heart: '',
-        muscles: '',
-        internalOrgans: '',
-        gynecological: '',
-        lungsBreathing: '',
-        nerves: '',
-        blood: '',
-        prostate: '',
-        explanation:'',
-      });
-    return(
-        <>
-        <Grid item xs={12} className='collapsable-form-style '> 
-            <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
-        </Grid>
-        <Grid container direction="row">
-        <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Eyes</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            eyes: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Intestines/Bowls</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={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Joints/Bones</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            jointsBones: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Allergies</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            allergies: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            earsNoseMouth: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Urinary</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            urinary: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Skin</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            skin: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Psychological/Emotional</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            psychological: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Heart</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            heart: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Muscles</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            muscles: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Internal Organs</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            internalOrgans: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Gynecological menstrual/Brest</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            gynecological: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Lungs/Breathing</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            lungsBreathing: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Nerves</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            nerves: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Blood</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            blood: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-                <FormControl>
-                    <FormLabel>Prostate/Testicular/Penile</FormLabel>
-                    <RadioGroup
-                        name="painDuration"
-                        sx={{display:'flex', flexDirection:'row'}}
-                        onChange={(event) => {
-                          setValues((prevValues) => ({
-                            ...prevValues,
-                            prostate: event.target.value,
-                          }));
-                        }}
-                        >
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
-                    </RadioGroup>
-              </FormControl>
-          </Grid>
-          <Grid item xs={6} className='collapsable-form-style-multiline'>
-          <FormLabel>Please explain your check marks:</FormLabel><br></br>
-                <TextField 
-                multiline
-                variant="outlined"
-                label="" 
-                name='explanation'
-                onChange={(event:any) => {
-                  setValues((prevValues) => ({
-                    ...prevValues,
-                    explanation: event.target.value,
-                  }));
-                }}
-                />
-            </Grid>
-            
-        </Grid>
-        </>
-    )
-}