Expense tab - the component visualize all expense categories and amounts in pie chart
Income tab - the component visualize all income categories and amounts in pie chart
savings tab - the components visualize all savings categories and amounts in pie chart
Props for expense chart visualisations:
Tabs:
Expense tab name: Expense
Income tab name: Income
Savings tab name: visualize the tab asi piggy bank icon - add tooltip component for hover - in hover show text: savings
Components: https://mui.com/material-ui/react-grid/ https://mui.com/material-ui/react-tooltip/
For convert svg to react icon component use: https://react-svgr.com/playground/?typescript=true
Icons: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:savings:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=savi&icon.size=24&icon.color=%235f6368
Description:
Expense tab - the component visualize all expense categories and amounts in pie chart Income tab - the component visualize all income categories and amounts in pie chart savings tab - the components visualize all savings categories and amounts in pie chart
Props for expense chart visualisations:
Tabs:
Expense tab name: Expense Income tab name: Income Savings tab name: visualize the tab asi piggy bank icon - add tooltip component for hover - in hover show text: savings
Data for chart: