issues table added

package-lock.json

@@ -40,6 +40,7 @@
         "react-leaflet": "^4.2.1",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
+        "react-table": "^7.8.0",
         "recharts": "^2.7.2",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4",
@@ -15964,6 +15965,18 @@
         "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-table": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
+      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "react-table": "^7.8.0",
     "recharts": "^2.7.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",

src/App.css

@@ -45,4 +45,16 @@
     margin: 5%;
     padding-top: 12px;
     padding-left: 16px;
+}
+
+.illness-table-style td{
+    padding:10px !important;
+}
+
+.addNew-form-table-style .MuiInputBase-root{
+    height: 45px !important
+}
+
+.addNew-form-table-style label {
+    padding: 0px;
 }

src/Components/Helper/AddNewTable.tsx

@@ -0,0 +1,165 @@
+import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
+import * as React from 'react';
+
+interface RowData {
+  date: string;
+  illness: string;
+  treatment: string;
+  results: string;
+}
+
+interface DataTableProps {
+  data: RowData[];
+  onAddRow: () => void;
+}
+
+const DataTable: React.FC= () => {
+
+  const [illnessFromData, setIllnessFromData] = React.useState<any>({
+    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'}
+  ]);
+
+  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;
+      const newIllnessData = [
+        ...illnessData,
+        {
+          ...illnessFromData,
+          id: newId
+        }
+      ];
+      setIllnessData(newIllnessData);
+      setIllnessFromData({
+        id: 0,
+        date: '',
+        illness: '',
+        treatment: '',
+        results: ''
+      });
+    }
+  };
+
+  console.log("sdfsdfdsf",illnessData, illnessFromData)
+  
+
+  return (
+    <>
+    <FormLabel>Please enter the details below:</FormLabel><br></br>
+    <FormControl>
+      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
+        <Grid item xs={2} className='addNew-form-table-style'>
+            <TextField 
+              required
+                variant="outlined"
+                label="Date" 
+                value={illnessFromData.date}
+                onChange={(event) => {
+                  setIllnessFromData((prevValues:any) => ({
+                    ...prevValues,
+                    date: event.target.value,
+                  }));
+                }}
+                />
+        </Grid>
+        <Grid item xs={3.7} className='addNew-form-table-style'>
+            <TextField 
+              required
+                variant="outlined"
+                label="Injury/Illness/Surgeries" 
+                value={illnessFromData.illness}
+                onChange={(event) => {
+                  setIllnessFromData((prevValues:any) => ({
+                    ...prevValues,
+                    illness: event.target.value,
+                  }));
+                }}
+                />
+        </Grid>
+        <Grid item xs={3.5} className='addNew-form-table-style'>
+            <TextField 
+              required
+                variant="outlined"
+                label="Treatment" 
+                value={illnessFromData.treatment}
+                onChange={(event) => {
+                  setIllnessFromData((prevValues:any) => ({
+                    ...prevValues,
+                    treatment: event.target.value,
+                  }));
+                }}
+                />
+        </Grid>
+        <Grid item xs={2} className='addNew-form-table-style'>
+            <TextField 
+                required
+                variant="outlined"
+                label="Results" 
+                value={illnessFromData.results}
+                onChange={(event) => {
+                  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>
+        
+      </Grid>
+    </FormControl>
+    
+     
+      <TableContainer sx={{width:800}} 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='left'>Treatment</TableCell>
+              <TableCell align='left'>Results</TableCell>
+              <TableCell align='left'></TableCell>
+            </TableRow>
+          </TableHead>
+          <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'> 
+                  <Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+};
+
+export default DataTable;

src/Components/PatientForm/OtherDetails8.tsx

@@ -11,10 +11,11 @@ interface FormValues {
     orthotics:string;
     brestExam: any;
     pregnancy:string;
-    menstralCycle: string;
+    menstralCycle: any;
   }
 
 export default function OtherDetails8(){
+  
     const [values, setValues] = React.useState<FormValues>({
         familyHistory: '',
         sleep: '',
@@ -22,8 +23,19 @@ export default function OtherDetails8(){
         orthotics:'',
         brestExam: dayjs('2022-04-17'),
         pregnancy:'',
-        menstralCycle: '',
+        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(
         <>
@@ -99,26 +111,26 @@ export default function OtherDetails8(){
               </FormControl>
           </Grid>
 
-          {/* <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+          <FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
                 <FormControl>
-                    <FormLabel>Date of last gynecological and brest exam?</FormLabel>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}><br></br>
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <DatePicker
-                   
                     value={values.brestExam}
                     onChange={(event) => {
-                        setValues((prevValues) => ({
+                      const formattedDate = formatDate(event)
-                          ...prevValues,
+                      setValues((prevValues) => ({
-                          brestExam: event.target.value,
+                        ...prevValues,
-                        }));
+                        brestExam: formattedDate,
+                      }));
                       }}
                     renderInput={(params) => <TextField   variant="outlined" {...params} />}
                     />
                 </LocalizationProvider>
               </FormControl>
-          </Grid> */}
+          </Grid>
 
-          <Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3, marginBottom:2}}> 
+          <Grid item xs={12} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}> 
                 <FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
           </Grid>
 
@@ -141,20 +153,21 @@ export default function OtherDetails8(){
           </Grid>
 
           <Grid item xs={12} className='collapsable-form-style-radioButtons'>
+            <FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
                 <FormControl>
-                    <FormLabel>Date of last menstural cycle?</FormLabel>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}><br></br>
-                    <RadioGroup
+                    <DatePicker
-                        sx={{display:'flex', flexDirection:'row'}}
+                    value={values.menstralCycle}
-                        onChange={(event) => {
+                    onChange={(event) => {
-                          setValues((prevValues) => ({
+                      const formattedDate = formatDate(event)
-                            ...prevValues,
+                      setValues((prevValues) => ({
-                            orthotics: event.target.value,
+                        ...prevValues,
-                          }));
+                        menstralCycle: formattedDate,
-                        }}
+                      }));
-                        >
+                      }}
-                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+                    renderInput={(params) => <TextField   variant="outlined" {...params} />}
-                        <FormControlLabel value="No" control={<Radio />} label="No" />
+                    />
-                    </RadioGroup>
+                </LocalizationProvider>
               </FormControl>
           </Grid>
 

src/Components/PatientForm/PastTreatment5.tsx

@@ -1,5 +1,6 @@
 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;
@@ -16,6 +17,7 @@ interface FormValues {
   supplementsOrDrugs: string;
 }
 
+
 export default function PastTreatment5(){
 
     const [values, setValues] = React.useState<FormValues>({
@@ -32,7 +34,7 @@ export default function PastTreatment5(){
         injuriesHospitalization: '',
         supplementsOrDrugs:''
       });
-    
+
     console.log("dsfdsfdsfg",values)
     return(
         <>
@@ -246,6 +248,12 @@ export default function PastTreatment5(){
                 }}
                 />
             </Grid>
+
+            <Grid item xs={12} >
+                <Table />
+            </Grid>
+
+            
       </Grid>
     </form>
         </>