Styled Card - Copy this React, Mui Component to your project

Help me fix my invoices card.. it currently looks old and not styled clean and fresh.. import { dayjs } from '@/lib/dayjs'; import { InvoiceExact } from '@/types/invoice'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import Chip from '@mui/material/Chip'; import Divider from '@mui/material/Divider'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import RouterLink from "next/link"; interface InvoiceCardProps { invoice?: InvoiceExact; // Invoice is optional to handle the "no invoice" state } const InvoiceCard = ({ invoice }: InvoiceCardProps) => { if (!invoice) { // No invoice available return ( <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%', p: 2 }}> <Stack spacing={2} alignItems="center" justifyContent="center" sx={{ flex: 1 }}> <Chip label="No Invoice Available" sx={{ color: 'white', borderRadius: 0.2 }} /> </Stack> </Card> ); } // Determine chip color based on status const statusColors = { 10: 'warning', 20: 'error', 50: 'success', } as const; return ( <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}> <Stack spacing={2} sx={{ flex: '1 1 auto', p: 2 }}> {/* Header Section */} <Stack direction="row" alignItems="center" justifyContent="space between"> <Typography variant="h6" color="text.primary"> Invoice #{invoice.InvoiceNumber} </Typography> <Chip label={invoice.StatusDescription} color={statusColors[invoice?.Status || '']} sx={{ borderRadius: 0.2 }} /> </Stack> <Divider /> {/* Invoice Details */} <Box> <Typography variant="body1" color="text.primary"> Amount Due: ${invoice.AmountDC?.toFixed(2)} </Typography> <Typography variant="body2" color="text.secondary"> Issued: {dayjs(invoice.InvoiceDate).format('MMM D, YYYY')} </Typography> <Typography variant="body2" color="text.secondary"> Due: {dayjs(invoice.DueDate).format('MMM D, YYYY')} </Typography> {invoice.Description && ( <Typography variant="body2" color="text.secondary"> Description: {invoice.Description} </Typography> )} {invoice.Currency && ( <Typography variant="body2" color="text.secondary"> Currency: {invoice.Currency} </Typography> )} {invoice.DeliverToName && ( <Typography variant="body2" color="text.secondary"> Deliver To: {invoice.DeliverToName} </Typography> )} </Box> <Divider /> {/* Action Buttons */} <Stack direction="row" spacing={2}> <Button variant="outlined" color="primary" size="small" component={RouterLink} href={"#"}> Download PDF </Button> {invoice.Status !== 100 && ( <Button variant="outlined" color="secondary" component={RouterLink} href={"#"}> Pay Now </Button> )} </Stack> </Stack> </Card> ); } export default InvoiceCard;export interface InvoiceExact { AmountFC?: number; AmountDiscount?: number; AmountDC?: number; AmountDiscountExclVat?: number; AmountFCExclVat?: number; Created?: string; Creator?: string; CreatorFullName?: string | null; Currency?: string; DeliverTo?: string; DeliverToContactPerson?: string | null; DeliverToContactPersonFullName?: string | null; DeliverToAddress?: string; DeliverToName?: string; Description?: string; Discount?: number; DiscountType?: number; Division?: number; Document?: string | null; DocumentNumber?: string | null; DocumentSubject?: string | null; DueDate?: string; InvoiceDate?: string; InvoiceID?: string; InvoiceTo?: string; InvoiceToContactPerson?: string | null; InvoiceToContactPersonFullName?: string | null; InvoiceToName?: string; InvoiceNumber?: number; Journal?: string; JournalDescription?: string; Modified?: string; Modifier?: string; ModifierFullName?: string | null; OrderDate?: string; OrderedBy?: string; OrderedByContactPerson?: string | null; OrderedByContactPersonFullName?: string | null; OrderedByName?: string; OrderNumber?: number; PaymentCondition?: string; PaymentConditionDescription?: string; Remarks?: string | null; Status?: number; StatusDescription?: string; Type?: number; TypeDescription?: string; VATAmountFC?: number; VATAmountDC?: number; }