feat: add surveys list component

5 files changed, 65 insertions, 3 deletions

diff --git a/package.json b/package.json
index 72a5caa..dd2f6b1 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.6",
     "@mui/material": "^5.14.6",
+    "@mui/x-data-grid": "^6.12.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -41,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
diff --git a/src/App.js b/src/App.js
index 21ebbf3..28e3a52 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,6 +12,7 @@ import SurveyAssignees from "./pages/SurveyAssignees";
 import Users from "./pages/Users";
 import NavBar from "./components/NavBar";
 import useLoginState from "./hooks/useLoginState";
+import Container from "@mui/material/Container";
 import CssBaseline from "@mui/material/CssBaseline";
 import CustomThemeProvider from "./CustomThemeProvider";
 
@@ -25,7 +26,7 @@ function routes({ login, logout, isLoggedIn }) {
     return (
       <>
         <NavBar isLoggedIn={isLoggedIn} pages={navbarLinks} logout={logout} />
-        {component}
+        <Container>{component}</Container>
       </>
     );
   }
diff --git a/src/pages/NewSurvey/index.js b/src/pages/NewSurvey/index.js
index a4b711a..f1d4b89 100644
--- a/src/pages/NewSurvey/index.js
+++ b/src/pages/NewSurvey/index.js
@@ -1,3 +1,4 @@
+import FormBuilder from "../../components/FormBuilder";
 export default function NewSurvey() {
-  return <>NewSurvey</>;
+  return <FormBuilder />;
 }
diff --git a/src/pages/Surveys/SurveysList.js b/src/pages/Surveys/SurveysList.js
new file mode 100644
index 0000000..c9c5b90
--- /dev/null
+++ b/src/pages/Surveys/SurveysList.js
@@ -0,0 +1,50 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import { DataGrid } from "@mui/x-data-grid";
+
+const columns = [
+  { field: "id", headerName: "ID", width: 90 },
+  {
+    field: "name",
+    headerName: "Name",
+    width: 150,
+  },
+  {
+    field: "next_run_at",
+    headerName: "Next Run",
+    width: 150,
+  },
+];
+
+const rows = [
+  { id: 1, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 2, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 3, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 4, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 5, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 6, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 7, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 8, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+  { id: 9, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
+];
+
+export default function SurveysList() {
+  return (
+    <Box sx={{ minHeight: "100%", width: "100%" }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: 25,
+            },
+          },
+        }}
+        pageSizeOptions={[25, 50, 100]}
+        checkboxSelection
+        disableRowSelectionOnClick
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/Surveys/index.js b/src/pages/Surveys/index.js
index 69e854f..558dc06 100644
--- a/src/pages/Surveys/index.js
+++ b/src/pages/Surveys/index.js
@@ -1,3 +1,11 @@
+import { Stack } from "@mui/material";
+import SurveysList from "./SurveysList";
+
 export default function Surveys() {
-  return <>Surveys</>;
+  return (
+    <Stack direction={"column"} sx={{ height: "100%" }}>
+      <h2>Surveys</h2>
+      <SurveysList />
+    </Stack>
+  );
 }