Progress Cards for Top Payees

src/Dashboard.tsx

@@ -6,11 +6,13 @@ import {
   CircularProgress,
   Alert,
   ToggleButton,
-  ToggleButtonGroup
+  ToggleButtonGroup,
+  Typography
 } from "@mui/material";
 
 import LatestItems from "./components/LatestItems";
 import HistoryChart from "./components/HistoryChart";
+import ProgressCard from "./components/ProgressCard";
 
 import { useDashboardData } from "./features/dashboard";
 
@@ -107,6 +109,29 @@ export default function Dashboard() {
             colorScheme={colors}
           />
         </Grid>
+        
+        {data.topPayees && data.topPayees.length > 0 && (
+          <Grid size={12}>
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="h6" fontWeight={700}>
+                Top {mode === "expense" ? "Payees" : "Payors"}
+              </Typography>
+            </Box>
+            <Grid container spacing={2}>
+              {data.topPayees.map((payee: any) => (
+                <Grid key={payee.payeeName} size={{ xs: 12, sm: 6, md: 2.4 }}>
+                  <ProgressCard
+                    header={payee.payeeName}
+                    progressAmount={payee.amount}
+                    totalAmount={data.totalAmount}
+                    colorTheme={mode === "expense" ? "error" : "success"}
+                    compact
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </Grid>
+        )}
 
         <Grid size={12}>
           <LatestItems