feat: add surveys list component

2 files changed, 59 insertions, 1 deletions

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>
+  );
 }