Complete file

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Typography from "@mui/material/Typography";
import Sizing from "./Sizing";
import Questions from "./Questions";
import Taxonomy from "./Taxonomy";
import CircularProgress from "@mui/material/CircularProgress";
import Grid from "@mui/material/Grid";
import "../App.css";

function TabPanel(props) {
    const { children, value, index, ...other } = props;
    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box sx={{ p: 3 }}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
};

function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        "aria-controls": `simple-tabpanel-${index}`,
    };
}

function IntakeDetails() {
    const [details, setDetails] = useState("");
    const params = useParams();
    const [busy, setBusy] = useState(false);
    const [value, setValue] = React.useState(0);

    const fetchDetails = async () => {
        setBusy(true);
        setDetails(await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details`).then((response) => response.json()));
        setBusy(false);
    };

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    useEffect(() => {
        fetchDetails();
    }, []);

    const TextDetails = ({ head, val, index }) => {
        return (
            <TextField
                value={val || ""}
                onChange={(e) => {
                    setDetails((prev) => {
                        const update = [...prev.fields];
                        update[index] = {
                            ...update[index],
                            Value: e.target.value,
                        };
                        return { ...prev, fields: update };
                    });
                }}
                multiline
                variant="outlined"
                margin="normal"
                label={head}
                style={{
                    margin: "10px",
                    minHeight: "10px",
                    minWidth: "200px",
                }}
            />
        );
    };

    const SelectDetails = ({ head, val, choices, index }) => {
        return (
            <TextField
                value={val || ""}
                onChange={(e) => {
                    setDetails((prev) => {
                        const update = [...prev.fields];
                        update[index] = {
                            ...update[index],
                            Value: e.target.value,
                        };
                        return { ...prev, fields: update };
                    });
                }}
                variant="outlined"
                margin="normal"
                select
                label={head}
                style={{
                    margin: "10px",
                    minHeight: "10px",
                    minWidth: "200px",
                }}
            >
                {choices.map((choice) => (
                    <MenuItem key={choice} value={choice}>
                        {choice}
                    </MenuItem>
                ))}
            </TextField>
        );
    };

    const detailsComps = details["fields"]?.map((row, i) => {
        return row["FieldType"] === "Text" ||
            row["FieldType"] === "Decimal" ||
            row["FieldType"] === "Number" ||
            row["FieldType"] === "Date" ? (
            <TextDetails head={row?.FieldName} val={row?.Value} index={i} />
        ) : (
            <SelectDetails head={row.FieldName} val={row?.Value} choices={row?.Choices} index={i} />
        );
    });

    if (busy) {
        return (
            <Grid container justifyContent="center">
                <CircularProgress
                    size={68}
                    sx={{
                        color: "blue",
                    }}
                />
            </Grid>
        );
    }

    return (
        <Container maxWidth="xl">
            <Box>
                <h3> Intake Details </h3>
                <label> {details["ModifiedBy"] || ""} </label>
                <label> {details["UpdateDate"] || ""} </label>
            </Box>
            <Box className="details-header">
                <TextField
                    className="text-field"
                    value={details["IntakeID"] || ""}
                    variant="outlined"
                    margin="normal"
                    label="IntakeID"
                    style={{
                        margin: "10px",
                    }}
                />
                <TextField
                    className="text-field"
                    value={details?.Title || ""}
                    onChange={(e) => {
                        setDetails((prev) => {
                            return { ...prev, Title: e.target.value };
                        });
                    }}
                    variant="outlined"
                    margin="normal"
                    label="Title"
                    style={{
                        margin: "10px",
                        minWidth: "750px",
                    }}
                />
                <TextField
                    className="text-field"
                    value={details["Status"] || ""}
                    variant="outlined"
                    margin="normal"
                    label="Status"
                    style={{
                        margin: "10px",
                    }}
                />
            </Box>
            <Paper>
                <Box sx={{ width: "100%" }}>
                    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
                            <Tab label="Intake Details" {...a11yProps(0)} />
                            <Tab label="Sizing" {...a11yProps(1)} />
                            <Tab label="Questions" {...a11yProps(2)} />
                        </Tabs>
                    </Box>
                    <TabPanel value={value} index={0}>
                        <Box>
                            {/* {details["fields"]?.map((row, index) => (
                                <TextField
                                    className="text-field"
                                    value={row?.Value || ""}
                                    onChange={(e) => {
                                        setDetails((prev) => {
                                            const update = [...prev.fields];
                                            update[index] = {
                                                ...update[index],
                                                Value: e.target.value,
                                            };
                                            return { ...prev, fields: update };
                                        });
                                    }}
                                    multiline
                                    variant="outlined"
                                    margin="normal"
                                    label={row["FieldName"]}
                                />
                            ))} */}
                            {detailsComps}
                        </Box>
                        <Button
                            variant="contained"
                            style={{
                                background: "red",
                                marginTop: "10px",
                                minWidth: "400px",
                            }}
                        >
                            Save
                        </Button>
                    </TabPanel>
                    <TabPanel value={value} index={1}>
                        <Sizing />
                        <Button
                            variant="contained"
                            style={{
                                background: "red",
                                marginTop: "10px",
                                minWidth: "400px",
                            }}
                        >
                            Save
                        </Button>
                    </TabPanel>
                    <TabPanel value={value} index={2}>
                        <Questions />
                        <Button
                            variant="contained"
                            style={{
                                background: "red",
                                marginTop: "10px",
                                minWidth: "400px",
                            }}
                        >
                            Save
                        </Button>
                    </TabPanel>
                </Box>
            </Paper>
        </Container>
    );
}

export default IntakeDetails;