56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
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}
|
|
/>
|
|
);
|
|
}
|