Component_1 - Copy this React, Tailwind Component to your project
import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; import { withStyles, MuiThemeProvider, createMuiTheme, } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Button from "@material-ui/core/Button"; import Badge from "@material-ui/core/Badge"; import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; import Card from "@material-ui/core/Card"; import CardHeader from "@material-ui/core/CardHeader"; import TextField from "@material-ui/core/TextField"; import PhoneForwardedIcon from "@material-ui/icons/PhoneForwarded"; import Chip from "@material-ui/core/Chip"; import DateRange from "@material-ui/icons/DateRange"; import EditIcon from "@material-ui/icons/Edit"; import SaveAlt from "@material-ui/icons/SaveAlt"; import Upload from "@material-ui/icons/CloudUpload"; import Fab from "@material-ui/core/Fab"; import Typography from "@material-ui/core/Typography"; import MobileStepper from "@material-ui/core/MobileStepper"; import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"; import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; import axios from "axios"; import OutlinedInput from "@material-ui/core/OutlinedInput"; import InputLabel from "@material-ui/core/InputLabel"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; import AppBar from "@material-ui/core/AppBar"; import Tooltip from "@material-ui/core/Tooltip"; import IconButton from "@material-ui/core/IconButton"; import AddIcon from "@material-ui/icons/Add"; import CloseIcon from "@material-ui/icons/Close"; import UndoIcon from "@material-ui/icons/Undo"; import RedoIcon from "@material-ui/icons/Redo"; import DeleteIcon from "@material-ui/icons/Delete"; import DoneIcon from "@material-ui/icons/Done"; import PersonIcon from "@material-ui/icons/Person"; import SaveIcon from "@material-ui/icons/Save"; import blue from "@material-ui/core/colors/blue"; import red from "@material-ui/core/colors/red"; import Avatar from "@material-ui/core/Avatar"; import NotInterestedIcon from "@material-ui/icons/NotInterested"; import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; import BubbleChartIcon from "@material-ui/icons/BubbleChart"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import TableChart from "@material-ui/icons/TableChart"; import Snackbar from "@material-ui/core/Snackbar"; import MySnackbarContentWrapper from "../CustomizedSnackBar"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; import CircularProgress from "@material-ui/core/CircularProgress"; import Divider from "@material-ui/core/Divider"; import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; import ShowUploadTemplate from "../uploadTemplate"; import AddShiftForm from "./AddShift"; const styles = (theme) => ({ grow: { flexGrow: 1, }, card: { margin: "5px", width: "1000px", // Adjust width as needed height: "auto", // Adjust height as needed }, controlBar: { display: "flex", flexDirection: "row", }, shiftContainer: { display: "flex", flexDirection: "column", backgroundColor: "
