Sub Header Organism - Copy this React, Tailwind Component to your project

Import React, { useState, useCallback } from "react"; import { Grid, TextField, MenuItem, Box, Drawer } from "@mui/material"; import FilterAltTwoToneIcon from '@mui/icons material/FilterAltTwoTone'; import ButtonAtom from "@/components/atoms/button"; import TextAtom from "@/components/atoms/text"; import { AssetType, SubHeaderProps } from "@/types/subHeader"; const SubHeaderOrganism: React.FC<SubHeaderProps> = ({ fromDate, setFromDate, toDate, setToDate, status = "DRAFT", setStatus = () => {}, handleFilter, handleReset, displaycreateinvoicebtn = true, displayassetType = false, displayStatus = true, assetTypesList = [], setAssetType, assetType, totalDepreciation, totalWrittenDownValue, remainingLifeOfAsset = '', setRemainingLifeOfAsset }) => { const [isDrawerOpen, setDrawerOpen] = useState(false); const statuses = ["DRAFT", "PROCESSED"]; const remainingLifeOfAssetTypes = [{label:"Greater than 0",value:0}, {label:"Equal to 0",value:1}]; const [currentRemainingLifeOfAsset,setCurrentRemainingLifeOfAsset] = useState<string>(""); const toggleDrawer = useCallback(() => { setDrawerOpen(prev => !prev); }, []); const handleDateChange = useCallback((setter: (date: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => { const selectedDate = e.target.value; const currentDate = new Date().toISOString().split("T")[0]; if (selectedDate <= currentDate) { setter(selectedDate); } else { alert("Selected date cannot be greater than today's date."); } }, []); const handleAssetTypeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { const selectedOption = assetTypesList.find( (option) => option.name === e.target.value ); if (selectedOption) { setAssetType(selectedOption); } }, [assetTypesList, setAssetType]); return ( <> <Grid container alignItems="center" className="bg card background light dark:bg card background dark p 1 space x 1 justify between mt 2" > {displaycreateinvoicebtn && ( <Grid item xs={2}> <ButtonAtom text="Create invoice" cssClass="create blueprint button" containerCssClass="filled button with icon container" href="/createinvoice" iconName="addBlueprint" iconPosition="left" iconColor="#ffffff" /> </Grid> )} {(totalDepreciation || totalWrittenDownValue) && ( <Grid item xs={4}> <Box display="flex" justifyContent="space between" className="bg card background light dark:bg card background dark text dark text sm dark:text gray 300" gap="3%" > <TextAtom text={`Total Depreciation: ${totalDepreciation}`} /> <TextAtom text={`Total WDV: ${totalWrittenDownValue}`} /> </Box> </Grid> )} <Grid item xs={6} textAlign="right" onClick={toggleDrawer} className="cursor pointer flex justify end relative"> Filter <FilterAltTwoToneIcon className="filter icon" /> </Grid> </Grid> <Drawer variant="persistent" anchor="right" open={isDrawerOpen} onClose={toggleDrawer} PaperProps={{ style: { marginTop: "8%" }, className: "z [99999] mb 160" }} > <Box role="presentation" padding={2} width={350} className="bg card background light dark:bg card background dark h [88vh]" > <Grid container spacing={2} alignItems="center"> <Grid item xs={12}> <TextField label="From Date" type="date" value={fromDate} onChange={handleDateChange(setFromDate)} fullWidth size="small" InputLabelProps={{ shrink: true }} /> </Grid> <Grid item xs={12}> <TextField label="To Date" type="date" value={toDate} onChange={handleDateChange(setToDate)} fullWidth size="small" InputLabelProps={{ shrink: true }} /> </Grid> {displayStatus && ( <Grid item xs={12}> <TextField select label="Status" value={status} onChange={(e) => setStatus(e.target.value)} fullWidth size="small" > {statuses.map((option) => ( <MenuItem key={option} value={option}> {option} </MenuItem> ))} </TextField> </Grid> )} {displayassetType && ( <> <Grid item xs={12}> <TextField select label="Asset Type" value={assetType?.name || ""} onChange={handleAssetTypeChange} fullWidth size="small" > {assetTypesList.map((option) => ( <MenuItem key={option.id} value={option.name}> {option.name} </MenuItem> ))} </TextField> </Grid> <Grid item xs={12}> <TextField select label="Remaining Life" value={currentRemainingLifeOfAsset} onChange={(e) => { const selectedOption = remainingLifeOfAssetTypes.find( (option) => option.label === e.target.value ); if(selectedOption){ setRemainingLifeOfAsset(selectedOption?.value); setCurrentRemainingLifeOfAsset(e.target.value),console.log("Remaining Life==>",e) }}} fullWidth size="small" > {remainingLifeOfAssetTypes.map((option) => ( <MenuItem key={option.value} value={option.label}> {option.label} </MenuItem> ))} </TextField> </Grid> </> )} <Grid item xs={6}> <ButtonAtom text="Filter" onClick={handleFilter} /> </Grid> <Grid item xs={6}> <ButtonAtom text="Reset" onClick={()=>{handleReset(),setRemainingLifeOfAsset(null),setCurrentRemainingLifeOfAsset(null)}} /> </Grid> </Grid> </Box> </Drawer> </> ); }; export default SubHeaderOrganism; can you rewrite ui for better view