From 62409a63026e37b9949e13889df8076943674db6 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 21:32:28 +0100
Subject: [PATCH] feat(18-01): create InitiativeHeader component

- Back button with ChevronLeft icon for dashboard navigation
- Card displaying initiative name, status badge, and dates
- Disabled Actions placeholder button for future Plan 04 work
- Pure presentational component receiving props
---
 .../web/src/components/InitiativeHeader.tsx   | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 packages/web/src/components/InitiativeHeader.tsx

diff --git a/packages/web/src/components/InitiativeHeader.tsx b/packages/web/src/components/InitiativeHeader.tsx
new file mode 100644
index 0000000..8b3324e
--- /dev/null
+++ b/packages/web/src/components/InitiativeHeader.tsx
@@ -0,0 +1,52 @@
+import { ChevronLeft } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { StatusBadge } from "@/components/StatusBadge";
+
+export interface InitiativeHeaderProps {
+  initiative: {
+    id: string;
+    name: string;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+  onBack: () => void;
+}
+
+export function InitiativeHeader({
+  initiative,
+  onBack,
+}: InitiativeHeaderProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Top bar: back button + actions placeholder */}
+      <div className="flex items-center justify-between">
+        <Button variant="ghost" size="sm" onClick={onBack}>
+          <ChevronLeft className="mr-1 h-4 w-4" />
+          Back to Dashboard
+        </Button>
+        <Button variant="outline" size="sm" disabled>
+          Actions
+        </Button>
+      </div>
+
+      {/* Initiative metadata card */}
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold">{initiative.name}</h1>
+              <StatusBadge status={initiative.status} />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Created: {new Date(initiative.createdAt).toLocaleDateString()}
+              {"  |  "}
+              Updated: {new Date(initiative.updatedAt).toLocaleDateString()}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}