Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Chneemann 2026-08-10 14:33:41 +02:00
parent c4989155b3
commit 9bf86c7e9e
No known key found for this signature in database
2 changed files with 58 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/(app)/dashboard/KanbanBoard.tsx
View file

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

35
app/(app)/dashboard/components/KanbanBoardHeader.tsx Normal file
View file

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