From de78d3387e05c4c520b4a99128e44178510a1fe7 Mon Sep 17 00:00:00 2001
From: Mateo <carciu98@gmail.com>
Date: Sat, 11 Jul 2026 16:40:46 +0200
Subject: [PATCH] feat: add column settings management and type categorization,
 fix dates issues in front & regroup discussion and activity in tabs

---
 .../Settings/ColumnSettingsController.php     |  27 ++
 app/Http/Controllers/TaskController.php       |   1 +
 app/Http/Requests/ColumnStoreRequest.php      |   1 +
 app/Http/Requests/ColumnUpdateRequest.php     |   1 +
 app/Http/Resources/ColumnResource.php         |   1 +
 app/Http/Resources/TaskResource.php           |   5 +
 app/Models/Column.php                         |   1 +
 app/Services/ColumnService.php                |   1 +
 ...07_06_225000_add_type_to_columns_table.php |  28 ++
 database/seeders/DatabaseSeeder.php           |   9 +-
 resources/js/components/tasks/KanbanBoard.vue |   6 +-
 .../js/components/tasks/KanbanColumn.vue      |  87 ++++---
 .../tasks/TaskActivityDiscussionPanel.vue     | 239 +++++++++++-------
 .../tasks/TaskCommentThreadItem.vue           |   2 +-
 .../js/components/tasks/TaskEditDialog.vue    |  30 ++-
 resources/js/components/tasks/TaskItem.vue    |  94 ++++---
 resources/js/composables/useDateFormatter.ts  |   4 +-
 resources/js/layouts/settings/Layout.vue      |   4 +
 resources/js/pages/Tasks.vue                  |   4 +-
 resources/js/pages/settings/Columns.vue       | 145 +++++++++++
 resources/js/types/index.d.ts                 |   6 +
 routes/settings.php                           |   4 +
 tests/Feature/Settings/ColumnSettingsTest.php |  59 +++++
 23 files changed, 576 insertions(+), 183 deletions(-)
 create mode 100644 app/Http/Controllers/Settings/ColumnSettingsController.php
 create mode 100644 database/migrations/2026_07_06_225000_add_type_to_columns_table.php
 create mode 100644 resources/js/pages/settings/Columns.vue
 create mode 100644 tests/Feature/Settings/ColumnSettingsTest.php

diff --git a/app/Http/Controllers/Settings/ColumnSettingsController.php b/app/Http/Controllers/Settings/ColumnSettingsController.php
new file mode 100644
index 0000000..66d823a
--- /dev/null
+++ b/app/Http/Controllers/Settings/ColumnSettingsController.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use App\Models\Column;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ColumnSettingsController extends Controller
+{
+    /**
+     * Show the column status mapping settings page.
+     */
+    public function index(Request $request): Response
+    {
+        $columns = Column::query()
+            ->where('team_id', $request->user()->team_id)
+            ->orderBy('order')
+            ->get();
+
+        return Inertia::render('settings/Columns', [
+            'columns' => $columns,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/TaskController.php b/app/Http/Controllers/TaskController.php
index 69fc825..9089b44 100644
--- a/app/Http/Controllers/TaskController.php
+++ b/app/Http/Controllers/TaskController.php
@@ -73,6 +73,7 @@ public function show(Request $request, Task $task): JsonResponse
         $this->authorize('view', $task);
 
         $task->load([
+            'column:id,name,type',
             'creator:id,name',
             'assignee:id,name',
             'tags:id,name,color',
diff --git a/app/Http/Requests/ColumnStoreRequest.php b/app/Http/Requests/ColumnStoreRequest.php
index 7d12356..61de742 100644
--- a/app/Http/Requests/ColumnStoreRequest.php
+++ b/app/Http/Requests/ColumnStoreRequest.php
@@ -15,6 +15,7 @@ public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:255'],
+            'type' => ['nullable', 'string', 'in:todo,in_progress,done'],
         ];
     }
 }
diff --git a/app/Http/Requests/ColumnUpdateRequest.php b/app/Http/Requests/ColumnUpdateRequest.php
index 3ad07ed..16e403e 100644
--- a/app/Http/Requests/ColumnUpdateRequest.php
+++ b/app/Http/Requests/ColumnUpdateRequest.php
@@ -15,6 +15,7 @@ public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:255'],
+            'type' => ['sometimes', 'required', 'string', 'in:todo,in_progress,done'],
         ];
     }
 }
diff --git a/app/Http/Resources/ColumnResource.php b/app/Http/Resources/ColumnResource.php
index cb41942..768f357 100644
--- a/app/Http/Resources/ColumnResource.php
+++ b/app/Http/Resources/ColumnResource.php
@@ -35,6 +35,7 @@ public function toArray(Request $request): array
             'id' => $this->id,
             'team_id' => $this->team_id,
             'name' => $this->name,
+            'type' => $this->type,
             'order' => $this->order,
             'tasks' => $tasksData,
             'pagination' => $pagination,
diff --git a/app/Http/Resources/TaskResource.php b/app/Http/Resources/TaskResource.php
index 710638f..8ebfd45 100644
--- a/app/Http/Resources/TaskResource.php
+++ b/app/Http/Resources/TaskResource.php
@@ -160,6 +160,11 @@ public function toArray(Request $request): array
                 'id' => $this->assignee->id,
                 'name' => $this->assignee->name,
             ]),
+            'column' => $this->whenLoaded('column', fn() => [
+                'id' => $this->column->id,
+                'name' => $this->column->name,
+                'type' => $this->column->type,
+            ]),
             'comments' => $this->whenLoaded(
                 'comments',
                 fn() => $this->comments
diff --git a/app/Models/Column.php b/app/Models/Column.php
index ca75ef3..ad50f3a 100644
--- a/app/Models/Column.php
+++ b/app/Models/Column.php
@@ -16,6 +16,7 @@ class Column extends Model
     protected $fillable = [
         'team_id',
         'name',
+        'type',
         'order',
     ];
 
diff --git a/app/Services/ColumnService.php b/app/Services/ColumnService.php
index 1e6a08f..611fdbd 100644
--- a/app/Services/ColumnService.php
+++ b/app/Services/ColumnService.php
@@ -19,6 +19,7 @@ public function createColumn(array $data, User $user): Column
 
         return Column::create([
             'name' => $data['name'],
+            'type' => $data['type'] ?? 'todo',
             'team_id' => $user->team_id,
             'order' => $order,
         ]);
diff --git a/database/migrations/2026_07_06_225000_add_type_to_columns_table.php b/database/migrations/2026_07_06_225000_add_type_to_columns_table.php
new file mode 100644
index 0000000..0e3d5ed
--- /dev/null
+++ b/database/migrations/2026_07_06_225000_add_type_to_columns_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('columns', function (Blueprint $table) {
+            $table->enum('type', ['todo', 'in_progress', 'done'])->default('todo')->after('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('columns', function (Blueprint $table) {
+            $table->dropColumn('type');
+        });
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 11b64fe..ebd6ede 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -37,19 +37,22 @@ public function run(): void
             $todoColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'To Do',
-                'order' => 1
+                'order' => 1,
+                'type' => 'todo'
             ]);
 
             $progressColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'In Progress',
-                'order' => 2
+                'order' => 2,
+                'type' => 'in_progress'
             ]);
 
             $doneColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'Done',
-                'order' => 3
+                'order' => 3,
+                'type' => 'done'
             ]);
 
             $teamUsers = User::where('team_id', $team->id)->pluck('id');
diff --git a/resources/js/components/tasks/KanbanBoard.vue b/resources/js/components/tasks/KanbanBoard.vue
index 3bf1595..945af88 100644
--- a/resources/js/components/tasks/KanbanBoard.vue
+++ b/resources/js/components/tasks/KanbanBoard.vue
@@ -71,12 +71,12 @@ const onColumnDragChange = (event: {
 
 <template>
     <div
-        class="relative flex h-full w-full items-start gap-4 overflow-x-auto pb-4"
+        class="relative h-full w-full overflow-auto pb-4"
     >
         <draggable
             v-model="localColumns"
             item-key="id"
-            class="flex h-full w-full items-start gap-4"
+            class="flex min-h-full min-w-max w-full items-stretch gap-4"
             handle=".column-drag-handle"
             ghost-class="opacity-60"
             @start="onColumnDragStart"
@@ -91,7 +91,7 @@ const onColumnDragChange = (event: {
             </template>
 
             <template #footer>
-                <div class="mt-0 shrink-0">
+                <div class="mt-0 shrink-0 p-1">
                     <Button
                         variant="outline"
                         class="border-dashed text-muted-foreground shadow-sm transition-all hover:border-foreground hover:text-foreground"
diff --git a/resources/js/components/tasks/KanbanColumn.vue b/resources/js/components/tasks/KanbanColumn.vue
index f0bb0e2..4f65fc2 100644
--- a/resources/js/components/tasks/KanbanColumn.vue
+++ b/resources/js/components/tasks/KanbanColumn.vue
@@ -7,11 +7,18 @@ import {
     Check,
     ChevronDown,
     GripVertical,
+    MoreHorizontal,
     Pencil,
     Trash2,
     X,
 } from 'lucide-vue-next';
-import { ref, watch } from 'vue';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import draggable from 'vuedraggable';
 import ColumnDeleteDialog from './ColumnDeleteDialog.vue';
@@ -34,16 +41,7 @@ const pagination = ref<Column['pagination']>(
     props.column.pagination ? { ...props.column.pagination } : undefined,
 );
 const isLoadingMore = ref(false);
-
-watch(
-    () => props.column.tasks,
-    (newTasks) => {
-        localTasks.value = [...(newTasks || [])];
-        if (props.column.pagination) {
-            pagination.value = { ...props.column.pagination };
-        }
-    },
-);
+const isDone = computed(() => props.column.type === 'done');
 
 const loadMoreTasks = async () => {
     if (!pagination.value || !pagination.value.has_more) return;
@@ -150,13 +148,24 @@ const onDragChange = (event: any) => {
         );
     }
 };
+
+
+watch(
+    () => props.column.tasks,
+    (newTasks) => {
+        localTasks.value = [...(newTasks || [])];
+        if (props.column.pagination) {
+            pagination.value = { ...props.column.pagination };
+        }
+    },
+);
 </script>
 
 <template>
     <div
-        class="flex h-full max-h-[calc(100vh-12rem)] w-[350px] shrink-0 flex-col rounded-xl bg-muted/40 p-3"
+        class="flex w-[350px] shrink-0 flex-col rounded-xl bg-[color-mix(in_srgb,var(--muted)_40%,var(--background))]"
     >
-        <div class="mb-3 flex items-center justify-between px-1">
+        <div class="sticky top-0 z-10 flex items-center justify-between px-4 pt-3 pb-3 bg-[color-mix(in_srgb,var(--muted)_40%,var(--background))] rounded-t-xl">
             <div v-if="isEditingColumn" class="flex flex-1 items-center gap-2">
                 <input
                     v-model="editName"
@@ -200,34 +209,47 @@ const onDragChange = (event: any) => {
                 >
                     {{ column.pagination?.total }}
                 </span>
+                <Check
+                    v-if="isDone"
+                    class="ml-2 size-3.5 shrink-0 text-green-500 dark:text-green-400"
+                    title="Work items moved to this column are marked as done"
+                />
             </h3>
 
-            <div class="flex items-center space-x-1" v-if="!isEditingColumn">
-                <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    class="h-6 w-6 text-muted-foreground"
-                    @click="isEditingColumn = true"
-                >
-                    <Pencil class="size-3" />
-                </Button>
-                <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    class="h-6 w-6 text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    @click="isDeleteColumnOpen = true"
-                >
-                    <Trash2 class="size-3" />
-                </Button>
+            <div v-if="!isEditingColumn">
+                <DropdownMenu>
+                    <DropdownMenuTrigger as-child>
+                        <Button
+                            variant="ghost"
+                            size="icon-sm"
+                            class="h-6 w-6 text-muted-foreground"
+                        >
+                            <MoreHorizontal class="size-3.5" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" class="w-32">
+                        <DropdownMenuItem @click="isEditingColumn = true">
+                            <Pencil class="mr-2 size-3" />
+                            <span>Rename</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            @click="isDeleteColumnOpen = true"
+                            class="text-destructive focus:text-destructive focus:bg-destructive/10"
+                        >
+                            <Trash2 class="mr-2 size-3" />
+                            <span>Delete</span>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
             </div>
         </div>
 
-        <div class="no-scrollbar min-h-[100px] flex-1 overflow-y-auto">
+        <div class="no-scrollbar flex flex-1 flex-col px-3 pb-3">
             <draggable
                 v-model="localTasks"
                 group="tasks"
                 item-key="id"
-                class="flex min-h-full flex-col gap-3 pb-2"
+                class="flex flex-1 flex-col gap-3 pb-2 min-h-[100px]"
                 ghost-class="opacity-50"
                 @change="onDragChange"
             >
@@ -235,6 +257,7 @@ const onDragChange = (event: any) => {
                     <div class="cursor-grab active:cursor-grabbing">
                         <TaskItem
                             :task="element"
+                            :is-done="props.column.type === 'done'"
                             @edit="emit('edit', $event)"
                         />
                     </div>
diff --git a/resources/js/components/tasks/TaskActivityDiscussionPanel.vue b/resources/js/components/tasks/TaskActivityDiscussionPanel.vue
index 61bbfb3..80264bf 100644
--- a/resources/js/components/tasks/TaskActivityDiscussionPanel.vue
+++ b/resources/js/components/tasks/TaskActivityDiscussionPanel.vue
@@ -6,8 +6,8 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
 import type { Task, TaskComment, TaskEvent } from '@/types';
-import { Calendar, ClockAlert, MessageSquarePlus } from 'lucide-vue-next';
-import { computed } from 'vue';
+import { AlertTriangle, Calendar, Check, ClockAlert, MessageSquarePlus } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
     isLoadingDetails: boolean;
@@ -49,8 +49,10 @@ const dueDateLabel = computed(() => {
     if (!props.activeTask?.due_date) return null;
 
     return new Date(props.activeTask.due_date).toLocaleDateString('en-US', {
-        day: 'numeric',
+        year: 'numeric',
         month: 'short',
+        day: 'numeric',
+        timeZone: 'UTC',
     });
 });
 
@@ -60,119 +62,162 @@ const daysInColumnLabel = computed(() => {
     if (days === null || days === undefined) return null;
     return days === 0 ? 'Today' : `${days}d`;
 });
+
+const isDone = computed(() => props.activeTask?.column?.type === 'done');
+
+const activeTab = ref<'discussion' | 'activity'>('discussion');
 </script>
 
 <template>
     <div
-        class="border-t border-border p-6 pt-4 lg:overflow-y-auto lg:overscroll-contain lg:border-t-0 lg:border-l lg:pl-8"
+        class="flex flex-col border-t border-border lg:h-full lg:min-h-0 lg:border-t-0 lg:border-l"
     >
-        <div
-            v-if="isLoadingDetails"
-            class="mb-6 flex items-center gap-2 rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm text-muted-foreground"
-        >
-            <Spinner class="size-4" />
-            Loading task details...
-        </div>
-
-        <div class="mb-6 space-y-3">
-            <h3 class="text-base font-semibold">Activity</h3>
-
+        <div class="px-6 pt-6 lg:pl-8">
             <div
-                v-if="timelineEvents.length === 0"
-                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
+                v-if="isLoadingDetails"
+                class="mb-6 flex items-center gap-2 rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm text-muted-foreground"
             >
-                No activity yet.
+                <Spinner class="size-4" />
+                Loading task details...
             </div>
 
-            <ol v-else class="space-y-2">
-                <li
-                    v-for="event in timelineEvents"
-                    :key="event.id"
-                    class="rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm"
-                >
-                    <p class="font-medium text-foreground">
-                        {{ getEventLabel(event) }}
-                    </p>
-                    <p class="text-xs text-muted-foreground">
-                        {{ formatTimelineDate(event.created_at) }}
-                    </p>
-                </li>
-            </ol>
-        </div>
+            <div class="mb-6 space-y-4">
+                <div class="flex flex-wrap items-center gap-3">
+                    <div
+                        v-if="props.activeTask?.column"
+                        class="flex items-center gap-1.5 rounded-md border border-border/50 bg-muted/20 px-2 py-0.5"
+                    >
+                        <span class="text-xs font-medium text-muted-foreground">{{ props.activeTask.column.name }}</span>
+                        <Check v-if="isDone" class="size-3 text-green-500" />
+                    </div>
+
+                    <div
+                        v-if="dueDateLabel"
+                        :class="[
+                            'flex items-center gap-1.5 transition-colors',
+                            !isDone && isOverdue
+                                ? 'bg-destructive/10 text-destructive border border-destructive/20 px-2 py-0.5 rounded-md font-semibold text-[11px]'
+                                : 'text-xs text-muted-foreground font-medium'
+                        ]"
+                        title="Due date"
+                    >
+                        <AlertTriangle v-if="!isDone && isOverdue" class="size-3.5" />
+                        <Calendar v-else class="size-3.5" />
+                        <span>{{ dueDateLabel }}</span>
+                    </div>
+
+                    <div
+                        v-if="daysInColumnLabel"
+                        class="flex items-center gap-1.5 text-xs text-muted-foreground font-medium"
+                        title="Time in column"
+                    >
+                        <ClockAlert class="size-3.5 text-muted-foreground" />
+                        <span>{{ daysInColumnLabel }}</span>
+                    </div>
+                </div>
 
-        <div class="mb-4 space-y-3">
-            <h3 class="text-base font-semibold">Discussion</h3>
-            <div
-                class="flex flex-wrap items-center gap-3"
-            >
-                <div
-                    v-if="dueDateLabel"
-                    :class="[
-                        'flex items-center gap-1.5 transition-colors',
-                        isOverdue
-                            ? 'bg-destructive/10 text-destructive border border-destructive/20 px-2 py-0.5 rounded-md font-semibold text-[11px]'
-                            : 'text-xs text-muted-foreground font-medium'
-                    ]"
-                    title="Due date"
-                >
-                    <Calendar class="size-3.5" />
-                    <span>{{ dueDateLabel }}</span>
+                <div class="flex items-center gap-6 border-b border-border/60">
+                    <button
+                        type="button"
+                        @click="activeTab = 'discussion'"
+                        :class="[
+                            'pb-2 text-sm font-medium transition-colors border-b-2',
+                            activeTab === 'discussion' 
+                                ? 'border-primary text-foreground' 
+                                : 'border-transparent text-muted-foreground hover:text-foreground'
+                        ]"
+                    >
+                        Discussion
+                    </button>
+                    <button
+                        type="button"
+                        @click="activeTab = 'activity'"
+                        :class="[
+                            'pb-2 text-sm font-medium transition-colors border-b-2',
+                            activeTab === 'activity' 
+                                ? 'border-primary text-foreground' 
+                                : 'border-transparent text-muted-foreground hover:text-foreground'
+                        ]"
+                    >
+                        Activity
+                    </button>
                 </div>
+            </div>
+        </div>
 
+        <div class="flex-1 overflow-y-auto px-6 pb-6 lg:pl-8">
+            <!-- Activity Tab -->
+            <div v-show="activeTab === 'activity'" class="space-y-4">
                 <div
-                    v-if="daysInColumnLabel"
-                    class="flex items-center gap-1.5 text-xs text-muted-foreground font-medium"
-                    title="Time in column"
+                    v-if="timelineEvents.length === 0"
+                    class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
                 >
-                    <ClockAlert class="size-3.5 text-muted-foreground" />
-                    <span>{{ daysInColumnLabel }}</span>
+                    No activity yet.
                 </div>
-            </div>
-        </div>
 
-        <form class="space-y-3" @submit.prevent="emit('submitComment')">
-            <div class="grid gap-2">
-                <Label>Leave a comment</Label>
-                <TaskRichTextEditor
-                    :model-value="commentBody"
-                    placeholder="Share progress, blockers, or next steps..."
-                    @update:model-value="emit('updateCommentBody', $event)"
-                />
-                <InputError :message="commentError" />
+                <ol v-else class="space-y-2">
+                    <li
+                        v-for="event in timelineEvents"
+                        :key="event.id"
+                        class="rounded-lg border border-border/70 bg-muted/20 px-3 py-2 text-sm"
+                    >
+                        <p class="font-medium text-foreground">
+                            {{ getEventLabel(event) }}
+                        </p>
+                        <p class="text-xs text-muted-foreground">
+                            {{ formatTimelineDate(event.created_at) }}
+                        </p>
+                    </li>
+                </ol>
             </div>
 
-            <Button
-                type="submit"
-                :disabled="commentProcessing || !cleanedCommentBody"
-            >
-                <MessageSquarePlus class="size-4" />
-                Post comment
-            </Button>
-        </form>
-
-        <div class="mt-4 space-y-3">
-            <div
-                v-if="commentsList.length === 0"
-                class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
-            >
-                No comments yet. Start the discussion.
+            <!-- Discussion Tab -->
+            <div v-show="activeTab === 'discussion'" class="space-y-6">
+                <form class="space-y-3" @submit.prevent="emit('submitComment')">
+                    <div class="grid gap-2">
+                        <Label>Leave a comment</Label>
+                        <TaskRichTextEditor
+                            :model-value="commentBody"
+                            placeholder="Share progress, blockers, or next steps..."
+                            @update:model-value="emit('updateCommentBody', $event)"
+                        />
+                        <InputError :message="commentError" />
+                    </div>
+
+                    <Button
+                        type="submit"
+                        :disabled="commentProcessing || !cleanedCommentBody"
+                    >
+                        <MessageSquarePlus class="size-4" />
+                        Post comment
+                    </Button>
+                </form>
+
+                <div class="space-y-3">
+                    <div
+                        v-if="commentsList.length === 0"
+                        class="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground"
+                    >
+                        No comments yet. Start the discussion.
+                    </div>
+
+                    <TaskCommentThreadItem
+                        v-for="comment in commentsList"
+                        :key="comment.id"
+                        :comment="comment"
+                        :active-reply-to-id="activeReplyToId"
+                        :reply-body="replyBody"
+                        :reply-error="replyError"
+                        :posting-reply="postingReply"
+                        :format-date="formatDate"
+                        :get-initials="getInitials"
+                        @start-reply="emit('startReply', $event)"
+                        @cancel-reply="emit('cancelReply')"
+                        @update-reply-body="emit('updateReplyBody', $event)"
+                        @submit-reply="emit('submitReply', $event)"
+                    />
+                </div>
             </div>
-
-            <TaskCommentThreadItem
-                v-for="comment in commentsList"
-                :key="comment.id"
-                :comment="comment"
-                :active-reply-to-id="activeReplyToId"
-                :reply-body="replyBody"
-                :reply-error="replyError"
-                :posting-reply="postingReply"
-                :format-date="formatDate"
-                :get-initials="getInitials"
-                @start-reply="emit('startReply', $event)"
-                @cancel-reply="emit('cancelReply')"
-                @update-reply-body="emit('updateReplyBody', $event)"
-                @submit-reply="emit('submitReply', $event)"
-            />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/tasks/TaskCommentThreadItem.vue b/resources/js/components/tasks/TaskCommentThreadItem.vue
index c7d1287..9103415 100644
--- a/resources/js/components/tasks/TaskCommentThreadItem.vue
+++ b/resources/js/components/tasks/TaskCommentThreadItem.vue
@@ -155,7 +155,7 @@ const showLessReplies = () => {
                         type="button"
                         size="sm"
                         :disabled="postingReply"
-                        @click="emit('submitReply', comment.id)"
+                        @click="() => { emit('submitReply', comment.id); repliesExpanded = true; }"
                     >
                         Post reply
                     </Button>
diff --git a/resources/js/components/tasks/TaskEditDialog.vue b/resources/js/components/tasks/TaskEditDialog.vue
index 84a72a4..bda6ff1 100644
--- a/resources/js/components/tasks/TaskEditDialog.vue
+++ b/resources/js/components/tasks/TaskEditDialog.vue
@@ -65,7 +65,7 @@ const hydrateFormsFromTask = (task: Task) => {
     form.title = task.title;
     form.description = task.description || '';
     form.due_date = task.due_date
-        ? new Date(task.due_date).toISOString().slice(0, 16)
+        ? task.due_date.slice(0, 16)
         : '';
     form.assigned_to = task.assigned_to ?? null;
     form.tag_ids = task.tags?.map((t) => t.id) ?? [];
@@ -74,8 +74,10 @@ const hydrateFormsFromTask = (task: Task) => {
     commentsList.value = [...(task.comments ?? [])];
 };
 
-const loadTaskDetails = async (taskId: number) => {
-    isLoadingDetails.value = true;
+const loadTaskDetails = async (taskId: number, showLoader = true) => {
+    if (showLoader) {
+        isLoadingDetails.value = true;
+    }
 
     try {
         const response = await fetch(show(taskId).url, {
@@ -94,7 +96,7 @@ const loadTaskDetails = async (taskId: number) => {
         form.title = task.title;
         form.description = task.description || '';
         form.due_date = task.due_date
-            ? new Date(task.due_date).toISOString().slice(0, 16)
+            ? task.due_date.slice(0, 16)
             : '';
         form.assigned_to = task.assigned_to ?? null;
         form.attachments = [];
@@ -106,7 +108,9 @@ const loadTaskDetails = async (taskId: number) => {
         toast.error('Unable to load task details');
         return false;
     } finally {
-        isLoadingDetails.value = false;
+        if (showLoader) {
+            isLoadingDetails.value = false;
+        }
     }
 };
 
@@ -183,9 +187,9 @@ const submitComment = () => {
 
     commentForm.post(comments.store(taskId).url, {
         preserveScroll: true,
-        onSuccess: () => {
+        onSuccess: async () => {
+            await loadTaskDetails(taskId, false);
             commentForm.reset('body');
-            void loadTaskDetails(taskId);
             toast.success('Comment posted');
         },
     });
@@ -215,16 +219,16 @@ const submitReply = (commentId: number) => {
     replyForm.parent_id = commentId;
     replyForm.post(comments.store(taskId).url, {
         preserveScroll: true,
-        onSuccess: () => {
+        onSuccess: async () => {
+            await loadTaskDetails(taskId, false);
             cancelReply();
-            void loadTaskDetails(taskId);
             toast.success('Reply posted');
         },
     });
 };
 
-watch([() => props.task, isOpen], ([task, open]) => {
-    if (task && open) {
+watch([() => props.task, isOpen], ([task, open], [oldTask, oldOpen]) => {
+    if (task && open && (!oldOpen || oldTask?.id !== task.id)) {
         taskDetails.value = null;
         hydrateFormsFromTask(task);
         void loadTaskDetails(task.id);
@@ -244,12 +248,12 @@ watch([() => props.task, isOpen], ([task, open]) => {
 <template>
     <Dialog v-model:open="isOpen">
         <DialogContent
-            class="task-edit-dialog w-[97vw] max-w-[1400px] overflow-hidden bg-background p-0 sm:max-w-[1400px]"
+            class="task-edit-dialog w-[97vw] max-w-[1400px] overflow-hidden bg-background p-0 sm:max-w-[1400px] focus:outline-none"
             :show-close-button="false"
             @open-auto-focus.prevent
         >
             <div
-                class="max-h-[92vh] overflow-y-auto overscroll-contain bg-background lg:overflow-hidden"
+                class="max-h-[92vh] overflow-y-auto overscroll-contain bg-background lg:overflow-hidden focus:outline-none"
             >
                 <DialogHeader
                     class="sticky top-0 z-20 border-b bg-background/95 px-6 pt-6 pr-14 pb-4 backdrop-blur supports-backdrop-filter:bg-background/80"
diff --git a/resources/js/components/tasks/TaskItem.vue b/resources/js/components/tasks/TaskItem.vue
index 9067f11..7554ee4 100644
--- a/resources/js/components/tasks/TaskItem.vue
+++ b/resources/js/components/tasks/TaskItem.vue
@@ -4,17 +4,29 @@ import TaskDeleteDialog from '@/components/tasks/TaskDeleteDialog.vue';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { useInitials } from '@/composables/useInitials';
 import { destroy } from '@/routes/tasks';
 import type { Task } from '@/types';
 import { router } from '@inertiajs/vue3';
-import { Calendar, ClockAlert, Pencil, Trash2 } from 'lucide-vue-next';
+import { AlertTriangle, Calendar, Check, ClockAlert, MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next';
 import { ref } from 'vue';
 import { toast } from 'vue-sonner';
 
-const props = defineProps<{
-    task: Task;
-}>();
+const props = withDefaults(
+    defineProps<{
+        task: Task;
+        isDone?: boolean;
+    }>(),
+    {
+        isDone: false,
+    }
+);
 
 const emit = defineEmits<{
     edit: [task: Task];
@@ -25,6 +37,7 @@ const { getInitials } = useInitials();
 const showDeleteDialog = ref(false);
 
 const isOverdue = (task: Task) => {
+    if (props.isDone) return false;
     return task.due_date ? new Date(task.due_date) < new Date() : false;
 };
 
@@ -47,33 +60,43 @@ const deleteTask = () => {
         <CardContent class="flex flex-col gap-3 pt-3.5">
             <!-- Header: Title and Actions -->
             <div class="flex items-start justify-between gap-2">
-                <p
-                    class="line-clamp-2 text-sm leading-snug font-medium"
-                    :title="task.title"
-                >
-                    {{ task.title }}
-                </p>
+                <div class="flex min-w-0 items-start gap-1.5">
+                    <p
+                        class="line-clamp-2 text-sm leading-snug font-medium"
+                        :title="task.title"
+                    >
+                        {{ task.title }}
+                    </p>
+                </div>
                 <div
                     class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100"
                 >
-                    <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        class="h-6 w-6 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                        @click.stop="emit('edit', task)"
-                        title="Edit task"
-                    >
-                        <Pencil class="size-3" />
-                    </Button>
-                    <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        class="h-6 w-6 text-destructive hover:bg-destructive/10 hover:text-destructive"
-                        @click.stop="showDeleteDialog = true"
-                        title="Delete task"
-                    >
-                        <Trash2 class="size-3" />
-                    </Button>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger as-child>
+                            <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                class="h-6 w-6 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                                @click.stop
+                                title="Task actions"
+                            >
+                                <MoreHorizontal class="size-3.5" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" class="w-32">
+                            <DropdownMenuItem @click.stop="emit('edit', task)">
+                                <Pencil class="mr-2 size-3" />
+                                <span>Edit</span>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                                @click.stop="showDeleteDialog = true"
+                                class="text-destructive focus:text-destructive focus:bg-destructive/10"
+                            >
+                                <Trash2 class="mr-2 size-3" />
+                                <span>Delete</span>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
             </div>
 
@@ -118,20 +141,29 @@ const deleteTask = () => {
                         v-if="task.due_date"
                         :class="[
                             'flex items-center gap-1.5 transition-colors',
-                            isOverdue(task)
+                            !isDone && isOverdue(task)
                                 ? 'bg-destructive/10 text-destructive border border-destructive/20 px-2 py-0.5 rounded-md font-semibold text-[10px]'
                                 : 'text-[11px] text-muted-foreground/80 font-medium'
                         ]"
                         title="Due date"
                     >
-                        <Calendar class="size-3.5" />
+                        <AlertTriangle v-if="!isDone && isOverdue(task)" class="size-3.5" />
+                        <Calendar v-else class="size-3.5" />
                         <span>{{
                             new Date(task.due_date).toLocaleDateString(
                                 'en-US',
-                                { day: 'numeric', month: 'short' },
+                                { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' },
                             )
                         }}</span>
                     </div>
+
+                    <div
+                        v-if="isDone"
+                        class="flex items-center gap-1 text-[11px] font-medium text-green-500 dark:text-green-400"
+                        title="Done"
+                    >
+                        <Check class="size-3.5" />
+                    </div>
                 </div>
 
                 <!-- Avatar -->
diff --git a/resources/js/composables/useDateFormatter.ts b/resources/js/composables/useDateFormatter.ts
index ef25b94..861f16a 100644
--- a/resources/js/composables/useDateFormatter.ts
+++ b/resources/js/composables/useDateFormatter.ts
@@ -7,7 +7,7 @@ export const formatDate = (value: string | null): string => {
     const date = new Date(value);
     if (Number.isNaN(date.getTime())) return 'No due date';
 
-    return dateTimeFormatter({ month: 'short', day: 'numeric' }).format(date);
+    return dateTimeFormatter({ year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
 };
 
 export const formatDateTime = (value: string | null): string => {
@@ -17,9 +17,11 @@ export const formatDateTime = (value: string | null): string => {
     if (Number.isNaN(date.getTime())) return 'No date';
 
     return dateTimeFormatter({
+        year: 'numeric',
         month: 'short',
         day: 'numeric',
         hour: '2-digit',
         minute: '2-digit',
+        timeZone: 'UTC',
     }).format(date);
 };
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 6a79acf..33d23c8 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -27,6 +27,10 @@ const sidebarNavItems: NavItem[] = [
         title: 'Teams',
         href: '/settings/teams',
     },
+    {
+        title: 'Columns & Statuses',
+        href: '/settings/columns',
+    },
     {
         title: 'Appearance',
         href: editAppearance(),
diff --git a/resources/js/pages/Tasks.vue b/resources/js/pages/Tasks.vue
index 59e8ee3..f993d84 100644
--- a/resources/js/pages/Tasks.vue
+++ b/resources/js/pages/Tasks.vue
@@ -108,7 +108,7 @@ watch(isEditModalOpen, (isOpen) => {
     <Head title="Tasks" />
 
     <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="flex h-full flex-1 flex-col gap-6 p-4">
+        <div class="flex h-[calc(100svh-4rem)] flex-col gap-6 p-4">
             <div class="flex items-center justify-between">
                 <div>
                     <h1 class="text-2xl font-semibold">Tasks</h1>
@@ -134,7 +134,7 @@ watch(isEditModalOpen, (isOpen) => {
                 />
 
                 <div
-                    class="h-[calc(100vh-[breadcrumbs height]-header)] flex-1 overflow-hidden"
+                    class="flex-1 min-h-0 overflow-hidden"
                 >
                     <KanbanBoard
                         :columns="localColumns"
diff --git a/resources/js/pages/settings/Columns.vue b/resources/js/pages/settings/Columns.vue
new file mode 100644
index 0000000..e5eeb50
--- /dev/null
+++ b/resources/js/pages/settings/Columns.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import HeadingSmall from '@/components/HeadingSmall.vue';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import SettingsLayout from '@/layouts/settings/Layout.vue';
+import type { BreadcrumbItem, Column } from '@/types';
+import { Head, router } from '@inertiajs/vue3';
+import { Info } from 'lucide-vue-next';
+import { toast } from 'vue-sonner';
+
+defineProps<{
+    columns: Column[];
+}>();
+
+const breadcrumbItems: BreadcrumbItem[] = [
+    {
+        title: 'Columns & Statuses',
+        href: '/settings/columns',
+    },
+];
+
+const updateColumnType = (column: Column, newType: 'todo' | 'in_progress' | 'done') => {
+    if (column.type === newType) return;
+
+    router.put(
+        `/columns/${column.id}`,
+        {
+            name: column.name,
+            type: newType,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                toast.success(`Column "${column.name}" category updated to "${newType === 'todo' ? 'To Do' : newType === 'done' ? 'Done' : 'In Progress'}"`);
+            },
+            onError: () => {
+                toast.error('Failed to update column category');
+            },
+        }
+    );
+};
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbItems">
+        <Head title="Columns & Statuses" />
+
+        <SettingsLayout>
+            <div class="space-y-6">
+                <HeadingSmall
+                    title="Columns & Statuses"
+                    description="Map your board columns to status categories (To Do, In Progress, Done) to manage workflow metrics."
+                />
+
+                <Card>
+                    <CardHeader>
+                        <CardTitle class="text-base">Status Category Mapping</CardTitle>
+                        <CardDescription>
+                            Status categories determine how tasks in each column are treated for reports, search queries, and dashboard overdue alerts.
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent class="divide-y divide-border">
+                        <div
+                            v-for="column in columns"
+                            :key="column.id"
+                            class="flex flex-col gap-4 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between"
+                        >
+                            <div>
+                                <span class="font-medium text-sm text-foreground">{{ column.name }}</span>
+                                <p class="text-xs text-muted-foreground mt-0.5">
+                                    Current Category: 
+                                    <span 
+                                        :class="[
+                                            'font-semibold inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] ml-1.5 uppercase tracking-wider',
+                                            {
+                                                'bg-muted text-muted-foreground border border-border': column.type === 'todo',
+                                                'bg-blue-500/10 text-blue-500 border border-blue-500/20': column.type === 'in_progress',
+                                                'bg-green-500/10 text-green-500 border border-green-500/20': column.type === 'done',
+                                            }
+                                        ]"
+                                    >
+                                        {{ column.type === 'todo' ? 'To Do' : column.type === 'done' ? 'Done' : 'In Progress' }}
+                                    </span>
+                                </p>
+                            </div>
+
+                            <div class="flex items-center gap-1.5 bg-muted/40 p-1.5 rounded-lg border w-fit">
+                                <button
+                                    @click="updateColumnType(column, 'todo')"
+                                    :class="[
+                                        'rounded-md px-3 py-1 text-xs font-medium transition-all',
+                                        column.type === 'todo'
+                                            ? 'bg-background shadow text-foreground'
+                                            : 'text-muted-foreground hover:text-foreground'
+                                    ]"
+                                >
+                                    To Do
+                                </button>
+                                <button
+                                    @click="updateColumnType(column, 'in_progress')"
+                                    :class="[
+                                        'rounded-md px-3 py-1 text-xs font-medium transition-all',
+                                        column.type === 'in_progress'
+                                            ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400 font-semibold border border-blue-500/20 shadow-xs'
+                                            : 'text-muted-foreground hover:text-foreground'
+                                    ]"
+                                >
+                                    In Progress
+                                </button>
+                                <button
+                                    @click="updateColumnType(column, 'done')"
+                                    :class="[
+                                        'rounded-md px-3 py-1 text-xs font-medium transition-all',
+                                        column.type === 'done'
+                                            ? 'bg-green-500/10 text-green-600 dark:text-green-400 font-semibold border border-green-500/20 shadow-xs'
+                                             : 'text-muted-foreground hover:text-foreground'
+                                    ]"
+                                >
+                                    Done
+                                </button>
+                            </div>
+                        </div>
+
+                        <div v-if="!columns.length" class="py-6 text-center text-sm text-muted-foreground">
+                            No columns created yet.
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <div class="flex items-start gap-2.5 rounded-lg border bg-accent/40 p-4">
+                    <Info class="size-4.5 text-blue-500 shrink-0 mt-0.5" />
+                    <p class="text-xs text-muted-foreground leading-relaxed">
+                        <strong>Task Completion:</strong> Any task placed in a column categorized as <span class="text-green-600 dark:text-green-400 font-semibold">Done</span> will automatically be marked as completed. It will no longer show up as overdue or require urgent attention on your Dashboard.
+                    </p>
+                </div>
+            </div>
+        </SettingsLayout>
+    </AppLayout>
+</template>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index af555de..be990a9 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -58,6 +58,11 @@ export interface Task {
     id: number;
     team_id: number;
     column_id: number | null;
+    column?: {
+        id: number;
+        name: string;
+        type: 'todo' | 'in_progress' | 'done';
+    };
     order: number;
     title: string;
     description?: string | null;
@@ -83,6 +88,7 @@ export interface Column {
     id: number;
     team_id: number;
     name: string;
+    type: 'todo' | 'in_progress' | 'done';
     order: number;
     tasks: Task[];
     pagination?: {
diff --git a/routes/settings.php b/routes/settings.php
index 09be3d1..50f9b38 100644
--- a/routes/settings.php
+++ b/routes/settings.php
@@ -3,6 +3,7 @@
 use App\Http\Controllers\TeamController;
 use App\Http\Controllers\Settings\PasswordController;
 use App\Http\Controllers\Settings\ProfileController;
+use App\Http\Controllers\Settings\ColumnSettingsController;
 use App\Http\Controllers\Settings\TwoFactorAuthenticationController;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
@@ -35,4 +36,7 @@
 
     Route::get('settings/two-factor', [TwoFactorAuthenticationController::class, 'show'])
         ->name('two-factor.show');
+
+    Route::get('settings/columns', [ColumnSettingsController::class, 'index'])
+        ->name('settings.columns.index');
 });
diff --git a/tests/Feature/Settings/ColumnSettingsTest.php b/tests/Feature/Settings/ColumnSettingsTest.php
new file mode 100644
index 0000000..4133498
--- /dev/null
+++ b/tests/Feature/Settings/ColumnSettingsTest.php
@@ -0,0 +1,59 @@
+<?php
+
+use App\Models\Column;
+use App\Models\Team;
+use App\Models\User;
+
+beforeEach(function () {
+    $this->team = Team::factory()->create();
+    $this->user = User::factory()->create(['team_id' => $this->team->id]);
+    $this->otherTeam = Team::factory()->create();
+});
+
+test('unauthenticated users cannot access column settings', function () {
+    $this->get('/settings/columns')
+        ->assertRedirect('/login');
+});
+
+test('authenticated users can access column settings and see their columns', function () {
+    $column = Column::create(['team_id' => $this->team->id, 'name' => 'To Do', 'type' => 'todo', 'order' => 0]);
+    $otherColumn = Column::create(['team_id' => $this->otherTeam->id, 'name' => 'Other To Do', 'type' => 'todo', 'order' => 0]);
+
+    $response = $this->actingAs($this->user)
+        ->get(route('settings.columns.index'));
+
+    $response->assertStatus(200);
+    
+    $response->assertInertia(fn ($page) => $page
+        ->component('settings/Columns')
+        ->has('columns', 1)
+        ->where('columns.0.id', $column->id)
+    );
+});
+
+test('can update column status category type', function () {
+    $column = Column::create(['team_id' => $this->team->id, 'name' => 'In Progress', 'type' => 'in_progress', 'order' => 0]);
+
+    $this->actingAs($this->user)
+        ->put(route('columns.update', $column), [
+            'name' => 'In Progress',
+            'type' => 'done',
+        ])
+        ->assertRedirect();
+
+    $this->assertDatabaseHas('columns', [
+        'id' => $column->id,
+        'type' => 'done',
+    ]);
+});
+
+test('cannot update type to an invalid value', function () {
+    $column = Column::create(['team_id' => $this->team->id, 'name' => 'In Progress', 'type' => 'in_progress', 'order' => 0]);
+
+    $this->actingAs($this->user)
+        ->put(route('columns.update', $column), [
+            'name' => 'In Progress',
+            'type' => 'invalid-type',
+        ])
+        ->assertSessionHasErrors(['type']);
+});