Merge pull request 'Implement project board status workflow' (#10) from codex/0.1-kanban-foundation/07-board-view-and-ticket-status-movement into main

Reviewed-on: OpenSource/KanbanGit#10

app/Actions/Tickets/CreateTicketWorklogEntry.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Actions\Tickets;
+
+use App\Models\Ticket;
+use App\Models\TicketWorklogEntry;
+use App\Models\User;
+
+class CreateTicketWorklogEntry
+{
+    /**
+     * @param  array<string, mixed>|null  $changes
+     */
+    public function handle(
+        Ticket $ticket,
+        ?User $actor,
+        string $entryType,
+        string $summary,
+        ?array $changes = null,
+    ): TicketWorklogEntry {
+        return $ticket->worklogEntries()->create([
+            'actor_id' => $actor?->id,
+            'changes' => $changes,
+            'entry_type' => $entryType,
+            'summary' => $summary,
+        ]);
+    }
+}

app/Http/Controllers/ProjectBacklogController.php

@@ -27,6 +27,8 @@ class ProjectBacklogController extends Controller
         );
 
         return Inertia::render('projects/Backlog', [
+            'boardColumns' => $project->boardColumns()->get(),
+            'canEditTickets' => $this->projectPermissionService->userHasPermission($request->user(), $project, 'edit'),
             'canCreateTickets' => $this->projectPermissionService->userHasPermission($request->user(), $project, 'create'),
             'project' => $project,
             'status' => session('status'),

app/Http/Controllers/ProjectBoardController.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\ProjectPermissions\ProjectPermissionService;
+use App\Actions\Tickets\CreateTicketWorklogEntry;
+use App\Http\Requests\MoveProjectTicketRequest;
+use App\Models\Project;
+use App\Models\Ticket;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class ProjectBoardController extends Controller
+{
+    public function __construct(
+        private readonly CreateTicketWorklogEntry $createTicketWorklogEntry,
+        private readonly ProjectPermissionService $projectPermissionService,
+    ) {}
+
+    public function index(Request $request, Project $project): Response
+    {
+        abort_unless(
+            $this->projectPermissionService->userCanViewProject($request->user(), $project),
+            403,
+        );
+
+        return Inertia::render('projects/Board', [
+            'boardColumns' => $project->boardColumns()
+                ->with([
+                    'tickets' => fn ($query) => $query
+                        ->with(['ticketPriority', 'ticketType']),
+                ])
+                ->get(),
+            'canEditTickets' => $this->projectPermissionService->userHasPermission($request->user(), $project, 'edit'),
+            'project' => $project,
+            'status' => session('status'),
+        ]);
+    }
+
+    public function move(
+        MoveProjectTicketRequest $request,
+        Project $project,
+        Ticket $ticket,
+    ): RedirectResponse {
+        abort_unless(
+            $this->projectPermissionService->userHasPermission($request->user(), $project, 'edit'),
+            403,
+        );
+
+        $destinationColumn = $project->boardColumns()
+            ->find($request->boardColumnId());
+
+        $originBoardColumnId = $ticket->board_column_id;
+        $originLabel = $ticket->boardColumn?->name ?? 'Backlog';
+        $destinationLabel = $destinationColumn?->name ?? 'Backlog';
+
+        if ($ticket->board_column_id === $request->boardColumnId()) {
+            return to_route($request->redirectRouteName(), $project)
+                ->with('status', "{$ticket->ticket_key} already belongs to {$destinationLabel}.");
+        }
+
+        $ticket->update([
+            'board_column_id' => $destinationColumn?->id,
+        ]);
+
+        $this->createTicketWorklogEntry->handle(
+            $ticket->fresh(),
+            $request->user(),
+            'status_changed',
+            "Moved from {$originLabel} to {$destinationLabel}.",
+            [
+                'from' => [
+                    'board_column_id' => $originBoardColumnId,
+                    'label' => $originLabel,
+                ],
+                'to' => [
+                    'board_column_id' => $destinationColumn?->id,
+                    'label' => $destinationLabel,
+                ],
+            ],
+        );
+
+        return to_route($request->redirectRouteName(), $project)
+            ->with('status', "{$ticket->ticket_key} moved to {$destinationLabel}.");
+    }
+}

app/Http/Requests/MoveProjectTicketRequest.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Models\Project;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class MoveProjectTicketRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return $this->user() !== null;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        /** @var Project $project */
+        $project = $this->route('project');
+
+        return [
+            'board_column_id' => [
+                'nullable',
+                'integer',
+                Rule::exists('board_columns', 'id')->where('project_id', $project->id),
+            ],
+            'redirect_to' => ['required', 'string', Rule::in(['backlog', 'board'])],
+        ];
+    }
+
+    public function boardColumnId(): ?int
+    {
+        $boardColumnId = $this->validated('board_column_id');
+
+        if ($boardColumnId === null || $boardColumnId === '') {
+            return null;
+        }
+
+        return (int) $boardColumnId;
+    }
+
+    public function redirectRouteName(): string
+    {
+        return $this->validated('redirect_to') === 'backlog'
+            ? 'projects.backlog.index'
+            : 'projects.board.index';
+    }
+}

app/Models/BoardColumn.php

@@ -7,6 +7,7 @@ use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 #[Fillable(['name', 'position', 'project_id'])]
 class BoardColumn extends Model
@@ -18,4 +19,10 @@ class BoardColumn extends Model
     {
         return $this->belongsTo(Project::class);
     }
+
+    public function tickets(): HasMany
+    {
+        return $this->hasMany(Ticket::class)
+            ->orderByDesc('sequence_number');
+    }
 }

app/Models/Ticket.php

@@ -7,6 +7,7 @@ use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 
 #[Fillable([
     'acceptance_criteria',
@@ -43,4 +44,11 @@ class Ticket extends Model
     {
         return $this->belongsTo(TicketType::class);
     }
+
+    public function worklogEntries(): HasMany
+    {
+        return $this->hasMany(TicketWorklogEntry::class)
+            ->orderByDesc('created_at')
+            ->orderByDesc('id');
+    }
 }

app/Models/TicketWorklogEntry.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use Database\Factories\TicketWorklogEntryFactory;
+use Illuminate\Database\Eloquent\Attributes\Fillable;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+#[Fillable([
+    'actor_id',
+    'changes',
+    'entry_type',
+    'summary',
+    'ticket_id',
+])]
+class TicketWorklogEntry extends Model
+{
+    /** @use HasFactory<TicketWorklogEntryFactory> */
+    use HasFactory;
+
+    /**
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'changes' => 'array',
+        ];
+    }
+
+    public function actor(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'actor_id');
+    }
+
+    public function ticket(): BelongsTo
+    {
+        return $this->belongsTo(Ticket::class);
+    }
+}

database/factories/TicketWorklogEntryFactory.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Ticket;
+use App\Models\TicketWorklogEntry;
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends Factory<TicketWorklogEntry>
+ */
+class TicketWorklogEntryFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'actor_id' => User::factory(),
+            'changes' => [
+                'from' => 'Backlog',
+                'to' => 'In Progress',
+            ],
+            'entry_type' => 'status_changed',
+            'summary' => 'Moved from Backlog to In Progress.',
+            'ticket_id' => Ticket::factory(),
+        ];
+    }
+}

database/migrations/2026_03_25_065302_create_ticket_worklog_entries_table.php

@@ -0,0 +1,32 @@
+<?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::create('ticket_worklog_entries', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('ticket_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('actor_id')->nullable()->constrained('users')->nullOnDelete();
+            $table->string('entry_type');
+            $table->text('summary');
+            $table->json('changes')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('ticket_worklog_entries');
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -18,6 +18,7 @@ class DatabaseSeeder extends Seeder
             BoardColumnSeeder::class,
             ProjectTicketMetadataSeeder::class,
             TicketSeeder::class,
+            TicketWorklogEntrySeeder::class,
             TeamSeeder::class,
             ProjectAccessSeeder::class,
         ]);

database/seeders/TicketWorklogEntrySeeder.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Ticket;
+use App\Models\TicketWorklogEntry;
+use App\Models\User;
+use Illuminate\Database\Seeder;
+
+class TicketWorklogEntrySeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        $defaultActor = User::query()->orderBy('id')->first();
+
+        Ticket::query()
+            ->orderBy('id')
+            ->get()
+            ->each(function (Ticket $ticket) use ($defaultActor): void {
+                TicketWorklogEntry::factory()->create([
+                    'actor_id' => $defaultActor?->id,
+                    'changes' => [
+                        'from' => null,
+                        'to' => 'Backlog',
+                    ],
+                    'entry_type' => 'created',
+                    'summary' => 'Ticket was created in Backlog.',
+                    'ticket_id' => $ticket->id,
+                ]);
+            });
+    }
+}

resources/js/pages/projects/Backlog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Form, Head, Link } from '@inertiajs/vue3';
 import ProjectBacklogController from '@/actions/App/Http/Controllers/ProjectBacklogController';
+import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
 import { Badge } from '@/components/ui/badge';
@@ -15,6 +16,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
+import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index, show } from '@/routes/projects';
 import { metadata as metadataSettings } from '@/routes/projects/settings';
@@ -59,9 +61,15 @@ const hasTicketMetadata =
                     />
                 </div>
 
-                <Button as-child variant="outline">
+                <div class="flex flex-wrap gap-3">
-                    <Link :href="show(project.id)">Back to project</Link>
+                    <Button as-child variant="outline">
-                </Button>
+                        <Link :href="boardIndex(project.id)">Open board</Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
+                </div>
             </div>
 
             <div
@@ -222,6 +230,12 @@ const hasTicketMetadata =
                                     <th class="px-4 py-3 font-medium">
                                         Priority
                                     </th>
+                                    <th
+                                        v-if="canEditTickets"
+                                        class="px-4 py-3 font-medium"
+                                    >
+                                        Move to board
+                                    </th>
                                 </tr>
                             </thead>
                             <tbody class="divide-y divide-border">
@@ -254,6 +268,53 @@ const hasTicketMetadata =
                                     <td class="px-4 py-4 text-muted-foreground">
                                         {{ ticket.ticket_priority.name }}
                                     </td>
+                                    <td v-if="canEditTickets" class="px-4 py-4">
+                                        <Form
+                                            v-if="boardColumns.length > 0"
+                                            v-bind="
+                                                ProjectBoardController.move.form(
+                                                    {
+                                                        project: project.id,
+                                                        ticket: ticket.id,
+                                                    },
+                                                )
+                                            "
+                                            class="flex flex-col gap-2 sm:flex-row"
+                                            v-slot="{ processing }"
+                                        >
+                                            <input
+                                                type="hidden"
+                                                name="redirect_to"
+                                                value="backlog"
+                                            />
+                                            <select
+                                                name="board_column_id"
+                                                class="min-w-44 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                                            >
+                                                <option
+                                                    v-for="boardColumn in boardColumns"
+                                                    :key="boardColumn.id"
+                                                    :value="boardColumn.id"
+                                                >
+                                                    {{ boardColumn.name }}
+                                                </option>
+                                            </select>
+                                            <Button
+                                                type="submit"
+                                                size="sm"
+                                                :disabled="processing"
+                                            >
+                                                Move
+                                            </Button>
+                                        </Form>
+
+                                        <span
+                                            v-else
+                                            class="text-sm text-muted-foreground"
+                                        >
+                                            Add board columns first.
+                                        </span>
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>

resources/js/pages/projects/Board.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { Form, Head, Link } from '@inertiajs/vue3';
+import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
+import Heading from '@/components/Heading.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { index as backlogIndex } from '@/routes/projects/backlog';
+import { index as projectIndex, show } from '@/routes/projects';
+import { board as boardSettings } from '@/routes/projects/settings';
+import { index as boardIndex } from '@/routes/projects/board';
+import type { BreadcrumbItem, ProjectBoardPageProps } from '@/types';
+
+const props = defineProps<ProjectBoardPageProps>();
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: projectIndex(),
+    },
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Board',
+        href: boardIndex(props.project.id),
+    },
+];
+
+const statusOptions = [
+    {
+        label: 'Backlog',
+        value: '',
+    },
+    ...props.boardColumns.map((boardColumn) => ({
+        label: boardColumn.name,
+        value: String(boardColumn.id),
+    })),
+];
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <Head :title="`${project.name} board`" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
+                        {{ project.key }}
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} board`"
+                        description="Tickets only appear here once they are assigned to one of the project's workflow columns."
+                    />
+                </div>
+
+                <div class="flex flex-wrap gap-3">
+                    <Button as-child variant="outline">
+                        <Link :href="backlogIndex(project.id)"
+                            >Open backlog</Link
+                        >
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
+                </div>
+            </div>
+
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+            >
+                {{ status }}
+            </div>
+
+            <Card v-if="boardColumns.length === 0">
+                <CardContent class="flex flex-col gap-4 p-6 text-sm">
+                    <p class="text-muted-foreground">
+                        The board has no workflow columns yet, so no tickets can
+                        appear here.
+                    </p>
+                    <div v-if="canEditTickets">
+                        <Button as-child variant="outline">
+                            <Link :href="boardSettings(project.id)">
+                                Open board settings
+                            </Link>
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <div v-else class="grid gap-4 xl:grid-cols-3">
+                <Card
+                    v-for="boardColumn in boardColumns"
+                    :key="boardColumn.id"
+                    class="flex h-full flex-col gap-0 overflow-hidden"
+                >
+                    <CardHeader class="border-b bg-muted/20">
+                        <div class="flex items-start justify-between gap-3">
+                            <div>
+                                <CardTitle>{{ boardColumn.name }}</CardTitle>
+                                <CardDescription>
+                                    {{ boardColumn.tickets?.length ?? 0 }}
+                                    active ticket(s)
+                                </CardDescription>
+                            </div>
+
+                            <Badge variant="secondary">
+                                #{{ boardColumn.position }}
+                            </Badge>
+                        </div>
+                    </CardHeader>
+
+                    <CardContent class="flex flex-1 flex-col gap-4 p-4">
+                        <div
+                            v-if="(boardColumn.tickets?.length ?? 0) === 0"
+                            class="rounded-xl border border-dashed border-border px-4 py-6 text-sm text-muted-foreground"
+                        >
+                            No tickets are currently in this column.
+                        </div>
+
+                        <div v-else class="flex flex-col gap-4">
+                            <Card
+                                v-for="ticket in boardColumn.tickets"
+                                :key="ticket.id"
+                                class="gap-0"
+                            >
+                                <CardHeader class="pb-4">
+                                    <div class="flex flex-wrap gap-2">
+                                        <Badge variant="outline">
+                                            {{ ticket.ticket_key }}
+                                        </Badge>
+                                        <Badge variant="secondary">
+                                            {{ ticket.ticket_type.name }}
+                                        </Badge>
+                                        <Badge variant="secondary">
+                                            {{ ticket.ticket_priority.name }}
+                                        </Badge>
+                                    </div>
+                                    <CardTitle class="text-base">
+                                        {{ ticket.title }}
+                                    </CardTitle>
+                                    <CardDescription
+                                        v-if="ticket.description"
+                                        class="line-clamp-3"
+                                    >
+                                        {{ ticket.description }}
+                                    </CardDescription>
+                                </CardHeader>
+
+                                <CardContent v-if="canEditTickets" class="pt-0">
+                                    <Form
+                                        v-bind="
+                                            ProjectBoardController.move.form({
+                                                project: project.id,
+                                                ticket: ticket.id,
+                                            })
+                                        "
+                                        class="flex flex-col gap-2"
+                                        v-slot="{ processing }"
+                                    >
+                                        <input
+                                            type="hidden"
+                                            name="redirect_to"
+                                            value="board"
+                                        />
+                                        <label
+                                            :for="`ticket-status-${ticket.id}`"
+                                            class="text-xs font-medium tracking-wide text-muted-foreground uppercase"
+                                        >
+                                            Move ticket
+                                        </label>
+                                        <div
+                                            class="flex flex-col gap-2 sm:flex-row"
+                                        >
+                                            <select
+                                                :id="`ticket-status-${ticket.id}`"
+                                                name="board_column_id"
+                                                :value="
+                                                    ticket.board_column_id ?? ''
+                                                "
+                                                class="min-w-44 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                                            >
+                                                <option
+                                                    v-for="statusOption in statusOptions"
+                                                    :key="statusOption.label"
+                                                    :value="statusOption.value"
+                                                >
+                                                    {{ statusOption.label }}
+                                                </option>
+                                            </select>
+                                            <Button
+                                                type="submit"
+                                                size="sm"
+                                                :disabled="processing"
+                                            >
+                                                Update status
+                                            </Button>
+                                        </div>
+                                    </Form>
+                                </CardContent>
+                            </Card>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/projects/Show.vue

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { access, index, show } from '@/routes/projects';
+import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import {
     board as boardSettings,
@@ -37,19 +38,19 @@ const projectAreas = [
     {
         title: 'Backlog',
         description:
-            'This area will receive new tickets first and act as the intake queue for project work.',
+            'Create tickets, review incoming work, and move ready items into the board workflow.',
         icon: ListTodo,
     },
     {
         title: 'Board',
         description:
-            'This area will become the configurable Kanban board with project-specific columns.',
+            'Track active work across the project-defined Kanban columns and update ticket status.',
         icon: LayoutGrid,
     },
     {
         title: 'Project settings',
         description:
-            'This area will host project-level configuration such as ticket metadata and workflow options.',
+            'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
         icon: Settings2,
     },
 ];
@@ -74,6 +75,10 @@ const projectAreas = [
                 </div>
 
                 <div class="flex flex-wrap gap-3">
+                    <Button as-child variant="outline">
+                        <Link :href="boardIndex(project.id)">Open board</Link>
+                    </Button>
+
                     <Button as-child variant="outline">
                         <Link :href="backlogIndex(project.id)">
                             Open backlog
@@ -122,7 +127,7 @@ const projectAreas = [
                         }}</CardDescription>
                     </CardHeader>
                     <CardContent class="text-sm text-muted-foreground">
-                        Coming next in the project workflow implementation.
+                        Use the project shortcuts above to open this area.
                     </CardContent>
                 </Card>
             </div>

resources/js/types/models/board-column-model.ts

@@ -1,8 +1,11 @@
+import type { TicketModel } from '@/types/models/ticket-model';
+
 export type BoardColumnModel = {
     id: number;
     name: string;
     position: number;
     project_id: number;
+    tickets?: TicketModel[];
     created_at: string;
     updated_at: string;
 };

resources/js/types/page-props.ts

@@ -48,6 +48,13 @@ export type ProjectBoardSettingsPageProps = {
     status?: string | null;
 };
 
+export type ProjectBoardPageProps = {
+    boardColumns: BoardColumnModel[];
+    canEditTickets: boolean;
+    project: ProjectModel;
+    status?: string | null;
+};
+
 export type TicketFieldTypeOption = {
     label: string;
     value: string;
@@ -63,7 +70,9 @@ export type ProjectTicketMetadataSettingsPageProps = {
 };
 
 export type ProjectBacklogPageProps = {
+    boardColumns: BoardColumnModel[];
     canCreateTickets: boolean;
+    canEditTickets: boolean;
     project: ProjectModel;
     status?: string | null;
     ticketPriorities: TicketPriorityModel[];

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\Admin\UserManagementController;
 use App\Http\Controllers\ProjectBacklogController;
+use App\Http\Controllers\ProjectBoardController;
 use App\Http\Controllers\ProjectBoardSettingsController;
 use App\Http\Controllers\ProjectController;
 use App\Http\Controllers\ProjectTicketMetadataSettingsController;
@@ -31,6 +32,10 @@ Route::middleware(['auth', 'verified'])->group(function () {
         ->name('projects.backlog.store');
 
     Route::scopeBindings()->group(function (): void {
+        Route::get('projects/{project}/board', [ProjectBoardController::class, 'index'])
+            ->name('projects.board.index');
+        Route::patch('projects/{project}/tickets/{ticket}/status', [ProjectBoardController::class, 'move'])
+            ->name('projects.tickets.status.update');
         Route::get('projects/{project}/settings/board', [ProjectBoardSettingsController::class, 'show'])
             ->name('projects.settings.board');
         Route::post('projects/{project}/settings/board/columns', [ProjectBoardSettingsController::class, 'store'])

tests/Feature/Models/BoardColumnTest.php

@@ -2,8 +2,11 @@
 
 namespace Tests\Feature\Models;
 
+use App\Actions\ProjectTicketMetadata\InitializeProjectTicketMetadata;
 use App\Models\BoardColumn;
 use App\Models\Project;
+use App\Models\Ticket;
+use App\Models\TicketPriority;
 use Database\Seeders\BoardColumnSeeder;
 use Database\Seeders\ProjectSeeder;
 use Illuminate\Foundation\Testing\RefreshDatabase;
@@ -50,6 +53,52 @@ class BoardColumnTest extends TestCase
         );
     }
 
+    /**
+     * Ensure board columns expose tickets ordered by descending sequence number.
+     */
+    public function test_board_column_tickets_are_returned_in_sequence_order(): void
+    {
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'Medium',
+            'position' => 1,
+        ]);
+
+        $boardColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Doing',
+            'position' => 1,
+        ]);
+
+        Ticket::factory()->create([
+            'board_column_id' => $boardColumn->id,
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'First ticket',
+        ]);
+        Ticket::factory()->create([
+            'board_column_id' => $boardColumn->id,
+            'project_id' => $project->id,
+            'sequence_number' => 2,
+            'ticket_key' => 'CORE-2',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Second ticket',
+        ]);
+
+        $this->assertSame(
+            ['CORE-2', 'CORE-1'],
+            $boardColumn->fresh()->tickets->pluck('ticket_key')->all(),
+        );
+    }
+
     /**
      * Ensure the board column seeder creates starter workflow columns for seeded projects.
      */

tests/Feature/Models/TicketTest.php

@@ -4,6 +4,7 @@ namespace Tests\Feature\Models;
 
 use App\Models\Project;
 use App\Models\Ticket;
+use App\Models\TicketWorklogEntry;
 use Database\Seeders\BoardColumnSeeder;
 use Database\Seeders\ProjectSeeder;
 use Database\Seeders\ProjectTicketMetadataSeeder;
@@ -55,4 +56,26 @@ class TicketTest extends TestCase
             'board_column_id' => null,
         ]);
     }
+
+    /**
+     * Ensure ticket worklog entries are exposed newest first for timeline rendering.
+     */
+    public function test_ticket_worklog_entries_are_returned_newest_first(): void
+    {
+        $ticket = Ticket::factory()->create();
+
+        $olderEntry = TicketWorklogEntry::factory()->for($ticket)->create([
+            'created_at' => now()->subMinute(),
+            'updated_at' => now()->subMinute(),
+        ]);
+        $newerEntry = TicketWorklogEntry::factory()->for($ticket)->create([
+            'created_at' => now(),
+            'updated_at' => now(),
+        ]);
+
+        $this->assertSame(
+            [$newerEntry->id, $olderEntry->id],
+            $ticket->fresh()->worklogEntries->modelKeys(),
+        );
+    }
 }

tests/Feature/Models/TicketWorklogEntryTest.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Tests\Feature\Models;
+
+use App\Models\TicketWorklogEntry;
+use Database\Seeders\BoardColumnSeeder;
+use Database\Seeders\ProjectSeeder;
+use Database\Seeders\ProjectTicketMetadataSeeder;
+use Database\Seeders\TicketSeeder;
+use Database\Seeders\TicketWorklogEntrySeeder;
+use Database\Seeders\UserSeeder;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class TicketWorklogEntryTest extends TestCase
+{
+    use RefreshDatabase;
+
+    /**
+     * Ensure the worklog factory creates related tickets and actors.
+     */
+    public function test_ticket_worklog_entry_factory_creates_related_models(): void
+    {
+        $entry = TicketWorklogEntry::factory()->create();
+
+        $this->assertNotNull($entry->ticket);
+        $this->assertNotNull($entry->actor);
+        $this->assertSame('status_changed', $entry->entry_type);
+    }
+
+    /**
+     * Ensure the worklog seeder creates an initial entry for each seeded ticket.
+     */
+    public function test_ticket_worklog_entry_seeder_creates_entries_for_seeded_tickets(): void
+    {
+        $this->seed([
+            UserSeeder::class,
+            ProjectSeeder::class,
+            BoardColumnSeeder::class,
+            ProjectTicketMetadataSeeder::class,
+            TicketSeeder::class,
+            TicketWorklogEntrySeeder::class,
+        ]);
+
+        $this->assertDatabaseHas('ticket_worklog_entries', [
+            'entry_type' => 'created',
+            'summary' => 'Ticket was created in Backlog.',
+        ]);
+
+        $this->assertSame(6, TicketWorklogEntry::query()->count());
+    }
+}

tests/Feature/Projects/ProjectBacklogControllerTest.php

@@ -4,6 +4,7 @@ namespace Tests\Feature\Projects;
 
 use App\Actions\ProjectPermissions\ProjectPermissionService;
 use App\Actions\ProjectTicketMetadata\InitializeProjectTicketMetadata;
+use App\Models\BoardColumn;
 use App\Models\Project;
 use App\Models\Ticket;
 use App\Models\TicketPriority;
@@ -27,6 +28,10 @@ class ProjectBacklogControllerTest extends TestCase
         ]);
 
         app(InitializeProjectTicketMetadata::class)->handle($project);
+        BoardColumn::factory()->for($project)->create([
+            'name' => 'Todo',
+            'position' => 1,
+        ]);
 
         $priority = TicketPriority::factory()->for($project)->create([
             'name' => 'Medium',
@@ -49,6 +54,8 @@ class ProjectBacklogControllerTest extends TestCase
             ->assertOk()
             ->assertInertia(fn (Assert $page) => $page
                 ->component('projects/Backlog')
+                ->where('boardColumns.0.name', 'Todo')
+                ->where('canEditTickets', false)
                 ->where('project.id', $project->id)
                 ->where('tickets.0.ticket_key', $ticket->ticket_key)
                 ->where('canCreateTickets', false),

tests/Feature/Projects/ProjectBoardControllerTest.php

@@ -0,0 +1,301 @@
+<?php
+
+namespace Tests\Feature\Projects;
+
+use App\Actions\ProjectPermissions\ProjectPermissionService;
+use App\Actions\ProjectTicketMetadata\InitializeProjectTicketMetadata;
+use App\Models\BoardColumn;
+use App\Models\Project;
+use App\Models\Ticket;
+use App\Models\TicketPriority;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Inertia\Testing\AssertableInertia as Assert;
+use Tests\TestCase;
+
+class ProjectBoardControllerTest extends TestCase
+{
+    use RefreshDatabase;
+
+    /**
+     * Ensure users with view permission can open the board and only see board tickets.
+     */
+    public function test_users_with_view_permission_can_view_a_projects_board(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $todoColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Todo',
+            'position' => 1,
+        ]);
+        $doingColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Doing',
+            'position' => 2,
+        ]);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'High',
+            'position' => 1,
+        ]);
+
+        Ticket::factory()->create([
+            'board_column_id' => null,
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Backlog ticket',
+        ]);
+
+        $boardTicket = Ticket::factory()->create([
+            'board_column_id' => $doingColumn->id,
+            'project_id' => $project->id,
+            'sequence_number' => 2,
+            'ticket_key' => 'CORE-2',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Board ticket',
+        ]);
+
+        app(ProjectPermissionService::class)->syncUserPermissions($project, $user, ['view']);
+
+        $this->actingAs($user)
+            ->get(route('projects.board.index', $project))
+            ->assertOk()
+            ->assertInertia(fn (Assert $page) => $page
+                ->component('projects/Board')
+                ->where('project.id', $project->id)
+                ->where('boardColumns.0.name', $todoColumn->name)
+                ->has('boardColumns.0.tickets', 0)
+                ->where('boardColumns.1.name', $doingColumn->name)
+                ->has('boardColumns.1.tickets', 1)
+                ->where('boardColumns.1.tickets.0.ticket_key', $boardTicket->ticket_key)
+                ->where('boardColumns.1.tickets.0.title', $boardTicket->title)
+                ->where('canEditTickets', false),
+            );
+    }
+
+    /**
+     * Ensure moving backlog tickets into a board column requires edit permission and logs the change.
+     */
+    public function test_users_with_edit_permission_can_move_backlog_tickets_to_a_board_column(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $todoColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Todo',
+            'position' => 1,
+        ]);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'High',
+            'position' => 1,
+        ]);
+
+        $ticket = Ticket::factory()->create([
+            'board_column_id' => null,
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Backlog ticket',
+        ]);
+
+        app(ProjectPermissionService::class)->syncUserPermissions($project, $user, ['edit', 'view']);
+
+        $this->actingAs($user)
+            ->patch(route('projects.tickets.status.update', [$project, $ticket]), [
+                'board_column_id' => $todoColumn->id,
+                'redirect_to' => 'backlog',
+            ])
+            ->assertRedirect(route('projects.backlog.index', $project))
+            ->assertSessionHas('status', 'CORE-1 moved to Todo.');
+
+        $this->assertDatabaseHas('tickets', [
+            'id' => $ticket->id,
+            'board_column_id' => $todoColumn->id,
+        ]);
+
+        $this->assertDatabaseHas('ticket_worklog_entries', [
+            'ticket_id' => $ticket->id,
+            'actor_id' => $user->id,
+            'entry_type' => 'status_changed',
+            'summary' => 'Moved from Backlog to Todo.',
+        ]);
+    }
+
+    /**
+     * Ensure board tickets can move between columns.
+     */
+    public function test_users_with_edit_permission_can_move_board_tickets_between_columns(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $todoColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Todo',
+            'position' => 1,
+        ]);
+        $doneColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Done',
+            'position' => 2,
+        ]);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'High',
+            'position' => 1,
+        ]);
+
+        $ticket = Ticket::factory()->create([
+            'board_column_id' => $todoColumn->id,
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Board ticket',
+        ]);
+
+        app(ProjectPermissionService::class)->syncUserPermissions($project, $user, ['edit', 'view']);
+
+        $this->actingAs($user)
+            ->patch(route('projects.tickets.status.update', [$project, $ticket]), [
+                'board_column_id' => $doneColumn->id,
+                'redirect_to' => 'board',
+            ])
+            ->assertRedirect(route('projects.board.index', $project))
+            ->assertSessionHas('status', 'CORE-1 moved to Done.');
+
+        $this->assertDatabaseHas('tickets', [
+            'id' => $ticket->id,
+            'board_column_id' => $doneColumn->id,
+        ]);
+
+        $this->assertDatabaseHas('ticket_worklog_entries', [
+            'ticket_id' => $ticket->id,
+            'actor_id' => $user->id,
+            'entry_type' => 'status_changed',
+            'summary' => 'Moved from Todo to Done.',
+        ]);
+    }
+
+    /**
+     * Ensure moving a board ticket back to backlog removes it from the board columns.
+     */
+    public function test_users_with_edit_permission_can_move_board_tickets_back_to_backlog(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create([
+            'key' => 'CORE',
+        ]);
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+
+        $doingColumn = BoardColumn::factory()->for($project)->create([
+            'name' => 'Doing',
+            'position' => 1,
+        ]);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'High',
+            'position' => 1,
+        ]);
+
+        $ticket = Ticket::factory()->create([
+            'board_column_id' => $doingColumn->id,
+            'project_id' => $project->id,
+            'sequence_number' => 1,
+            'ticket_key' => 'CORE-1',
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+            'title' => 'Board ticket',
+        ]);
+
+        app(ProjectPermissionService::class)->syncUserPermissions($project, $user, ['edit', 'view']);
+
+        $this->actingAs($user)
+            ->patch(route('projects.tickets.status.update', [$project, $ticket]), [
+                'board_column_id' => null,
+                'redirect_to' => 'board',
+            ])
+            ->assertRedirect(route('projects.board.index', $project))
+            ->assertSessionHas('status', 'CORE-1 moved to Backlog.');
+
+        $this->assertDatabaseHas('tickets', [
+            'id' => $ticket->id,
+            'board_column_id' => null,
+        ]);
+
+        $this->actingAs($user)
+            ->get(route('projects.board.index', $project))
+            ->assertOk()
+            ->assertInertia(fn (Assert $page) => $page
+                ->where('boardColumns.0.name', $doingColumn->name)
+                ->has('boardColumns.0.tickets', 0),
+            );
+    }
+
+    /**
+     * Ensure cross-project board column moves are rejected.
+     */
+    public function test_status_moves_to_columns_from_other_projects_are_rejected(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create();
+        $otherProject = Project::factory()->create();
+
+        app(InitializeProjectTicketMetadata::class)->handle($project);
+        app(InitializeProjectTicketMetadata::class)->handle($otherProject);
+
+        $otherProjectColumn = BoardColumn::factory()->for($otherProject)->create([
+            'name' => 'Foreign',
+            'position' => 1,
+        ]);
+
+        $priority = TicketPriority::factory()->for($project)->create([
+            'name' => 'High',
+            'position' => 1,
+        ]);
+
+        $ticket = Ticket::factory()->create([
+            'board_column_id' => null,
+            'project_id' => $project->id,
+            'ticket_priority_id' => $priority->id,
+            'ticket_type_id' => $project->ticketTypes()->firstOrFail()->id,
+        ]);
+
+        app(ProjectPermissionService::class)->syncUserPermissions($project, $user, ['edit', 'view']);
+
+        $this->actingAs($user)
+            ->from(route('projects.backlog.index', $project))
+            ->patch(route('projects.tickets.status.update', [$project, $ticket]), [
+                'board_column_id' => $otherProjectColumn->id,
+                'redirect_to' => 'backlog',
+            ])
+            ->assertRedirect(route('projects.backlog.index', $project))
+            ->assertSessionHasErrors('board_column_id');
+
+        $this->assertDatabaseHas('tickets', [
+            'id' => $ticket->id,
+            'board_column_id' => null,
+        ]);
+
+        $this->assertDatabaseCount('ticket_worklog_entries', 0);
+    }
+}