From 771a9c6c99d92397e71f1a79cc5473facf037a57 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 10 Feb 2025 16:17:35 -0800
Subject: [PATCH] update empty view, use table

---
 .../Components/StatusPagesTable/index.jsx     | 85 +++++++++++++++++++
 .../Pages/StatusPage/StatusPages/index.jsx    | 20 ++---
 2 files changed, 90 insertions(+), 15 deletions(-)
 create mode 100644 Client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx

diff --git a/Client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx b/Client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx
new file mode 100644
index 000000000..6e7988153
--- /dev/null
+++ b/Client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx
@@ -0,0 +1,85 @@
+import DataTable from "../../../../../Components/Table";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import { ColoredLabel } from "../../../../../Components/Label";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { Stack, Typography } from "@mui/material";
+const StatusPagesTable = ({ data }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const headers = [
+		{
+			id: "name",
+			content: "Status page name",
+			render: (row) => {
+				return row.companyName;
+			},
+		},
+		{
+			id: "url",
+			content: "URL",
+			render: (row) => {
+				return (
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{row.url}</Typography>
+						<ArrowOutwardIcon />
+					</Stack>
+				);
+			},
+		},
+		{
+			id: "type",
+			content: "Type",
+			render: (row) => {
+				return row.type;
+			},
+		},
+		{
+			id: "status",
+			content: "Status",
+			render: (row) => {
+				return (
+					<ColoredLabel
+						label={row.isPublished ? "Published" : "Unpublished"}
+						color={
+							row.isPublished ? theme.palette.success.main : theme.palette.warning.main
+						}
+					/>
+				);
+			},
+		},
+	];
+
+	const handleRowClick = (statusPage) => {
+		if (statusPage.type === "distributed") {
+			navigate(`/status/distributed/${statusPage.url}`);
+		} else if (statusPage.type === "uptime") {
+			navigate(`/status/uptime/${statusPage.url}`);
+		}
+	};
+
+	return (
+		<DataTable
+			config={{
+				rowSX: {
+					cursor: "pointer",
+					"&:hover td": {
+						backgroundColor: theme.palette.tertiary.main,
+						transition: "background-color .3s ease",
+					},
+				},
+				onRowClick: (row) => {
+					handleRowClick(row);
+				},
+			}}
+			headers={headers}
+			data={data}
+		/>
+	);
+};
+
+export default StatusPagesTable;
diff --git a/Client/src/Pages/StatusPage/StatusPages/index.jsx b/Client/src/Pages/StatusPage/StatusPages/index.jsx
index cf5b83289..8ec741729 100644
--- a/Client/src/Pages/StatusPage/StatusPages/index.jsx
+++ b/Client/src/Pages/StatusPage/StatusPages/index.jsx
@@ -4,6 +4,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Fallback from "../../../Components/Fallback";
 import MonitorCreateHeader from "../../../Components/MonitorCreateHeader";
 import GenericFallback from "../../../Components/GenericFallback";
+import StatusPagesTable from "./Components/StatusPagesTable";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useStatusPagesFetch } from "./Hooks/useStatusPagesFetch";
@@ -32,8 +33,9 @@ const StatusPages = () => {
 			<Fallback
 				title="status page"
 				checks={[
-					"Display a list of monitors to track",
-					"Share your monitors with the public",
+					"Monitor and display the health of your services in real time",
+					"Track multiple services and share their status",
+					"Keep users informed about outages and performance",
 				]}
 				link="/status/uptime/create"
 				isAdmin={isAdmin}
@@ -63,19 +65,7 @@ const StatusPages = () => {
 				isAdmin={isAdmin}
 				path="/status/uptime/create"
 			/>
-			{statusPages?.map((statusPage) => {
-				return (
-					<Stack
-						key={statusPage._id}
-						onClick={() => handleStatusPageClick(statusPage)}
-						sx={{ cursor: "pointer" }}
-					>
-						<Typography variant="h2">Company Name: {statusPage.companyName}</Typography>
-						<Typography variant="h2">Status page URL: {statusPage.url}</Typography>
-						<Typography variant="h2">Type: {statusPage.type}</Typography>
-					</Stack>
-				);
-			})}
+			<StatusPagesTable data={statusPages} />
 		</Stack>
 	);
 };