feat: move show dashboard to mui

src/components/CustomTheme.js

@@ -11,7 +11,8 @@ const theme = createTheme({
       contrast: "#FFFFFF"
     },
     background: {
-      light: "#F7F7F9"
+      light: "#F7F7F9",
+      light_gray: "#eaeaea"
     },
     text: {
       primary: "#000000DE",
@@ -34,10 +35,10 @@ const theme = createTheme({
       fontSize: "12px",
       fontWeight: 400
     },
-    subtitle2: ({ theme }) => ({
+    subtitle2: ({ theme: t }) => ({
       fontSize: "14px",
       fontWeight: 500,
-      color: theme.palette.text.primary
+      color: t.palette.text.primary
     }),
     h4: {
       fontSize: "34px",
@@ -126,8 +127,8 @@ const theme = createTheme({
         root: {
           fontSize: "12px"
         },
-        standardInfo: ({ theme }) => ({
-          color: theme.palette.primary.dark
+        standardInfo: ({ theme: t }) => ({
+          color: t.palette.primary.dark
         })
       }
     }

src/i18n/en.json

@@ -353,6 +353,14 @@
     "refund_amount_emitted": "Amount Refund",
     "ticket_types": "Active Tickets per Ticket Types",
     "badge_types": "Active Tickets per Badge Types",
+    "general_dates": "General Dates",
+    "ordering": "Ordering",
+    "important_documents": "Important Documents",
+    "sponsor_levels": "Sponsor Levels",
+    "pages": "Pages",
+    "tab_badge_types": "Badge Types",
+    "media_uploads": "Media Uploads",
+    "booth_layout_types": "Booth Layout Types",
     "expand": "Expand section",
     "collapse": "Collapse section",
     "badge_features_tickets": "Active Tickets per Badge Features",

src/pages/summits/components/dashboard-section.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
+
+function DashboardSection({ title, children, variant }) {
+  if (variant === "card") {
+    return (
+      <Card elevation={0}>
+        <CardHeader title={title} />
+        <Divider />
+        {children}
+      </Card>
+    );
+  }
+
+  return (
+    <Box>
+      <Box sx={{ bgcolor: "background.light_gray", px: 2, py: 2 }}>
+        <Typography variant="body2">{title}</Typography>
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+DashboardSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(["card"])
+};
+
+DashboardSection.defaultProps = {
+  variant: undefined
+};
+
+export default DashboardSection;

src/pages/summits/components/dashboard-stat-section.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Divider from "@mui/material/Divider";
+import Grid2 from "@mui/material/Grid2";
+import DashboardSection from "./dashboard-section";
+import SummitDashboardStat from "./summit-dashboard-stat";
+
+const GRID_COLUMNS = 12;
+
+function DashboardStatSection({ title, rows }) {
+  return (
+    <DashboardSection title={title} variant="card">
+      {rows.map((group, i) => {
+        if (!group.length) return null;
+        const size = Math.floor(GRID_COLUMNS / group.length);
+        const key = group[0]?.title ?? `group-${i}`;
+        return (
+          <React.Fragment key={key}>
+            {i > 0 && <Divider />}
+            <Grid2 container>
+              {group.map(({ title: label, stat: value }) => (
+                <Grid2 key={label} size={size}>
+                  <SummitDashboardStat label={label} value={value} />
+                </Grid2>
+              ))}
+            </Grid2>
+          </React.Fragment>
+        );
+      })}
+    </DashboardSection>
+  );
+}
+
+DashboardStatSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  rows: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        stat: PropTypes.number
+      })
+    )
+  ).isRequired
+};
+
+export default DashboardStatSection;

src/pages/summits/components/summit-dashboard-date-range.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { formatDate } from "../../../utils/methods";
+import { DATETIME_FORMAT } from "../../../utils/constants";
+
+function SummitDashboardDateRange({ label, startTs, endTs, tzName }) {
+  if (!startTs || !endTs) return null;
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        height: 75,
+        px: 2,
+        borderBottom: 1,
+        borderColor: "divider"
+      }}
+    >
+      <Box sx={{ minWidth: 120 }}>
+        <Typography variant="body2">{label}</Typography>
+      </Box>
+      <Typography variant="body1">
+        {formatDate(startTs, tzName, DATETIME_FORMAT)}
+      </Typography>
+      <RemoveIcon sx={{ mx: 2, fontSize: 16 }} />
+      <Typography variant="body1">
+        {formatDate(endTs, tzName, DATETIME_FORMAT)}
+      </Typography>
+    </Box>
+  );
+}
+
+SummitDashboardDateRange.propTypes = {
+  label: PropTypes.string.isRequired,
+  startTs: PropTypes.number,
+  endTs: PropTypes.number,
+  tzName: PropTypes.string
+};
+
+SummitDashboardDateRange.defaultProps = {
+  startTs: null,
+  endTs: null,
+  tzName: undefined
+};
+
+export default SummitDashboardDateRange;

src/pages/summits/components/summit-dashboard-stat.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+function SummitDashboardStat({ label, value }) {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="body2" color="text.secondary" gutterBottom>
+        {label}
+      </Typography>
+      <Typography variant="h3">{value}</Typography>
+    </Box>
+  );
+}
+
+SummitDashboardStat.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.number
+};
+
+SummitDashboardStat.defaultProps = {
+  value: 0
+};
+
+export default SummitDashboardStat;