Styled Modal - Copy this React, Mui Component to your project
@workspace-#codebase-Quero-mudar-a-forma-de-vizualizar-as-transações,-ao-invés-de-abrir-um-datatable-como-acontece-atualmente,-quero-que-quando-o-usuário-clicar-em-"VER-TODAS",-ele-verá-uma-lista-de-todas-as-transações-dele,-podendo-filtrar-por-renda-ou-despesa-(não-é-prioridade-no-momento),-nisto,-ele-poderá-"ver-detalhes"-da-transação,-onde-abre-um-card-com-os-dados-da-transação-completos,-onde-ele-pode-ter-a-ação-de-editar-ou-deletar-a-transação,-pode-me-ajudar?-um-exemplo-de-um-card:-import-*-as-React-from-'react';-import-{-styled-}-from-'@mui/material/styles';-import-Card-from-'@mui/material/Card';-import-CardHeader-from-'@mui/material/CardHeader';-import-CardMedia-from-'@mui/material/CardMedia';-import-CardContent-from-'@mui/material/CardContent';-import-CardActions-from-'@mui/material/CardActions';-import-Collapse-from-'@mui/material/Collapse';-import-Avatar-from-'@mui/material/Avatar';-import-IconButton,-{-IconButtonProps-}-from-'@mui/material/IconButton';-import-Typography-from-'@mui/material/Typography';-import-{-red-}-from-'@mui/material/colors';-import-FavoriteIcon-from-'@mui/icons-material/Favorite';-import-ShareIcon-from-'@mui/icons-material/Share';-import-ExpandMoreIcon-from-'@mui/icons-material/ExpandMore';-import-MoreVertIcon-from-'@mui/icons-material/MoreVert';-interface-ExpandMoreProps-extends-IconButtonProps-{-expand:-boolean;-}-const-ExpandMore-=-styled((props:-ExpandMoreProps)-=>-{-const-{-expand,-...other-}-=-props;-return-<IconButton-{...other}-/>;-})(({-theme-})-=>-({-marginLeft:-'auto',-transition:-theme.transitions.create('transform',-{-duration:-theme.transitions.duration.shortest,-}),-variants:-[-{-props:-({-expand-})-=>-!expand,-style:-{-transform:-'rotate(0deg)',-},-},-{-props:-({-expand-})-=>-!!expand,-style:-{-transform:-'rotate(180deg)',-},-},-],-}));-export-default-function-RecipeReviewCard()-{-const-[expanded,-setExpanded]-=-React.useState(false);-const-handleExpandClick-=-()-=>-{-setExpanded(!expanded);-};-return-(-<Card-sx={{-maxWidth:-345-}}>-<CardHeader-avatar={-<Avatar-sx={{-bgcolor:-red[500]-}}-aria-label="recipe">-R-</Avatar>-}-action={-<IconButton-aria-label="settings">-<MoreVertIcon-/>-</IconButton>-}-title="Shrimp-and-Chorizo-Paella"-subheader="September-14,-2016"-/>-<CardMedia-component="img"-height="194"-image="/static/images/cards/paella.jpg"-alt="Paella-dish"-/>-<CardContent>-<Typography-variant="body2"-sx={{-color:-'text.secondary'-}}>-This-impressive-paella-is-a-perfect-party-dish-and-a-fun-meal-to-cook-together-with-your-guests.-Add-1-cup-of-frozen-peas-along-with-the-mussels,-if-you-like.-</Typography>-</CardContent>-<CardActions-disableSpacing>-<IconButton-aria-label="add-to-favorites">-<FavoriteIcon-/>-</IconButton>-<IconButton-aria-label="share">-<ShareIcon-/>-</IconButton>-<ExpandMore-expand={expanded}-onClick={handleExpandClick}-aria-expanded={expanded}-aria-label="show-more"->-<ExpandMoreIcon-/>-</ExpandMore>-</CardActions>-<Collapse-in={expanded}-timeout="auto"-unmountOnExit>-<CardContent>-<Typography-sx={{-marginBottom:-2-}}>Method:</Typography>-<Typography-sx={{-marginBottom:-2-}}>-Heat-1/2-cup-of-the-broth-in-a-pot-until-simmering,-add-saffron-and-set-aside-for-10-minutes.-</Typography>-<Typography-sx={{-marginBottom:-2-}}>-Heat-oil-in-a-(14--to-16-inch)-paella-pan-or-a-large,-deep-skillet-over-medium-high-heat.-Add-chicken,-shrimp-and-chorizo,-and-cook,-stirring-occasionally-until-lightly-browned,-6-to-8-minutes.-Transfer-shrimp-to-a-large-plate-and-set-aside,-leaving-chicken-and-chorizo-in-the-pan.-Add-pimentón,-bay-leaves,-garlic,-tomatoes,-onion,-salt-and-pepper,-and-cook,-stirring-often-until-thickened-and-fragrant,-about-10-minutes.-Add-saffron-broth-and-remaining-4-1/2-cups-chicken-broth;-bring-to-a-boil.-</Typography>-<Typography-sx={{-marginBottom:-2-}}>-Add-rice-and-stir-very-gently-to-distribute.-Top-with-artichokes-and-peppers,-and-cook-without-stirring,-until-most-of-the-liquid-is-absorbed,-15-to-18-minutes.-Reduce-heat-to-medium-low,-add-reserved-shrimp-and-mussels,-tucking-them-down-into-the-rice,-and-cook-again-without-stirring,-until-mussels-have-opened-and-rice-is-just-tender,-5-to-7-minutes-more.-(Discard-any-mussels-that-don't-open.)-</Typography>-<Typography>-Set-aside-off-of-the-heat-to-let-rest-for-10-minutes,-and-then-serve.-</Typography>-</CardContent>-</Collapse>-</Card>-);-}-Nesse-card-usa-Typescript,-MUI-e-tem-coisas-como-data,-descrição-e-ações,-por-isso-usei-ele-como-exemplo,-mas-não-precisa-ser-igual.
