feat(dashboard): add modular KanbanBoardHeader component and integrate it into the board layout

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">
+    <div className="space-y-8">
-      {KANBAN_COLUMNS.map((col) => {
+      {/* Workspace Header */}
-        const columnTasks = tasks.filter((t) => t.status === col.id);
+      <KanbanBoardHeader />
-        return (
+
-          <KanbanColumn
+      {/* Kanban Columns Grid */}
-            key={col.id}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-start">
-            id={col.id}
+        {KANBAN_COLUMNS.map((col) => {
-            title={col.title}
+          const columnTasks = tasks.filter((t) => t.status === col.id);
-            count={columnTasks.length}
+          return (
-            tasks={columnTasks}
+            <KanbanColumn
-            color={col.color}
+              key={col.id}
-            updatingTaskIds={updatingTaskIds}
+              id={col.id}
-            onTaskMove={updateTaskStatus}
+              title={col.title}
-          />
+              count={columnTasks.length}
-        );
+              tasks={columnTasks}
-      })}
+              color={col.color}
+              updatingTaskIds={updatingTaskIds}
+              onTaskMove={updateTaskStatus}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 }

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>
+  );
+}