khata-ui/src/Dashboard.tsx

import * as React from "react";
import {
  Box,
  Container,
  CircularProgress,
  Alert
} from "@mui/material";

import ConfigurableDashboard from "./components/Dashboard";
import { configuration } from "./dashboard-config";
import {
  useReport,
  prepareReport,
} from "./features/report";

export default function Dashboard() {
  const report = useReport({
    periods: ["weekly", "monthly", "full"],
    rolling: true,
    include_transactions: true,
    group_by: ["tags"],
  })

  const isLoading = report.isLoading;
  const error = report.error;


  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Container sx={{ mt: 4 }}>
        <Alert severity="error">{String(error)}</Alert>
      </Container>
    );
  }

  if (!report) {
    return null;
  }

  const data = prepareReport(report.data?.data);
  return (
    <ConfigurableDashboard
      config={configuration}
      data={data}
    />
  );
}