src/components/LatestItems/LatestItems.tsx

@@ -1,5 +1,3 @@
-// components/LatestItems/LatestItems.tsx
-
 import * as React from "react";
 import {
   List,
@@ -12,7 +10,6 @@ import {
   IconButton
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 import { ReportData, Transaction, ReportPeriod } from "../../features/report";
 import { formatCurrency } from "../ProgressCard/ProgressCard.utils";
@@ -93,7 +90,6 @@ function extractTransactions(
       : (selected.incomes.transactions || []);
   }
 
-  // default → FULL
   periods = mergePeriods(reportData, "full");
 
   if (!periods.length) return [];
@@ -111,7 +107,7 @@ export default function LatestItems({
   selectedPeriodId,
   accentColor
 }: Props) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [visibleCount, setVisibleCount] = React.useState(5);
 
   const items = React.useMemo(() => {
     const txns = extractTransactions(reportData, selectedPeriodId, mode);
@@ -136,22 +132,17 @@ export default function LatestItems({
 
   const visibleItems = React.useMemo(() => {
     if (!isPeriodSelected) return items.slice(0, 5);
-    if (expanded) return items;
-    return items.slice(0, 5);
-  }, [items, isPeriodSelected, expanded]);
+    return items.slice(0, visibleCount);
+  }, [items, isPeriodSelected, visibleCount]);
+
+  const canExpand = isPeriodSelected && visibleCount < items.length;
 
   return (
     <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, px: 2 }}>
+      <Box sx={{ mb: 2, px: 2 }}>
         <Typography variant="h6" fontWeight="bold">
           Recent Transactions
         </Typography>
-
-        {isPeriodSelected && items.length > 5 && (
-          <IconButton size="small" onClick={() => setExpanded((p) => !p)}>
-            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </IconButton>
-        )}
       </Box>
 
       <List disablePadding>
@@ -202,6 +193,17 @@ export default function LatestItems({
             </Box>
           </ListItem>
         ))}
+
+        {canExpand && (
+          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+            <IconButton
+              size="small"
+              onClick={() => setVisibleCount((prev) => prev + 5)}
+            >
+              <ExpandMoreIcon />
+            </IconButton>
+          </Box>
+        )}
       </List>
     </Box>
   );