From 7906f2f615a8f28cabce0d573ae9b57fb04c7cf8 Mon Sep 17 00:00:00 2001
From: Alex <ajhollid@gmail.com>
Date: Thu, 7 May 2026 09:54:03 -0700
Subject: [PATCH] add stauts code label component

---
 .../design-elements/StatusCodeLabel.tsx       | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 client/src/Components/design-elements/StatusCodeLabel.tsx

diff --git a/client/src/Components/design-elements/StatusCodeLabel.tsx b/client/src/Components/design-elements/StatusCodeLabel.tsx
new file mode 100644
index 000000000..b1500d42b
--- /dev/null
+++ b/client/src/Components/design-elements/StatusCodeLabel.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+import {
+	formatStatusCode,
+	getStatusCodeTooltip,
+	getStatusCodeValueType,
+} from "@/Utils/statusCode";
+import { ValueLabel } from "./StatusLabel";
+import { Tooltip } from "./Tooltip";
+
+export type StatusCodeLabelProps = {
+	statusCode: number | null | undefined;
+	message?: string | null;
+	fallback?: string;
+};
+
+export const StatusCodeLabel = ({
+	statusCode,
+	message,
+	fallback = "N/A",
+}: StatusCodeLabelProps) => {
+	const { t } = useTranslation();
+	if (!statusCode) {
+		return <>{fallback}</>;
+	}
+
+	const text = formatStatusCode(statusCode, t);
+	const tooltip = getStatusCodeTooltip(statusCode, message, t);
+	const body = (
+		<ValueLabel
+			value={getStatusCodeValueType(statusCode)}
+			text={text}
+		/>
+	);
+	if (!tooltip) return body;
+	return <Tooltip title={tooltip}>{body}</Tooltip>;
+};