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

Import type { FinancialInformation } from '@/types/transaction'; import { Card, CardContent, Stack, Typography } from '@mui/material'; interface FinancialInformationCardProps { financialInfo: FinancialInformation; } export function FinancialInformationCard({ financialInfo }: FinancialInformationCardProps) { return ( <Card> <CardContent> <Stack spacing={1}> <Typography variant="h6">Financial Information</Typography> <Typography variant="body2"> Cost: {financialInfo.cost} {financialInfo.currency} </Typography> <Typography variant="body2"> Subscription Revenue: {financialInfo.totalSubscriptionRevenue} {financialInfo.currency} </Typography> <Typography variant="body2"> Net Result: {financialInfo.netResult} {financialInfo.currency} </Typography> <Typography variant="body2"> Is Profit? {financialInfo.isBreakEvenOrProfit ? 'Yes' : 'No'} </Typography> {/* ... show additionalNeededByAverage, additionalNeededByPrice, etc. */} </Stack> </CardContent> </Card> ); } fix the styling.. it's very old and doesnt higlight the important parts.. its structured weird. and misses information like export interface FinancialInformation { transactionEntryId: string; cost: number; totalSubscriptionRevenue: number; netResult: number; // < we can use netResult to decide profitability isBreakEvenOrProfit: boolean; additionalNeededByAverage: number; additionalNeededByPrice: Record<string, number>; accountName: string | null; transactionDate: string; currency: string; }