configurable Dashboard.tsx

src/Dashboard.tsx

@@ -2,44 +2,18 @@ import * as React from "react";
 import {
   Box,
   Container,
-  Grid,
   CircularProgress,
-  Alert,
-  ToggleButton,
-  ToggleButtonGroup,
-  Typography
+  Alert
 } from "@mui/material";
 
-import LatestItems from "./components/LatestItems";
-import HistoryChart from "./components/HistoryChart";
-import ProgressCard from "./components/ProgressCard";
-
+import DashboardComponent from "./components/Dashboard";
+import { configuration } from "./dashboard-config";
 import { useDashboardData } from "./features/dashboard";
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<"expense" | "income">("expense");
-  const [period, setPeriod] = React.useState<"rolling" | "calendar">("rolling");
-  const [comparison, setComparison] = React.useState(false);
-
-  const palette = {
-    expense: {
-      primary: "#d32f2f",
-      light: "#fdecea",
-      dark: "#9a0007",
-      text: "#b71c1c"
-    },
-    income: {
-      primary: "#2e7d32",
-      light: "#e8f5e9",
-      dark: "#1b5e20",
-      text: "#1b5e20"
-    }
-  };
-
   const { data, latest, isLoading, error } = useDashboardData(mode);
 
-  const colors = palette[mode];
-
   if (isLoading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
@@ -61,87 +35,11 @@ export default function Dashboard() {
   }
 
   return (
-    <Container
-      sx={{
-        mt: 4,
-        mb: 4,
-        background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
-        borderRadius: 4,
-        p: 2
-      }}
-    >
-      <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
-        <ToggleButtonGroup
-          value={mode}
-          exclusive
-          onChange={(_, val) => val && setMode(val)}
-          sx={{
-            borderRadius: 3,
-            overflow: "hidden",
-            "& .MuiToggleButton-root": {
-              px: 3,
-              textTransform: "none",
-              color: "text.secondary"
-            },
-            "&.Mui-selected": {
-              bgcolor: colors.primary,
-              color: "white",
-              borderColor: colors.primary
-            },
-          }}
-        >
-          <ToggleButton value="expense">Expenses</ToggleButton>
-          <ToggleButton value="income">Income</ToggleButton>
-        </ToggleButtonGroup>
-      </Box>
-
-      <Grid container spacing={4} direction="row">
-        <Grid size={12}>
-          <HistoryChart
-            header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
-            summary="Interactive chronological tracking"
-            tabs={["Daily", "Weekly", "Monthly"]}
-            data={data.chartData}
-            period={period}
-            onPeriodChange={setPeriod}
-            comparison={comparison}
-            setComparison={setComparison}
-            colorScheme={colors}
-          />
-        </Grid>
-        
-        {data.topPayees && data.topPayees.length > 0 && (
-          <Grid size={12}>
-            <Box sx={{ mb: 2 }}>
-              <Typography variant="h6" fontWeight={700}>
-                Top {mode === "expense" ? "Payees" : "Payors"}
-              </Typography>
-            </Box>
-            <Grid container spacing={2}>
-              {data.topPayees.map((payee: any) => (
-                <Grid key={payee.payeeName} size={{ xs: 12, sm: 6, md: 2.4 }}>
-                  <ProgressCard
-                    header={payee.payeeName}
-                    progressAmount={payee.amount}
-                    totalAmount={data.totalAmount}
-                    colorTheme={mode === "expense" ? "error" : "success"}
-                    compact
-                  />
-                </Grid>
-              ))}
-            </Grid>
-          </Grid>
-        )}
-
-        <Grid size={12}>
-          <LatestItems
-            title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
-            items={latest || []}
-            onViewAll={() => {}}
-            accentColor={colors.primary}
-          />
-        </Grid>
-      </Grid>
-    </Container>
+    <DashboardComponent
+      config={configuration}
+      data={data}
+      latest={latest}
+      onModeChange={(newMode) => setMode(newMode)}
+    />
   );
 }