From 22873a0ad99e7c92fab97577d730f59a5e585cb9 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 21:00:23 +0100
Subject: [PATCH] feat(17-01): create StatusBadge component

- Colored badges for initiative statuses (active, completed, archived)
- Colored badges for phase statuses (pending, in_progress, completed, blocked)
- Unknown statuses default to gray
- Display text uppercase with underscores replaced by spaces
---
 packages/web/src/components/StatusBadge.tsx | 35 +++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 packages/web/src/components/StatusBadge.tsx

diff --git a/packages/web/src/components/StatusBadge.tsx b/packages/web/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..114d68d
--- /dev/null
+++ b/packages/web/src/components/StatusBadge.tsx
@@ -0,0 +1,35 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const statusStyles: Record<string, string> = {
+  // Initiative statuses
+  active: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  completed: "bg-green-100 text-green-800 hover:bg-green-100/80 border-green-200",
+  archived: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+
+  // Phase statuses
+  pending: "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200",
+  in_progress: "bg-blue-100 text-blue-800 hover:bg-blue-100/80 border-blue-200",
+  blocked: "bg-red-100 text-red-800 hover:bg-red-100/80 border-red-200",
+};
+
+const defaultStyle = "bg-gray-100 text-gray-800 hover:bg-gray-100/80 border-gray-200";
+
+function formatStatusText(status: string): string {
+  return status.replace(/_/g, " ").toUpperCase();
+}
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const style = statusStyles[status] ?? defaultStyle;
+
+  return (
+    <Badge className={cn(style, className)}>
+      {formatStatusText(status)}
+    </Badge>
+  );
+}