@nitin15j/plugin-dora-frontend/dist/components/dora/ExecutiveDashboard/ExecutiveDashboard.esm.js

Welcome to the dora-frontend plugin!

import { jsx, jsxs } from 'react/jsx-runtime';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Paper, Typography } from '@material-ui/core';
import { ExecutiveSummary } from './components/ExecutiveSummary.esm.js';
import { ProjectHealth } from './components/ProjectHealth.esm.js';
import { useOrganizationTrendMetrics } from './hooks/useOrganizationTrendMetrics.esm.js';
import { TimeRangeSelector } from '../shared/components/TimeRangeSelector.esm.js';
import { Alert } from '@material-ui/lab';

const useStyles = makeStyles({
  error: {
    marginBottom: "1rem"
  },
  container: {
    padding: "1rem"
  },
  paper: {
    padding: "1rem",
    marginBottom: "1rem"
  },
  title: {
    marginBottom: "1rem",
    fontSize: "1.25rem",
    fontWeight: 500
  }
});
const ExecutiveDashboard = () => {
  const classes = useStyles();
  const {
    data,
    loading,
    error,
    selectedTimeRange,
    setSelectedTimeRange
  } = useOrganizationTrendMetrics();
  const metricsData = data?.organization?.metricsRecapWithQuarters;
  if (error) {
    return /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(Alert, { severity: "error", className: classes.error, children: error }) });
  }
  return /* @__PURE__ */ jsxs("div", { className: classes.container, children: [
    /* @__PURE__ */ jsx(
      TimeRangeSelector,
      {
        selectedRange: selectedTimeRange,
        onRangeChange: setSelectedTimeRange
      }
    ),
    loading && /* @__PURE__ */ jsx("div", { children: "Loading organization trend metrics..." }),
    error && /* @__PURE__ */ jsxs("div", { style: { color: "red" }, children: [
      "Error: ",
      error
    ] }),
    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Paper, { className: classes.paper, children: [
        /* @__PURE__ */ jsx(Typography, { className: classes.title, children: "Executive Dashboard" }),
        /* @__PURE__ */ jsx(ExecutiveSummary, { metricsData })
      ] }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Paper, { className: classes.paper, children: [
        /* @__PURE__ */ jsx(Typography, { className: classes.title, children: "Quaterly Health" }),
        /* @__PURE__ */ jsx(
          ProjectHealth,
          {
            data,
            loading,
            error
          }
        )
      ] }) })
    ] })
  ] });
};

export { ExecutiveDashboard };
//# sourceMappingURL=ExecutiveDashboard.esm.js.map