common component props

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;
-}

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)}
     />
   );

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>