textbox in header

src/Category.jsx

@@ -81,13 +81,7 @@ function Category(props) {
                         expandIcon={<ExpandMoreIcon />}
                         aria-controls="panel1a-content"
                         id="panel1a-header"
-                    >
-                        <Typography className={classes.heading}>{category.name} ({Math.round(category.coeff / props.totalCoeff * 10000) / 100}%)</Typography>
-                    </ExpansionPanelSummary>
-                    <ExpansionPanelDetails>
-                        <Grid container spacing={2}>
-                            <Grid item xs={12} md={8}>
-                                <TextField
+                    > <TextField
                     id="name"
                     label="Nom de la categorie"
                     value={category.name}
@@ -97,6 +91,12 @@ function Category(props) {
                     variant="outlined"
                     fullWidth
                 />
+                        <Typography className={classes.heading}>({Math.round(category.coeff / props.totalCoeff * 10000) / 100}%)</Typography>
+                    </ExpansionPanelSummary>
+                    <ExpansionPanelDetails>
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} md={8}>
+                               
                             </Grid>
                             <Grid item xs={12} md={4}>
                                 <TextField

src/Section.jsx

@@ -79,13 +79,7 @@ function Section(props) {
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1a-content"
                     id="panel1a-header"
-                >
-                    <Typography className={classes.heading}>{props.section.name}</Typography>
-                </ExpansionPanelSummary>
-                <ExpansionPanelDetails>
-                    <Grid container spacing={2}>
-                        <Grid item xs={12}>
-                            <TextField
+                ><TextField
                         id="name"
                         label="Nom de la section"
                         value={section.name}
@@ -95,6 +89,11 @@ function Section(props) {
                         variant="outlined"
                         fullWidth
                     />
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>
+                    <Grid container spacing={2}>
+                        <Grid item xs={12}>
+
                         </Grid>
 
                         <Grid item xs={12}>

src/SubCategory.jsx

@@ -73,7 +73,17 @@ function SubCategory(props) {
                         aria-controls="panel1a-content"
                         id="panel1a-header"
                     >
-                        <Typography className={classes.heading}>{subCategory.name} 
+                    <TextField
+                        id="name"
+                        label="Nom de la sous categorie"
+                        value={subCategory.name}
+                        onChange={handleChange}
+                        className={classes.textField}
+                        margin="normal"
+                        variant="outlined"
+                        fullWidth
+                    />
+                        <Typography className={classes.heading}>
                             {subCategory.coeff !== 0 &&
                                 <>
                                     ({Math.round(subCategory.coeff / props.totalCoeff * 10000) / 100} %)
@@ -85,16 +95,6 @@ function SubCategory(props) {
                     <ExpansionPanelDetails>
                         <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
                             <Grid item xs={12} md={10}>
-                                <TextField
-                                    id="name"
-                                    label="Nom de la sous categorie"
-                                    value={subCategory.name}
-                                    onChange={handleChange}
-                                    className={classes.textField}
-                                    margin="normal"
-                                    variant="outlined"
-                                    fullWidth
-                                />
                             </Grid>
                             {subCategory.type === "" &&
                                 <Grid item xs={12} md={4}>