actin menu

client/src/Pages/StatusPage/Create/index.tsx

@@ -145,7 +145,7 @@ const CreateStatusPage = () => {
 		}
 
 		if (result) {
-			navigate(`/status/uptime/${data.url}`);
+			navigate(`/status/${data.url}`);
 		}
 	};
 

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx

@@ -2,22 +2,78 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Table, type Header, ValueLabel } from "@/Components/v2/design-elements";
+import { ActionsMenu, type ActionMenuItem } from "@/Components/v2/actions-menu";
+import { Dialog } from "@/Components/v2/inputs";
 import { ExternalLink } from "lucide-react";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
+import { useDelete } from "@/Hooks/UseApi";
+import { useState } from "react";
+import { createToast } from "@/Utils/toastUtils";
 
 import type { StatusPage } from "@/Types/StatusPage";
 
 interface StatusPagesTableProps {
 	data: StatusPage[];
+	refetch: () => void;
 }
 
-export const StatusPagesTable = ({ data }: StatusPagesTableProps) => {
+export const StatusPagesTable = ({ data, refetch }: StatusPagesTableProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+	const [selectedStatusPage, setSelectedStatusPage] = useState<StatusPage | null>(null);
+
+	const handleDeleteClick = (statusPage: StatusPage) => {
+		setSelectedStatusPage(statusPage);
+		setIsDeleteDialogOpen(true);
+	};
+
+	const handleDeleteConfirm = async () => {
+		if (!selectedStatusPage) return;
+		const result = await deleteFn(`/status-page/${selectedStatusPage.id}`);
+		if (result) {
+			createToast({ body: t("pages.statusPages.deleteSuccess") });
+			refetch();
+		}
+		setIsDeleteDialogOpen(false);
+		setSelectedStatusPage(null);
+	};
+
+	const handleDeleteCancel = () => {
+		setIsDeleteDialogOpen(false);
+		setSelectedStatusPage(null);
+	};
+
+	const getActions = (row: StatusPage): ActionMenuItem[] => {
+		return [
+			{
+				id: 1,
+				label: t("common.buttons.configure"),
+				action: () => {
+					navigate(`/status/configure/${row.url}`);
+				},
+				closeMenu: true,
+			},
+			{
+				id: 2,
+				label: (
+					<Typography color={theme.palette.error.main}>
+						{t("common.buttons.delete")}
+					</Typography>
+				),
+				action: () => {
+					handleDeleteClick(row);
+				},
+				closeMenu: true,
+			},
+		];
+	};
 
 	const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => {
 		if (row.isPublished) {
@@ -87,6 +143,13 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => {
 					);
 				},
 			},
+			{
+				id: "actions",
+				content: t("common.table.headers.actions"),
+				render: (row) => {
+					return <ActionsMenu items={getActions(row)} />;
+				},
+			},
 		];
 	};
 
@@ -102,6 +165,14 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => {
 				onRowClick={handleRowClick}
 				emptyViewText={t("common.table.empty")}
 			/>
+			<Dialog
+				open={isDeleteDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleDeleteConfirm}
+				onCancel={handleDeleteCancel}
+				loading={isDeleting}
+			/>
 		</Box>
 	);
 };

client/src/Pages/StatusPage/StatusPages/index.tsx

@@ -13,6 +13,7 @@ const StatusPages = () => {
 		data: statusPages,
 		isLoading,
 		error,
+		refetch,
 	} = useGet<StatusPage[]>("/status-page/team");
 
 	const isAdmin = useIsAdmin();
@@ -33,7 +34,10 @@ const StatusPages = () => {
 				path="/status/create"
 				isAdmin={isAdmin}
 			/>
-			<StatusPagesTable data={statusPages ?? []} />
+			<StatusPagesTable
+				data={statusPages ?? []}
+				refetch={refetch}
+			/>
 		</BasePageWithStates>
 	);
 };