bananas-commerce-admin
Version:
What's this, an admin for apes?
57 lines • 3.17 kB
JavaScript
import React, { useMemo } from "react";
import { AppBar, Box, Stack, Toolbar, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { Header } from "../components/Header";
import ComponentLoader from "../containers/ComponentLoader";
import Content from "../containers/Content";
import { useApi } from "../contexts/ApiContext";
import DashboardFilterContextProvider, { dashboardFilterToSearchParams, useDashboardFilter, } from "../contexts/DashboardFilterContext";
import { useUser } from "../contexts/UserContext";
import DashboardFilter from "../extensions/pos/components/DashboardFilter";
import { hasGroup } from "../util/has_group";
/**
* `WidgetLoader` is a separate component in order to access `DashboardFilterContext`.
*/
const WidgetLoader = () => {
const api = useApi();
const { filter } = useDashboardFilter();
const contrib = useMemo(() => api.findContrib("dashboard"), [api]);
return contrib.map((operation, i) => (React.createElement(ComponentLoader, { key: operation.id, operation: operation,
// NOTE: For some godforsaken reason, the `query` prop is not typed as `Record<string, string>` but as `object`. Oh well.
query: dashboardFilterToSearchParams(filter), sx: { "--i": `${(i + 1) * 10}` } })));
};
/**
* `DashboardPage` is the main page for the dashboard.
* It uses a manual css-grid layout, since MUI's `Grid` is
* not actually a grid, but a 12-col, bootstrap-like layout.
*/
const DashboardPage = () => {
const theme = useTheme();
const { user } = useUser();
const title = null; // TODO: Get title from project
if (!hasGroup(user, "analytics")) {
return null; // TODO: Redirect to some accessible page
}
return (React.createElement(DashboardFilterContextProvider, null,
React.createElement(Header, null,
React.createElement(AppBar, { elevation: 0, position: "static", sx: { flexGrow: 1, bgcolor: "transparent" } },
React.createElement(Toolbar, { variant: "dense" },
React.createElement(Stack, { alignItems: "center", flexDirection: "row", flexGrow: 1, justifyContent: "space-between" },
React.createElement(Stack, null, title != null && (React.createElement(Typography, { color: theme.palette.text.primary, fontWeight: 600, variant: "h6" }, title))),
React.createElement(DashboardFilter, null))))),
React.createElement(Content, { layout: "fixedWidth" },
React.createElement(Box, { sx: {
display: "grid",
gridTemplateColumns: { sm: "repeat(1, 1fr)", md: "repeat(12, 1fr)" },
gridAutoRows: "minmax(180px, auto)",
gridAutoFlow: "dense",
gap: 2,
width: "100%",
height: "fit-content",
// Hide spinners since we get one per card.
".MuiCircularProgress-root": { opacity: "0 !important" },
} },
React.createElement(WidgetLoader, null)))));
};
export default DashboardPage;
//# sourceMappingURL=DashboardPage.js.map