From eb45304207fd5f081cd3362ee6d2c801b9aadd54 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Mon, 18 May 2026 16:08:54 +0530
Subject: [PATCH] common component props

---
 .../LatestItems/LatestItems.models.ts         |  9 -------
 src/components/LatestItems/LatestItems.tsx    | 27 ++++++++++---------
 .../LatestItems/LatestItems.view.tsx          | 10 ++++---
 3 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/components/LatestItems/LatestItems.models.ts b/src/components/LatestItems/LatestItems.models.ts
index a58bd99..336ea01 100644
--- a/src/components/LatestItems/LatestItems.models.ts
+++ b/src/components/LatestItems/LatestItems.models.ts
@@ -5,12 +5,3 @@ export interface LatestItem {
   amount: string;
   timeAgo: string;
 }
-
-export interface LatestItemsViewProps {
-  items: LatestItem[];
-  header: string;
-  accentColor: string;
-  canExpand: boolean;
-  onExpand: () => void;
-  isFetching?: boolean;
-}
diff --git a/src/components/LatestItems/LatestItems.tsx b/src/components/LatestItems/LatestItems.tsx
index ac2d356..0b182e3 100644
--- a/src/components/LatestItems/LatestItems.tsx
+++ b/src/components/LatestItems/LatestItems.tsx
@@ -1,21 +1,24 @@
 import * as React from "react";
-import { ComponentProps } from "../report.props";
 import { buildLatestItems } from "./LatestItems.adapter";
 import LatestItemsView from "./LatestItems.view";
+import { LatestItemsProps } from "./LatestItems.props";
 
-type Props = ComponentProps;
+export default function LatestItems(props: LatestItemsProps) {
+  const {
+    reportData,
+    state,
+    stateSetters,
+    isFetching,
+  } = props;
 
-export default function LatestItems({
-  reportData,
-  state,
-  stateSetters,
-  header,
-  accentColor = "",
-  isFetching,
-}: Props) {
   const { flow, selectedPeriodId, selectedGroupKey } = state;
   const [visibleCount, setVisibleCount] = React.useState(5);
 
+  // Reset count when flow changes to start clean
+  React.useEffect(() => {
+    setVisibleCount(5);
+  }, [flow]);
+
   const allItems = React.useMemo(() => {
     return buildLatestItems(reportData, selectedPeriodId, selectedGroupKey, flow);
   }, [reportData, selectedPeriodId, selectedGroupKey, flow]);
@@ -28,11 +31,9 @@ export default function LatestItems({
 
   return (
     <LatestItemsView
+      {...props}
       items={visibleItems}
-      header={header}
-      accentColor={accentColor}
       canExpand={canExpand}
-      isFetching={isFetching}
       onExpand={() => setVisibleCount((prev) => prev + 5)}
     />
   );
diff --git a/src/components/LatestItems/LatestItems.view.tsx b/src/components/LatestItems/LatestItems.view.tsx
index 2be8d7d..2932573 100644
--- a/src/components/LatestItems/LatestItems.view.tsx
+++ b/src/components/LatestItems/LatestItems.view.tsx
@@ -10,21 +10,23 @@ import {
   IconButton,
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { LatestItemsViewProps } from "./LatestItems.models";
+import { LatestItemsViewProps } from "./LatestItems.props";
 
 export default function LatestItemsView({
   items,
-  header,
-  accentColor,
+  title,
   canExpand,
   onExpand,
   isFetching,
+  colorScheme,
 }: LatestItemsViewProps) {
+  const accentColor = colorScheme?.primary || "";
+
   return (
     <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
       <Box sx={{ mb: 2, px: 2 }}>
         <Typography variant="h6" fontWeight="bold">
-          {header}
+          {title}
         </Typography>
       </Box>