src/components/Dashboard/Dashboard.models.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 
 export type DashboardMode = "expense" | "income";
-export type DashboardPeriod = "rolling" | "calendar";
+export type DashboardPeriodType = "rolling" | "calendar";
 
 export interface DashboardState {
   mode: DashboardMode;
-  period: DashboardPeriod;
+  periodType: DashboardPeriodType;
   comparison: boolean;
 }
 

src/components/Dashboard/Dashboard.tsx

@@ -5,7 +5,7 @@ import { DashboardProps, DashboardState } from "./Dashboard.models";
 export default function Dashboard(props: DashboardProps) {
   const [state, setState] = React.useState<DashboardState>({
     mode: "expense",
-    period: "rolling",
+    periodType: "rolling",
     comparison: false,
   });
 

src/components/Dashboard/Dashboard.view.tsx

@@ -139,8 +139,8 @@ export default function DashboardView({
                   title={section.title}
                   accentColor={colors.primary}
                   colorScheme={colors}
-                  period={period}
+                  periodType={period}
-                  onPeriodChange={(p: any) => setState(prev => ({ ...prev, period: p }))}
+                  onPeriodTypeChange={(p: any) => setState(prev => ({ ...prev, period: p }))}
                   comparison={comparison}
                   setComparison={(c: any) => setState(prev => ({ ...prev, comparison: c }))}
                 />