new report structure

src/components/Dashboard/Dashboard.models.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
+import {
+  ReportData
+} from "../../features/report";
 
 export type DashboardMode = "expense" | "income";
 export type DashboardPeriodType = "rolling" | "calendar";
@@ -45,9 +48,5 @@ export interface DashboardConfig {
 
 export interface DashboardProps {
   config: DashboardConfig;
-  data: any;
-  toggleMode: () => void;
-  togglePeriodType: () => void;
-  setSelectedPeriodId: (id: string | null) => void;
-  toggleComparison: () => void;
+  data: ReportData;
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -13,6 +13,10 @@ import { DashboardProps, DashboardState } from "./Dashboard.models";
 interface ViewProps extends DashboardProps {
   state: DashboardState;
   setState: React.Dispatch<React.SetStateAction<DashboardState>>;
+  toggleMode: () => void;
+  togglePeriodType: () => void;
+  setSelectedPeriodId: (id: string | null) => void;
+  toggleComparison: () => void;
 }
 
 export default function DashboardView({
@@ -101,63 +105,26 @@ export default function DashboardView({
                 </Box>
               )}
 
-              {section.isList ? (
-                <Box>
-                  {section.title && (
-                    <Box sx={{ mb: 2 }}>
-                      <Typography variant="h6" fontWeight={700}>
-                        {section.title}
-                      </Typography>
-                    </Box>
-                  )}
-                  <Grid container spacing={2}>
-                    {(data[section.dataKey || ""] || []).map((item: any, idx: number) => (
-                      <Grid key={idx} size={{ xs: 12, sm: 6, md: 2.4 }}>
-                        <Component
-                          {...section.settings}
-                          header={item.payeeName || item.name}
-                          progressAmount={item.amount}
-                          totalAmount={data.totalAmount}
-                          accentColor={colors.primary}
-                          colorScheme={colors}
+              <Component
+                {...section.settings}
+                header={section.title}
+                summary={section.summary}
+                data={data}
+                title={section.title}
+                accentColor={colors.primary}
+                colorScheme={colors}
 
-                          // State management
-                          mode={mode}
+                // State management
+                mode={mode}
 
-                          periodType={periodType}
-                          comparison={comparison}
-                          selectedPeriodId={selectedPeriodId}
+                periodType={periodType}
+                comparison={comparison}
+                selectedPeriodId={selectedPeriodId}
 
-                          togglePeriodType={togglePeriodType}
-                          toggleComparison={toggleComparison}
-                          setSelectedPeriodId={setSelectedPeriodId}
-                        />
-                      </Grid>
-                    ))}
-                  </Grid>
-                </Box>
-              ) : (
-                <Component
-                  {...section.settings}
-                  header={section.title}
-                  summary={section.summary}
-                  data={data[mode][section.dataKey]}
-                  title={section.title}
-                  accentColor={colors.primary}
-                  colorScheme={colors}
-
-                  // State management
-                  mode={mode}
-
-                  periodType={periodType}
-                  comparison={comparison}
-                  selectedPeriodId={selectedPeriodId}
-
-                  togglePeriodType={togglePeriodType}
-                  toggleComparison={toggleComparison}
-                  setSelectedPeriodId={setSelectedPeriodId}
-                />
-              )}
+                togglePeriodType={togglePeriodType}
+                toggleComparison={toggleComparison}
+                setSelectedPeriodId={setSelectedPeriodId}
+              />
             </Grid>
           );
         })}