From 9bf86c7e9ed166ce68c6b82c504a75e2b270c4e9 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Mon, 10 Aug 2026 14:33:41 +0200
Subject: [PATCH] `feat(dashboard): add modular KanbanBoardHeader component and
 integrate it into the board layout`

---
 app/(app)/dashboard/KanbanBoard.tsx           | 39 +++++++++++--------
 .../components/KanbanBoardHeader.tsx          | 35 +++++++++++++++++
 2 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 app/(app)/dashboard/components/KanbanBoardHeader.tsx

diff --git a/app/(app)/dashboard/KanbanBoard.tsx b/app/(app)/dashboard/KanbanBoard.tsx
index 32636da..08be5e8 100644
--- a/app/(app)/dashboard/KanbanBoard.tsx
+++ b/app/(app)/dashboard/KanbanBoard.tsx
@@ -9,6 +9,7 @@ import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import KanbanColumn from "./KanbanColumn";
 import { KANBAN_COLUMNS, Task, TaskStatus } from "@/types/tasks";
+import KanbanBoardHeader from "./components/KanbanBoardHeader";
 
 /**
  * Renders the responsive grid container of kanban columns, coordinating state tracking
@@ -61,22 +62,28 @@ export default function KanbanBoard({ tasks }: { tasks: Task[] }) {
   };
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-start">
-      {KANBAN_COLUMNS.map((col) => {
-        const columnTasks = tasks.filter((t) => t.status === col.id);
-        return (
-          <KanbanColumn
-            key={col.id}
-            id={col.id}
-            title={col.title}
-            count={columnTasks.length}
-            tasks={columnTasks}
-            color={col.color}
-            updatingTaskIds={updatingTaskIds}
-            onTaskMove={updateTaskStatus}
-          />
-        );
-      })}
+    <div className="space-y-8">
+      {/* Workspace Header */}
+      <KanbanBoardHeader />
+
+      {/* Kanban Columns Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-start">
+        {KANBAN_COLUMNS.map((col) => {
+          const columnTasks = tasks.filter((t) => t.status === col.id);
+          return (
+            <KanbanColumn
+              key={col.id}
+              id={col.id}
+              title={col.title}
+              count={columnTasks.length}
+              tasks={columnTasks}
+              color={col.color}
+              updatingTaskIds={updatingTaskIds}
+              onTaskMove={updateTaskStatus}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/app/(app)/dashboard/components/KanbanBoardHeader.tsx b/app/(app)/dashboard/components/KanbanBoardHeader.tsx
new file mode 100644
index 0000000..7906d9d
--- /dev/null
+++ b/app/(app)/dashboard/components/KanbanBoardHeader.tsx
@@ -0,0 +1,35 @@
+/**
+ * @file dashboard/components/KanbanBoardHeader.tsx
+ * @description Component rendering the top title header and action buttons for the dashboard view.
+ */
+
+import { Plus, Sparkles } from "lucide-react";
+
+/**
+ * Renders the dashboard header section including title, subtitle, workspace indicator, and action triggers.
+ *
+ * @returns {JSX.Element} The rendered dashboard header component.
+ */
+export default function KanbanBoardHeader() {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <div>
+        <div className="flex items-center gap-2 text-primary font-medium text-xs uppercase tracking-wider mb-1">
+          <Sparkles size={14} />
+          Workspace
+        </div>
+        <h1 className="text-3xl font-extrabold tracking-tight">Dashboard</h1>
+        <p className="text-sm text-foreground-muted mt-1">
+          Manage your tasks and keep track of your progress.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button className="inline-flex items-center gap-2 px-3.5 py-2.5 rounded-xl font-medium text-sm text-black hover:text-foreground bg-primary hover:bg-primary-hover active:scale-95 transition-colors duration-200 cursor-pointer">
+          <Plus size={16} />
+          New Task
+        </button>
+      </div>
+    </div>
+  );
+}