@flusys/ng-task-manager 5.3.0

package/fesm2022/flusys-ng-task-manager.mjs

@@ -0,0 +1,3771 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, DestroyRef, computed, input, output, Component, model, effect, untracked } from '@angular/core';
+import { ApiResourceService, TranslatePipe, AngularModule, PrimeModule, TranslateService, UserSelectComponent, resolveTranslationModule, SHARED_MESSAGES } from '@flusys/ng-shared';
+import { firstValueFrom, Subject } from 'rxjs';
+import { io } from 'socket.io-client';
+import { APP_CONFIG } from '@flusys/ng-core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i9$1 from '@angular/common';
+import { DatePipe } from '@angular/common';
+import * as i1 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
+import * as i2 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i9 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i7 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
+import * as i1$1 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i4 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i8 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i5 from 'primeng/textarea';
+import { TextareaModule } from 'primeng/textarea';
+import * as i6 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import * as i2$1 from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import * as i1$2 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { Router } from '@angular/router';
+import * as i6$1 from 'primeng/skeleton';
+import * as i1$3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i9$2 from 'primeng/table';
+
+class TaskBoardApiService extends ApiResourceService {
+    constructor() {
+        super('board', 'taskManager');
+    }
+    getMembers(boardId) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/get-members`, { boardId }));
+    }
+    addMember(boardId, userId, role = 'MEMBER') {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/add-member`, { boardId, userId, role }));
+    }
+    removeMember(boardId, userId) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/remove-member`, {
+            boardId,
+            userId,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TaskApiService extends ApiResourceService {
+    constructor() {
+        super('task', 'taskManager');
+    }
+    moveTask(dto) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/move`, dto));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+class TaskListApiService extends ApiResourceService {
+    constructor() {
+        super('list', 'taskManager');
+    }
+    updateList(dto) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/update`, dto));
+    }
+    reorderLists(dto) {
+        return firstValueFrom(this.http.post(`${this.baseUrl}/reorder`, dto));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskListApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+class TaskLabelApiService extends ApiResourceService {
+    constructor() {
+        super('label', 'taskManager');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskLabelApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+class TaskCommentApiService extends ApiResourceService {
+    constructor() {
+        super('comment', 'taskManager');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCommentApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TaskBoardSocketService {
+    socket = null;
+    appConfig = inject(APP_CONFIG);
+    _isConnected = signal(false, ...(ngDevMode ? [{ debugName: "_isConnected" }] : []));
+    isConnected = this._isConnected.asReadonly();
+    boardEvent$ = new Subject();
+    onBoardEvent = this.boardEvent$.asObservable();
+    connect(accessToken) {
+        if (this.socket?.connected)
+            return;
+        const baseUrl = this.getBaseUrl();
+        this.socket = io(`${baseUrl}/task-boards`, {
+            auth: { token: accessToken },
+            transports: ['websocket', 'polling'],
+            reconnection: true,
+            reconnectionAttempts: 5,
+            reconnectionDelay: 1000,
+        });
+        this.socket.on('connect', () => this._isConnected.set(true));
+        this.socket.on('disconnect', (reason) => {
+            this._isConnected.set(false);
+            if (reason === 'io server disconnect')
+                this.socket?.connect();
+        });
+        this.socket.on('connect_error', () => this._isConnected.set(false));
+        this.socket.on('board:event', (event) => this.boardEvent$.next(event));
+    }
+    joinBoard(boardId) {
+        this.socket?.emit('board:join', { boardId });
+    }
+    leaveBoard(boardId) {
+        this.socket?.emit('board:leave', { boardId });
+    }
+    disconnect() {
+        this.socket?.disconnect();
+        this.socket = null;
+        this._isConnected.set(false);
+    }
+    getBaseUrl() {
+        const services = this.appConfig.services;
+        return services?.['taskManager']?.socketUrl ?? this.appConfig.apiBaseUrl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardSocketService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TaskBoardStateService {
+    boardApi = inject(TaskBoardApiService);
+    taskApi = inject(TaskApiService);
+    listApi = inject(TaskListApiService);
+    labelApi = inject(TaskLabelApiService);
+    socketService = inject(TaskBoardSocketService);
+    destroyRef = inject(DestroyRef);
+    _boards = signal([], ...(ngDevMode ? [{ debugName: "_boards" }] : []));
+    _activeBoard = signal(null, ...(ngDevMode ? [{ debugName: "_activeBoard" }] : []));
+    _lists = signal([], ...(ngDevMode ? [{ debugName: "_lists" }] : []));
+    _tasks = signal([], ...(ngDevMode ? [{ debugName: "_tasks" }] : []));
+    _labels = signal([], ...(ngDevMode ? [{ debugName: "_labels" }] : []));
+    _members = signal([], ...(ngDevMode ? [{ debugName: "_members" }] : []));
+    _selectedTask = signal(null, ...(ngDevMode ? [{ debugName: "_selectedTask" }] : []));
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _isBoardLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isBoardLoading" }] : []));
+    boards = this._boards.asReadonly();
+    activeBoard = this._activeBoard.asReadonly();
+    lists = this._lists.asReadonly();
+    tasks = this._tasks.asReadonly();
+    labels = this._labels.asReadonly();
+    members = this._members.asReadonly();
+    selectedTask = this._selectedTask.asReadonly();
+    isLoading = this._isLoading.asReadonly();
+    isBoardLoading = this._isBoardLoading.asReadonly();
+    tasksByList = computed(() => {
+        const map = new Map();
+        for (const task of this._tasks()) {
+            const list = map.get(task.listId) ?? [];
+            list.push(task);
+            map.set(task.listId, list);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "tasksByList" }] : []));
+    listsWithTasks = computed(() => this._lists()
+        .slice()
+        .sort((a, b) => a.position - b.position)
+        .map((list) => ({
+        ...list,
+        tasks: (this.tasksByList().get(list.id) ?? []).slice().sort((a, b) => a.position - b.position),
+    })), ...(ngDevMode ? [{ debugName: "listsWithTasks" }] : []));
+    hasActiveBoard = computed(() => this._activeBoard() !== null, ...(ngDevMode ? [{ debugName: "hasActiveBoard" }] : []));
+    isSocketConnected = this.socketService.isConnected;
+    constructor() {
+        this.socketService.onBoardEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => this.handleBoardEvent(event));
+    }
+    async loadBoards() {
+        this._isLoading.set(true);
+        try {
+            const res = await this.boardApi.getAll({ sort: { createdAt: 'DESC' } });
+            this._boards.set(res.data ?? []);
+        }
+        finally {
+            this._isLoading.set(false);
+        }
+    }
+    async openBoard(boardId) {
+        this._isBoardLoading.set(true);
+        try {
+            const prevBoard = this._activeBoard();
+            if (prevBoard)
+                this.socketService.leaveBoard(prevBoard.id);
+            const [boardRes, listsRes, tasksRes, labelsRes, membersRes] = await Promise.all([
+                this.boardApi.findById(boardId),
+                this.listApi.getAll({ filter: { boardId, isActive: true }, sort: { position: 'ASC' } }),
+                this.taskApi.getAll({ filter: { boardId }, sort: { position: 'ASC' } }),
+                this.labelApi.getAll({ filter: { boardId } }),
+                this.boardApi.getMembers(boardId),
+            ]);
+            this._activeBoard.set(boardRes.data ?? null);
+            this._lists.set(listsRes.data ?? []);
+            this._tasks.set(tasksRes.data ?? []);
+            this._labels.set(labelsRes.data ?? []);
+            this._members.set(membersRes.data ?? []);
+            this.socketService.joinBoard(boardId);
+        }
+        finally {
+            this._isBoardLoading.set(false);
+        }
+    }
+    closeBoard() {
+        const board = this._activeBoard();
+        if (board)
+            this.socketService.leaveBoard(board.id);
+        this._activeBoard.set(null);
+        this._lists.set([]);
+        this._tasks.set([]);
+        this._labels.set([]);
+        this._members.set([]);
+        this._selectedTask.set(null);
+    }
+    selectTask(task) {
+        this._selectedTask.set(task);
+    }
+    async addLabel(boardId, name, color) {
+        await this.labelApi.insert({ boardId, name, color });
+        const res = await this.labelApi.getAll({ filter: { boardId } });
+        this._labels.set(res.data ?? []);
+    }
+    async deleteLabel(labelId) {
+        await this.labelApi.delete({ id: labelId, type: 'delete' });
+        this._labels.update((list) => list.filter((l) => l.id !== labelId));
+    }
+    async addMember(userId, role = 'MEMBER') {
+        const board = this._activeBoard();
+        if (!board)
+            return;
+        const res = await this.boardApi.addMember(board.id, userId, role);
+        if (res.data)
+            this._members.update((list) => [...list, res.data]);
+    }
+    async removeMember(userId) {
+        const board = this._activeBoard();
+        if (!board)
+            return;
+        await this.boardApi.removeMember(board.id, userId);
+        this._members.update((list) => list.filter((m) => m.userId !== userId));
+    }
+    async reorderLists(boardId, orderedIds) {
+        const posMap = new Map(orderedIds.map((id, i) => [id, i * 100]));
+        this._lists.update((list) => list
+            .map((l) => (posMap.has(l.id) ? { ...l, position: posMap.get(l.id) } : l))
+            .sort((a, b) => a.position - b.position));
+        await this.listApi.reorderLists({ boardId, orderedIds });
+    }
+    async renameList(listId, name) {
+        await this.listApi.updateList({ id: listId, name });
+        this._lists.update((list) => list.map((l) => (l.id === listId ? { ...l, name } : l)));
+    }
+    async updateBoard(dto) {
+        await this.boardApi.update(dto);
+        const id = dto.id;
+        if (!id)
+            return;
+        this._activeBoard.update((b) => (b?.id === id ? { ...b, ...dto } : b));
+        this._boards.update((list) => list.map((b) => (b.id === id ? { ...b, ...dto } : b)));
+    }
+    addTaskOptimistic(task) {
+        this._tasks.update((list) => {
+            if (list.some((t) => t.id === task.id)) {
+                return list.map((t) => (t.id === task.id ? { ...t, ...task } : t));
+            }
+            return [...list, task];
+        });
+    }
+    async deleteTask(taskId) {
+        await this.taskApi.delete({ id: taskId, type: 'delete' });
+        this._tasks.update((list) => list.filter((t) => t.id !== taskId));
+        if (this._selectedTask()?.id === taskId)
+            this._selectedTask.set(null);
+    }
+    handleBoardEvent(event) {
+        switch (event.type) {
+            case 'task:created': {
+                const created = event.payload;
+                this._tasks.update((list) => {
+                    if (list.some((t) => t.id === created.id))
+                        return list;
+                    return [...list, created];
+                });
+                break;
+            }
+            case 'task:updated':
+            case 'task:moved': {
+                const updated = event.payload;
+                this._tasks.update((list) => list.map((t) => (t.id === updated.id ? { ...t, ...updated } : t)));
+                if (this._selectedTask()?.id === updated.id) {
+                    this._selectedTask.update((t) => (t ? { ...t, ...updated } : null));
+                }
+                break;
+            }
+            case 'task:deleted': {
+                const deleted = event.payload;
+                this._tasks.update((list) => list.filter((t) => t.id !== deleted.id));
+                if (this._selectedTask()?.id === deleted.id)
+                    this._selectedTask.set(null);
+                break;
+            }
+            case 'list:created':
+                this._lists.update((list) => [...list, event.payload]);
+                break;
+            case 'list:updated': {
+                const updatedList = event.payload;
+                this._lists.update((list) => list.map((l) => (l.id === updatedList.id ? { ...l, ...updatedList } : l)));
+                break;
+            }
+            case 'list:deleted': {
+                const deletedList = event.payload;
+                this._lists.update((list) => list.filter((l) => l.id !== deletedList.id));
+                break;
+            }
+            case 'list:reordered': {
+                const { orderedIds } = event.payload;
+                const posMap = new Map(orderedIds.map((id, i) => [id, i * 100]));
+                this._lists.update((list) => list
+                    .map((l) => (posMap.has(l.id) ? { ...l, position: posMap.get(l.id) } : l))
+                    .sort((a, b) => a.position - b.position));
+                break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskBoardStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const MEMBER_COLOR_PALETTE = [
+    '#6366f1',
+    '#8b5cf6',
+    '#ec4899',
+    '#ef4444',
+    '#f97316',
+    '#eab308',
+    '#22c55e',
+    '#14b8a6',
+    '#3b82f6',
+    '#06b6d4',
+];
+const BOARD_COLOR_PALETTE = [
+    ...MEMBER_COLOR_PALETTE,
+    '#64748b',
+];
+function taskPrioritySeverity(priority) {
+    const map = {
+        LOW: 'secondary',
+        MEDIUM: 'info',
+        HIGH: 'warn',
+        URGENT: 'danger',
+    };
+    return map[priority] ?? 'info';
+}
+function memberInitials(name) {
+    if (!name)
+        return '?';
+    return name
+        .split(' ')
+        .slice(0, 2)
+        .map((n) => n[0]?.toUpperCase() ?? '')
+        .join('');
+}
+function isTaskOverdue(dueDate) {
+    return new Date(dueDate) < new Date();
+}
+function memberColorFromId(userId) {
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++)
+        hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+    return MEMBER_COLOR_PALETTE[Math.abs(hash) % MEMBER_COLOR_PALETTE.length];
+}
+
+class TaskCardComponent {
+    task = input.required(...(ngDevMode ? [{ debugName: "task" }] : []));
+    cardClick = output();
+    editClick = output();
+    deleteClick = output();
+    MAX_VISIBLE = 3;
+    visibleAssignees = computed(() => (this.task().assignees ?? []).slice(0, this.MAX_VISIBLE), ...(ngDevMode ? [{ debugName: "visibleAssignees" }] : []));
+    overflowCount = computed(() => Math.max(0, (this.task().assignees ?? []).length - this.MAX_VISIBLE), ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
+    prioritySeverity = taskPrioritySeverity;
+    initials = memberInitials;
+    isOverdue = isTaskOverdue;
+    memberColor = memberColorFromId;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TaskCardComponent, isStandalone: true, selector: "tm-task-card", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { cardClick: "cardClick", editClick: "editClick", deleteClick: "deleteClick" }, ngImport: i0, template: `
+    <div
+      class="task-card group relative rounded-lg border border-surface-200 dark:border-surface-700 p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
+      (click)="cardClick.emit(task())"
+    >
+      <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
+        <button
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
+          [pTooltip]="'shared.edit' | translate"
+          tooltipPosition="top"
+          (click)="$event.stopPropagation(); editClick.emit(task())"
+        >
+          <i class="pi pi-pencil text-xs"></i>
+        </button>
+        <button
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
+          [pTooltip]="'shared.delete' | translate"
+          tooltipPosition="top"
+          (click)="$event.stopPropagation(); deleteClick.emit(task())"
+        >
+          <i class="pi pi-trash text-xs"></i>
+        </button>
+      </div>
+
+      @if (task().labels && task().labels!.length > 0) {
+        <div class="flex flex-wrap gap-1 mb-2">
+          @for (label of task().labels; track label.id) {
+            <span
+              class="inline-block h-1.5 rounded-full w-8"
+              [style.background-color]="label.color"
+              [pTooltip]="label.name"
+            ></span>
+          }
+        </div>
+      }
+
+      <p class="text-sm font-semibold line-clamp-2 leading-snug pr-14">
+        {{ task().title }}
+      </p>
+
+      <div class="flex items-center justify-between gap-2 mt-auto pt-2">
+        <p-tag
+          [value]="task().priority"
+          [severity]="prioritySeverity(task().priority)"
+          styleClass="text-xs"
+        />
+
+        @if (task().dueDate) {
+          <span
+            class="text-xs text-surface-500"
+            [class.text-red-500]="isOverdue(task().dueDate!)"
+          >
+            {{ task().dueDate | date: 'MMM d' }}
+          </span>
+        }
+
+        @if (visibleAssignees().length > 0) {
+          <div class="flex items-center -space-x-1.5">
+            @for (a of visibleAssignees(); track a.userId) {
+              <span
+                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+                [style.background-color]="memberColor(a.userId)"
+                [pTooltip]="a.userName ?? undefined"
+              >
+                {{ initials(a.userName) }}
+              </span>
+            }
+            @if (overflowCount() > 0) {
+              <span
+                class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300 flex items-center justify-center text-[10px] font-bold flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+              >
+                +{{ overflowCount() }}
+              </span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tm-task-card',
+                    imports: [TagModule, TooltipModule, DatePipe, TranslatePipe],
+                    template: `
+    <div
+      class="task-card group relative rounded-lg border border-surface-200 dark:border-surface-700 p-3 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
+      (click)="cardClick.emit(task())"
+    >
+      <div class="absolute top-2 right-2 hidden group-hover:flex gap-0.5">
+        <button
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-primary-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
+          [pTooltip]="'shared.edit' | translate"
+          tooltipPosition="top"
+          (click)="$event.stopPropagation(); editClick.emit(task())"
+        >
+          <i class="pi pi-pencil text-xs"></i>
+        </button>
+        <button
+          class="w-6 h-6 flex items-center justify-center rounded text-surface-400 hover:text-red-500 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
+          [pTooltip]="'shared.delete' | translate"
+          tooltipPosition="top"
+          (click)="$event.stopPropagation(); deleteClick.emit(task())"
+        >
+          <i class="pi pi-trash text-xs"></i>
+        </button>
+      </div>
+
+      @if (task().labels && task().labels!.length > 0) {
+        <div class="flex flex-wrap gap-1 mb-2">
+          @for (label of task().labels; track label.id) {
+            <span
+              class="inline-block h-1.5 rounded-full w-8"
+              [style.background-color]="label.color"
+              [pTooltip]="label.name"
+            ></span>
+          }
+        </div>
+      }
+
+      <p class="text-sm font-semibold line-clamp-2 leading-snug pr-14">
+        {{ task().title }}
+      </p>
+
+      <div class="flex items-center justify-between gap-2 mt-auto pt-2">
+        <p-tag
+          [value]="task().priority"
+          [severity]="prioritySeverity(task().priority)"
+          styleClass="text-xs"
+        />
+
+        @if (task().dueDate) {
+          <span
+            class="text-xs text-surface-500"
+            [class.text-red-500]="isOverdue(task().dueDate!)"
+          >
+            {{ task().dueDate | date: 'MMM d' }}
+          </span>
+        }
+
+        @if (visibleAssignees().length > 0) {
+          <div class="flex items-center -space-x-1.5">
+            @for (a of visibleAssignees(); track a.userId) {
+              <span
+                class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+                [style.background-color]="memberColor(a.userId)"
+                [pTooltip]="a.userName ?? undefined"
+              >
+                {{ initials(a.userName) }}
+              </span>
+            }
+            @if (overflowCount() > 0) {
+              <span
+                class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300 flex items-center justify-center text-[10px] font-bold flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+              >
+                +{{ overflowCount() }}
+              </span>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: true }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }] } });
+
+const PRIORITY_OPTIONS = [
+    { label: 'task.priority.LOW', value: 'LOW' },
+    { label: 'task.priority.MEDIUM', value: 'MEDIUM' },
+    { label: 'task.priority.HIGH', value: 'HIGH' },
+    { label: 'task.priority.URGENT', value: 'URGENT' },
+];
+class TaskFormDialogComponent {
+    taskApi = inject(TaskApiService);
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : []));
+    boardId = input.required(...(ngDevMode ? [{ debugName: "boardId" }] : []));
+    listId = input.required(...(ngDevMode ? [{ debugName: "listId" }] : []));
+    members = input([], ...(ngDevMode ? [{ debugName: "members" }] : []));
+    labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    saved = output();
+    isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
+    priorityOptions = PRIORITY_OPTIONS;
+    title = '';
+    description = '';
+    priority = 'MEDIUM';
+    dueDate = null;
+    selectedAssigneeIds = [];
+    selectedLabelIds = [];
+    constructor() {
+        effect(() => {
+            const t = this.task();
+            if (t) {
+                this.title = t.title;
+                this.description = t.description ?? '';
+                this.priority = t.priority;
+                this.dueDate = t.dueDate ? new Date(t.dueDate) : null;
+                this.selectedAssigneeIds = t.assignees?.map((a) => a.userId) ?? [];
+                this.selectedLabelIds = t.labelIds ?? [];
+            }
+            else {
+                this.reset();
+            }
+        });
+    }
+    async onSave() {
+        if (!this.title.trim())
+            return;
+        this.isSaving.set(true);
+        try {
+            const dueDateStr = this.dueDate
+                ? this.dueDate.toISOString().slice(0, 10)
+                : undefined;
+            const existing = this.task();
+            const priority = this.priority;
+            let result;
+            if (existing) {
+                const dto = {
+                    id: existing.id,
+                    title: this.title,
+                    description: this.description || undefined,
+                    priority,
+                    dueDate: dueDateStr,
+                    assigneeIds: this.selectedAssigneeIds,
+                    labelIds: this.selectedLabelIds,
+                };
+                result = await this.taskApi.update(dto);
+            }
+            else {
+                const dto = {
+                    boardId: this.boardId(),
+                    listId: this.listId(),
+                    title: this.title,
+                    description: this.description || undefined,
+                    priority,
+                    dueDate: dueDateStr,
+                    assigneeIds: this.selectedAssigneeIds,
+                    labelIds: this.selectedLabelIds,
+                };
+                result = await this.taskApi.insert(dto);
+            }
+            if (result.data)
+                this.saved.emit(result.data);
+            this.visible.set(false);
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+    }
+    onClose() {
+        this.visible.set(false);
+        this.reset();
+    }
+    reset() {
+        this.title = '';
+        this.description = '';
+        this.priority = 'MEDIUM';
+        this.dueDate = null;
+        this.selectedAssigneeIds = [];
+        this.selectedLabelIds = [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: TaskFormDialogComponent, isStandalone: true, selector: "tm-task-form-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: true, transformFunction: null }, members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", saved: "saved" }, ngImport: i0, template: `
+    <p-dialog
+      [header]="
+        (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
+      "
+      [(visible)]="visible"
+      [modal]="true"
+      [style]="{ width: '540px' }"
+      (onHide)="onClose()"
+    >
+      <div class="flex flex-col gap-4 py-3">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium"
+            >{{ 'task.form.title.label' | translate }}
+            <span class="text-red-500">*</span></label
+          >
+          <input
+            pInputText
+            [(ngModel)]="title"
+            [placeholder]="'task.form.title.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="description"
+            rows="3"
+            [placeholder]="'task.form.description.placeholder' | translate"
+          ></textarea>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.form.priority.label' | translate
+            }}</label>
+            <p-select
+              [(ngModel)]="priority"
+              [options]="priorityOptions"
+              optionLabel="label"
+              optionValue="value"
+              [placeholder]="'task.form.priority.placeholder' | translate"
+            >
+              <ng-template #selectedItem let-opt>
+                {{ opt.label | translate }}
+              </ng-template>
+              <ng-template #item let-opt>
+                {{ opt.label | translate }}
+              </ng-template>
+            </p-select>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.form.due.date.label' | translate
+            }}</label>
+            <p-datepicker
+              [(ngModel)]="dueDate"
+              [showClear]="true"
+              [placeholder]="'task.form.due.date.placeholder' | translate"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.form.assignee.label' | translate
+          }}</label>
+          <p-multiselect
+            [(ngModel)]="selectedAssigneeIds"
+            [options]="members()"
+            optionLabel="userName"
+            optionValue="userId"
+            appendTo="body"
+            [placeholder]="'task.form.assignee.placeholder' | translate"
+            [showClear]="true"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.form.labels.label' | translate
+          }}</label>
+          <p-multiselect
+            [(ngModel)]="selectedLabelIds"
+            [options]="labels()"
+            optionLabel="name"
+            optionValue="id"
+            appendTo="body"
+            [placeholder]="'task.form.labels.placeholder' | translate"
+          />
+        </div>
+      </div>
+
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2 pt-1">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="onClose()"
+          />
+          <p-button
+            [label]="'shared.save' | translate"
+            [loading]="isSaving()"
+            (onClick)="onSave()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskFormDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tm-task-form-dialog',
+                    imports: [
+                        DialogModule,
+                        FormsModule,
+                        InputTextModule,
+                        TextareaModule,
+                        SelectModule,
+                        DatePickerModule,
+                        MultiSelectModule,
+                        ButtonModule,
+                        TranslatePipe,
+                    ],
+                    template: `
+    <p-dialog
+      [header]="
+        (task() ? 'task.form.title.edit' : 'task.form.title.create') | translate
+      "
+      [(visible)]="visible"
+      [modal]="true"
+      [style]="{ width: '540px' }"
+      (onHide)="onClose()"
+    >
+      <div class="flex flex-col gap-4 py-3">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium"
+            >{{ 'task.form.title.label' | translate }}
+            <span class="text-red-500">*</span></label
+          >
+          <input
+            pInputText
+            [(ngModel)]="title"
+            [placeholder]="'task.form.title.placeholder' | translate"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="description"
+            rows="3"
+            [placeholder]="'task.form.description.placeholder' | translate"
+          ></textarea>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.form.priority.label' | translate
+            }}</label>
+            <p-select
+              [(ngModel)]="priority"
+              [options]="priorityOptions"
+              optionLabel="label"
+              optionValue="value"
+              [placeholder]="'task.form.priority.placeholder' | translate"
+            >
+              <ng-template #selectedItem let-opt>
+                {{ opt.label | translate }}
+              </ng-template>
+              <ng-template #item let-opt>
+                {{ opt.label | translate }}
+              </ng-template>
+            </p-select>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.form.due.date.label' | translate
+            }}</label>
+            <p-datepicker
+              [(ngModel)]="dueDate"
+              [showClear]="true"
+              [placeholder]="'task.form.due.date.placeholder' | translate"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.form.assignee.label' | translate
+          }}</label>
+          <p-multiselect
+            [(ngModel)]="selectedAssigneeIds"
+            [options]="members()"
+            optionLabel="userName"
+            optionValue="userId"
+            appendTo="body"
+            [placeholder]="'task.form.assignee.placeholder' | translate"
+            [showClear]="true"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.form.labels.label' | translate
+          }}</label>
+          <p-multiselect
+            [(ngModel)]="selectedLabelIds"
+            [options]="labels()"
+            optionLabel="name"
+            optionValue="id"
+            appendTo="body"
+            [placeholder]="'task.form.labels.placeholder' | translate"
+          />
+        </div>
+      </div>
+
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2 pt-1">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="onClose()"
+          />
+          <p-button
+            [label]="'shared.save' | translate"
+            [loading]="isSaving()"
+            (onClick)="onSave()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: true }] }], members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }] } });
+
+class TaskDetailPanelComponent {
+    commentApi = inject(TaskCommentApiService);
+    state = inject(TaskBoardStateService);
+    task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : []));
+    closePanel = output();
+    editTask = output();
+    comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : []));
+    isSendingComment = signal(false, ...(ngDevMode ? [{ debugName: "isSendingComment" }] : []));
+    isSendingReply = signal(false, ...(ngDevMode ? [{ debugName: "isSendingReply" }] : []));
+    replyingToId = signal(null, ...(ngDevMode ? [{ debugName: "replyingToId" }] : []));
+    isDeleting = signal(false, ...(ngDevMode ? [{ debugName: "isDeleting" }] : []));
+    newComment = '';
+    replyText = '';
+    assigneeMembers = computed(() => this.task()?.assignees ?? [], ...(ngDevMode ? [{ debugName: "assigneeMembers" }] : []));
+    rootComments = computed(() => this.comments().filter((c) => !c.parentCommentId), ...(ngDevMode ? [{ debugName: "rootComments" }] : []));
+    repliesFor(parentId) {
+        return this.comments().filter((c) => c.parentCommentId === parentId);
+    }
+    constructor() {
+        effect(() => {
+            const t = this.task();
+            if (t)
+                this.loadComments(t.id);
+            else {
+                this.comments.set([]);
+                this.replyingToId.set(null);
+            }
+        });
+    }
+    toggleReply(commentId) {
+        if (this.replyingToId() === commentId) {
+            this.cancelReply();
+        }
+        else {
+            this.replyingToId.set(commentId);
+            this.replyText = '';
+        }
+    }
+    cancelReply() {
+        this.replyingToId.set(null);
+        this.replyText = '';
+    }
+    async deleteTask(taskId) {
+        this.isDeleting.set(true);
+        try {
+            await this.state.deleteTask(taskId);
+            this.closePanel.emit();
+        }
+        finally {
+            this.isDeleting.set(false);
+        }
+    }
+    prioritySeverity = taskPrioritySeverity;
+    initials = memberInitials;
+    async loadComments(taskId) {
+        const res = await this.commentApi.getAll({ filter: { taskId } });
+        this.comments.set(res.data ?? []);
+    }
+    async addComment(taskId) {
+        if (!this.newComment.trim())
+            return;
+        this.isSendingComment.set(true);
+        try {
+            const res = await this.commentApi.insert({
+                taskId,
+                content: this.newComment,
+            });
+            if (res.data)
+                this.comments.update((list) => [...list, res.data]);
+            this.newComment = '';
+        }
+        finally {
+            this.isSendingComment.set(false);
+        }
+    }
+    async submitReply(taskId, parentCommentId) {
+        if (!this.replyText.trim())
+            return;
+        this.isSendingReply.set(true);
+        try {
+            const res = await this.commentApi.insert({
+                taskId,
+                content: this.replyText,
+                parentCommentId,
+            });
+            if (res.data)
+                this.comments.update((list) => [...list, res.data]);
+            this.cancelReply();
+        }
+        finally {
+            this.isSendingReply.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TaskDetailPanelComponent, isStandalone: true, selector: "tm-task-detail-panel", inputs: { task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePanel: "closePanel", editTask: "editTask" }, ngImport: i0, template: `
+    <p-drawer
+      [visible]="!!task()"
+      position="right"
+      [style]="{ width: '500px' }"
+      [header]="task()?.title ?? ''"
+      (onHide)="closePanel.emit()"
+    >
+      @if (task(); as t) {
+        <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
+          <div class="flex items-center justify-end gap-1">
+            <p-button
+              icon="pi pi-pencil"
+              severity="secondary"
+              size="small"
+              [text]="true"
+              [pTooltip]="'task.detail.edit' | translate"
+              tooltipPosition="left"
+              (onClick)="editTask.emit(t)"
+            />
+            <p-button
+              icon="pi pi-trash"
+              severity="danger"
+              size="small"
+              [text]="true"
+              [loading]="isDeleting()"
+              [pTooltip]="'task.detail.delete' | translate"
+              tooltipPosition="left"
+              (onClick)="deleteTask(t.id)"
+            />
+          </div>
+
+          <div class="flex items-center gap-3">
+            <p-tag
+              [value]="t.priority"
+              [severity]="prioritySeverity(t.priority)"
+            />
+            @if (t.dueDate) {
+              <span class="text-sm text-surface-500">
+                {{ 'task.detail.due.label' | translate }}:
+                {{ t.dueDate | date: 'mediumDate' }}
+              </span>
+            }
+          </div>
+
+          @if (assigneeMembers().length > 0) {
+            <div>
+              <h4 class="text-sm font-semibold mb-2">
+                {{ 'task.detail.assignees.label' | translate }}
+              </h4>
+              <div class="flex flex-wrap gap-2">
+                @for (member of assigneeMembers(); track member.userId) {
+                  <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
+                    <span
+                      class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
+                    >
+                      {{ initials(member.userName) }}
+                    </span>
+                    <span class="text-sm">{{ member.userName }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
+          <div>
+            <h4 class="text-sm font-semibold mb-2">
+              {{ 'shared.description' | translate }}
+            </h4>
+            <p
+              class="text-sm text-surface-600 dark:text-surface-400 whitespace-pre-wrap"
+            >
+              {{
+                t.description || ('task.detail.description.empty' | translate)
+              }}
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <h4 class="text-sm font-semibold mb-1">
+              {{ 'task.detail.comments.label' | translate }} ({{
+                rootComments().length
+              }})
+            </h4>
+
+            @for (comment of rootComments(); track comment.id) {
+              <div
+                class="group flex flex-col gap-1 py-2 border-b border-surface-100 dark:border-surface-800 last:border-0"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-surface-400">{{
+                    comment.createdAt | date: 'MMM d, y, h:mm a'
+                  }}</span>
+                  <p-button
+                    [label]="'task.comment.reply' | translate"
+                    icon="pi pi-reply"
+                    size="small"
+                    [text]="true"
+                    severity="secondary"
+                    styleClass="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
+                    (onClick)="toggleReply(comment.id)"
+                  />
+                </div>
+                <p class="text-sm">{{ comment.content }}</p>
+
+                @if (repliesFor(comment.id).length > 0) {
+                  <div
+                    class="mt-1 pl-3 border-l-2 border-surface-200 dark:border-surface-700 flex flex-col gap-2"
+                  >
+                    @for (reply of repliesFor(comment.id); track reply.id) {
+                      <div class="flex flex-col gap-0.5">
+                        <span class="text-xs text-surface-400">{{
+                          reply.createdAt | date: 'MMM d, y, h:mm a'
+                        }}</span>
+                        <p class="text-sm">{{ reply.content }}</p>
+                      </div>
+                    }
+                  </div>
+                }
+
+                @if (replyingToId() === comment.id) {
+                  <div
+                    class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
+                  >
+                    <textarea
+                      pTextarea
+                      [(ngModel)]="replyText"
+                      rows="2"
+                      [placeholder]="
+                        'task.comment.reply.placeholder' | translate
+                      "
+                      class="flex-1 resize-none text-sm"
+                      autoResize="true"
+                    ></textarea>
+                    <div class="flex flex-col gap-1">
+                      <p-button
+                        icon="pi pi-send"
+                        size="small"
+                        [loading]="isSendingReply()"
+                        [disabled]="!replyText.trim()"
+                        (onClick)="submitReply(t.id, comment.id)"
+                      />
+                      <p-button
+                        icon="pi pi-times"
+                        size="small"
+                        severity="secondary"
+                        [text]="true"
+                        (onClick)="cancelReply()"
+                      />
+                    </div>
+                  </div>
+                }
+              </div>
+            }
+
+            @if (rootComments().length === 0) {
+              <p class="text-sm text-surface-400 py-2">
+                {{ 'task.detail.comments.empty' | translate }}
+              </p>
+            }
+
+            <div class="flex gap-2 mt-3">
+              <textarea
+                pTextarea
+                [(ngModel)]="newComment"
+                rows="2"
+                [placeholder]="'task.detail.comment.placeholder' | translate"
+                class="flex-1 resize-none"
+              ></textarea>
+              <p-button
+                icon="pi pi-send"
+                [loading]="isSendingComment()"
+                [disabled]="!newComment.trim()"
+                (onClick)="addComment(t.id)"
+              />
+            </div>
+          </div>
+        </div>
+      }
+    </p-drawer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TaskDetailPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tm-task-detail-panel',
+                    imports: [
+                        DrawerModule,
+                        ButtonModule,
+                        TagModule,
+                        DatePipe,
+                        FormsModule,
+                        TextareaModule,
+                        TooltipModule,
+                        TranslatePipe,
+                    ],
+                    template: `
+    <p-drawer
+      [visible]="!!task()"
+      position="right"
+      [style]="{ width: '500px' }"
+      [header]="task()?.title ?? ''"
+      (onHide)="closePanel.emit()"
+    >
+      @if (task(); as t) {
+        <div class="flex flex-col gap-6 h-full overflow-y-auto pb-4">
+          <div class="flex items-center justify-end gap-1">
+            <p-button
+              icon="pi pi-pencil"
+              severity="secondary"
+              size="small"
+              [text]="true"
+              [pTooltip]="'task.detail.edit' | translate"
+              tooltipPosition="left"
+              (onClick)="editTask.emit(t)"
+            />
+            <p-button
+              icon="pi pi-trash"
+              severity="danger"
+              size="small"
+              [text]="true"
+              [loading]="isDeleting()"
+              [pTooltip]="'task.detail.delete' | translate"
+              tooltipPosition="left"
+              (onClick)="deleteTask(t.id)"
+            />
+          </div>
+
+          <div class="flex items-center gap-3">
+            <p-tag
+              [value]="t.priority"
+              [severity]="prioritySeverity(t.priority)"
+            />
+            @if (t.dueDate) {
+              <span class="text-sm text-surface-500">
+                {{ 'task.detail.due.label' | translate }}:
+                {{ t.dueDate | date: 'mediumDate' }}
+              </span>
+            }
+          </div>
+
+          @if (assigneeMembers().length > 0) {
+            <div>
+              <h4 class="text-sm font-semibold mb-2">
+                {{ 'task.detail.assignees.label' | translate }}
+              </h4>
+              <div class="flex flex-wrap gap-2">
+                @for (member of assigneeMembers(); track member.userId) {
+                  <div class="flex items-center gap-2 px-2 py-1 rounded-full ">
+                    <span
+                      class="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 flex items-center justify-center text-xs font-semibold"
+                    >
+                      {{ initials(member.userName) }}
+                    </span>
+                    <span class="text-sm">{{ member.userName }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+
+          <div>
+            <h4 class="text-sm font-semibold mb-2">
+              {{ 'shared.description' | translate }}
+            </h4>
+            <p
+              class="text-sm text-surface-600 dark:text-surface-400 whitespace-pre-wrap"
+            >
+              {{
+                t.description || ('task.detail.description.empty' | translate)
+              }}
+            </p>
+          </div>
+
+          <div class="flex flex-col gap-1">
+            <h4 class="text-sm font-semibold mb-1">
+              {{ 'task.detail.comments.label' | translate }} ({{
+                rootComments().length
+              }})
+            </h4>
+
+            @for (comment of rootComments(); track comment.id) {
+              <div
+                class="group flex flex-col gap-1 py-2 border-b border-surface-100 dark:border-surface-800 last:border-0"
+              >
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-surface-400">{{
+                    comment.createdAt | date: 'MMM d, y, h:mm a'
+                  }}</span>
+                  <p-button
+                    [label]="'task.comment.reply' | translate"
+                    icon="pi pi-reply"
+                    size="small"
+                    [text]="true"
+                    severity="secondary"
+                    styleClass="opacity-0 group-hover:opacity-100 transition-opacity !py-0.5 !px-1.5 text-xs"
+                    (onClick)="toggleReply(comment.id)"
+                  />
+                </div>
+                <p class="text-sm">{{ comment.content }}</p>
+
+                @if (repliesFor(comment.id).length > 0) {
+                  <div
+                    class="mt-1 pl-3 border-l-2 border-surface-200 dark:border-surface-700 flex flex-col gap-2"
+                  >
+                    @for (reply of repliesFor(comment.id); track reply.id) {
+                      <div class="flex flex-col gap-0.5">
+                        <span class="text-xs text-surface-400">{{
+                          reply.createdAt | date: 'MMM d, y, h:mm a'
+                        }}</span>
+                        <p class="text-sm">{{ reply.content }}</p>
+                      </div>
+                    }
+                  </div>
+                }
+
+                @if (replyingToId() === comment.id) {
+                  <div
+                    class="mt-2 pl-3 border-l-2 border-primary-300 dark:border-primary-700 flex gap-2"
+                  >
+                    <textarea
+                      pTextarea
+                      [(ngModel)]="replyText"
+                      rows="2"
+                      [placeholder]="
+                        'task.comment.reply.placeholder' | translate
+                      "
+                      class="flex-1 resize-none text-sm"
+                      autoResize="true"
+                    ></textarea>
+                    <div class="flex flex-col gap-1">
+                      <p-button
+                        icon="pi pi-send"
+                        size="small"
+                        [loading]="isSendingReply()"
+                        [disabled]="!replyText.trim()"
+                        (onClick)="submitReply(t.id, comment.id)"
+                      />
+                      <p-button
+                        icon="pi pi-times"
+                        size="small"
+                        severity="secondary"
+                        [text]="true"
+                        (onClick)="cancelReply()"
+                      />
+                    </div>
+                  </div>
+                }
+              </div>
+            }
+
+            @if (rootComments().length === 0) {
+              <p class="text-sm text-surface-400 py-2">
+                {{ 'task.detail.comments.empty' | translate }}
+              </p>
+            }
+
+            <div class="flex gap-2 mt-3">
+              <textarea
+                pTextarea
+                [(ngModel)]="newComment"
+                rows="2"
+                [placeholder]="'task.detail.comment.placeholder' | translate"
+                class="flex-1 resize-none"
+              ></textarea>
+              <p-button
+                icon="pi pi-send"
+                [loading]="isSendingComment()"
+                [disabled]="!newComment.trim()"
+                (onClick)="addComment(t.id)"
+              />
+            </div>
+          </div>
+        </div>
+      }
+    </p-drawer>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], closePanel: [{ type: i0.Output, args: ["closePanel"] }], editTask: [{ type: i0.Output, args: ["editTask"] }] } });
+
+class BoardListPageComponent {
+    state = inject(TaskBoardStateService);
+    boardApi = inject(TaskBoardApiService);
+    router = inject(Router);
+    showCreateDialog = signal(false, ...(ngDevMode ? [{ debugName: "showCreateDialog" }] : []));
+    isCreating = signal(false, ...(ngDevMode ? [{ debugName: "isCreating" }] : []));
+    newBoardName = '';
+    newBoardDescription = '';
+    newBoardColor = '#6366f1';
+    boardColors = BOARD_COLOR_PALETTE;
+    constructor() {
+        this.state.loadBoards();
+    }
+    openBoard(boardId) {
+        this.router.navigate(['/task-manager/board', boardId]);
+    }
+    closeCreateDialog() {
+        this.showCreateDialog.set(false);
+        this.newBoardName = '';
+        this.newBoardDescription = '';
+        this.newBoardColor = '#6366f1';
+    }
+    async createBoard() {
+        if (!this.newBoardName.trim())
+            return;
+        this.isCreating.set(true);
+        try {
+            await this.boardApi.insert({
+                name: this.newBoardName,
+                description: this.newBoardDescription || undefined,
+                color: this.newBoardColor,
+            });
+            await this.state.loadBoards();
+            this.closeCreateDialog();
+        }
+        finally {
+            this.isCreating.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardListPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BoardListPageComponent, isStandalone: true, selector: "tm-board-list-page", ngImport: i0, template: `
+    <div class="p-2 sm:p-4">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h1 class="text-xl sm:text-2xl font-bold m-0">
+            {{ 'task.manager.boards.title' | translate }}
+          </h1>
+          <p class="text-muted-color mt-1 text-sm sm:text-base">
+            {{ 'task.manager.boards.subtitle' | translate }}
+          </p>
+        </div>
+        <p-button
+          [label]="'task.manager.board.new' | translate"
+          icon="pi pi-plus"
+          (onClick)="showCreateDialog.set(true)"
+        />
+      </div>
+
+      @if (state.isLoading()) {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          @for (i of [1, 2, 3, 4, 5, 6]; track i) {
+            <div class="card !p-0 overflow-hidden">
+              <p-skeleton height="4px" borderRadius="0" />
+              <div class="p-5">
+                <p-skeleton height="18px" width="60%" class="mb-3" />
+                <p-skeleton height="13px" class="mb-1" />
+                <p-skeleton height="13px" width="70%" class="mb-5" />
+                <div class="flex gap-5 pt-4 border-t border-surface-100">
+                  <p-skeleton height="14px" width="55px" />
+                  <p-skeleton height="14px" width="45px" />
+                  <p-skeleton height="14px" width="50px" />
+                </div>
+                <p-skeleton height="11px" width="100px" class="mt-2" />
+              </div>
+            </div>
+          }
+        </div>
+      } @else if (state.boards().length === 0) {
+        <div
+          class="flex flex-col items-center justify-center py-20 text-muted-color"
+        >
+          <span
+            class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
+          >
+            <i class="pi pi-th-large text-2xl text-surface-400"></i>
+          </span>
+          <p class="text-base font-semibold mb-1">
+            {{ 'task.manager.board.empty' | translate }}
+          </p>
+          <p class="text-sm text-muted-color mb-5">
+            {{ 'task.manager.board.empty.hint' | translate }}
+          </p>
+          <p-button
+            [label]="'task.manager.board.new' | translate"
+            icon="pi pi-plus"
+            size="small"
+            (onClick)="showCreateDialog.set(true)"
+          />
+        </div>
+      } @else {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          @for (board of state.boards(); track board.id) {
+            <div
+              class="card !p-0 cursor-pointer overflow-hidden group hover:shadow-lg transition-all duration-200"
+              (click)="openBoard(board.id)"
+            >
+              <div class="h-1" [style.background-color]="board.color"></div>
+
+              <div class="p-5">
+                <div class="flex items-start justify-between gap-3 mb-2">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <h3
+                      class="font-semibold text-base m-0 truncate group-hover:text-primary-500 transition-colors duration-150"
+                    >
+                      {{ board.name }}
+                    </h3>
+                  </div>
+                  <i
+                    class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
+                  ></i>
+                </div>
+
+                <p
+                  class="text-sm text-muted-color line-clamp-2 pl-[18px] mb-0 min-h-[40px]"
+                >
+                  {{ board.description || '' }}
+                </p>
+
+                <div
+                  class="border-t border-surface-100 dark:border-surface-700 mt-4 pt-4 space-y-2.5"
+                >
+                  <div class="flex items-center gap-4">
+                    <span class="flex items-center gap-1.5">
+                      <i class="pi pi-users text-[11px] text-muted-color"></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalMembers ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.members' | translate
+                      }}</span>
+                    </span>
+                    <span
+                      class="w-px h-3 bg-surface-200 dark:bg-surface-600"
+                    ></span>
+                    <span class="flex items-center gap-1.5">
+                      <i class="pi pi-list text-[11px] text-muted-color"></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalLists ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.lists' | translate
+                      }}</span>
+                    </span>
+                    <span
+                      class="w-px h-3 bg-surface-200 dark:bg-surface-600"
+                    ></span>
+                    <span class="flex items-center gap-1.5">
+                      <i
+                        class="pi pi-check-square text-[11px] text-muted-color"
+                      ></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalTasks ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.tasks' | translate
+                      }}</span>
+                    </span>
+                  </div>
+                  <div
+                    class="flex items-center gap-1.5 text-xs text-muted-color"
+                  >
+                    <i class="pi pi-clock text-[10px]"></i>
+                    <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <p-dialog
+      [header]="'task.manager.board.new' | translate"
+      [(visible)]="showCreateDialog"
+      [modal]="true"
+      [style]="{ width: '440px' }"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium"
+            >{{ 'shared.name' | translate }}
+            <span class="text-red-500">*</span></label
+          >
+          <input
+            pInputText
+            [(ngModel)]="newBoardName"
+            [placeholder]="'task.manager.board.name.placeholder' | translate"
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="newBoardDescription"
+            rows="2"
+            [placeholder]="
+              'task.manager.board.description.placeholder' | translate
+            "
+          ></textarea>
+        </div>
+        <div class="flex flex-col gap-2">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.color.label' | translate
+          }}</label>
+          <div class="flex flex-wrap gap-2">
+            @for (c of boardColors; track c) {
+              <button
+                type="button"
+                class="w-8 h-8 rounded-full border-2 transition-all hover:scale-110 focus:outline-none flex items-center justify-center"
+                [style.background-color]="c"
+                [class.ring-2]="newBoardColor === c"
+                [class.ring-offset-2]="newBoardColor === c"
+                [class.ring-surface-900]="newBoardColor === c"
+                [pTooltip]="c"
+                (click)="newBoardColor = c"
+              >
+                @if (newBoardColor === c) {
+                  <i class="pi pi-check text-white text-xs"></i>
+                }
+              </button>
+            }
+          </div>
+          <div class="flex items-center gap-2 mt-1">
+            <span
+              class="w-8 h-8 rounded-full border border-surface-200 flex-shrink-0"
+              [style.background-color]="newBoardColor"
+            ></span>
+            <span class="text-sm text-surface-500 font-mono">{{
+              newBoardColor
+            }}</span>
+          </div>
+        </div>
+      </div>
+
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="closeCreateDialog()"
+          />
+          <p-button
+            [label]="'shared.create' | translate"
+            [loading]="isCreating()"
+            (onClick)="createBoard()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i9$1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardListPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tm-board-list-page',
+                    imports: [AngularModule, PrimeModule, TranslatePipe],
+                    template: `
+    <div class="p-2 sm:p-4">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h1 class="text-xl sm:text-2xl font-bold m-0">
+            {{ 'task.manager.boards.title' | translate }}
+          </h1>
+          <p class="text-muted-color mt-1 text-sm sm:text-base">
+            {{ 'task.manager.boards.subtitle' | translate }}
+          </p>
+        </div>
+        <p-button
+          [label]="'task.manager.board.new' | translate"
+          icon="pi pi-plus"
+          (onClick)="showCreateDialog.set(true)"
+        />
+      </div>
+
+      @if (state.isLoading()) {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          @for (i of [1, 2, 3, 4, 5, 6]; track i) {
+            <div class="card !p-0 overflow-hidden">
+              <p-skeleton height="4px" borderRadius="0" />
+              <div class="p-5">
+                <p-skeleton height="18px" width="60%" class="mb-3" />
+                <p-skeleton height="13px" class="mb-1" />
+                <p-skeleton height="13px" width="70%" class="mb-5" />
+                <div class="flex gap-5 pt-4 border-t border-surface-100">
+                  <p-skeleton height="14px" width="55px" />
+                  <p-skeleton height="14px" width="45px" />
+                  <p-skeleton height="14px" width="50px" />
+                </div>
+                <p-skeleton height="11px" width="100px" class="mt-2" />
+              </div>
+            </div>
+          }
+        </div>
+      } @else if (state.boards().length === 0) {
+        <div
+          class="flex flex-col items-center justify-center py-20 text-muted-color"
+        >
+          <span
+            class="w-16 h-16 rounded-2xl border-2 border-dashed border-surface-300 flex items-center justify-center mb-4"
+          >
+            <i class="pi pi-th-large text-2xl text-surface-400"></i>
+          </span>
+          <p class="text-base font-semibold mb-1">
+            {{ 'task.manager.board.empty' | translate }}
+          </p>
+          <p class="text-sm text-muted-color mb-5">
+            {{ 'task.manager.board.empty.hint' | translate }}
+          </p>
+          <p-button
+            [label]="'task.manager.board.new' | translate"
+            icon="pi pi-plus"
+            size="small"
+            (onClick)="showCreateDialog.set(true)"
+          />
+        </div>
+      } @else {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          @for (board of state.boards(); track board.id) {
+            <div
+              class="card !p-0 cursor-pointer overflow-hidden group hover:shadow-lg transition-all duration-200"
+              (click)="openBoard(board.id)"
+            >
+              <div class="h-1" [style.background-color]="board.color"></div>
+
+              <div class="p-5">
+                <div class="flex items-start justify-between gap-3 mb-2">
+                  <div class="flex items-center gap-2 min-w-0">
+                    <h3
+                      class="font-semibold text-base m-0 truncate group-hover:text-primary-500 transition-colors duration-150"
+                    >
+                      {{ board.name }}
+                    </h3>
+                  </div>
+                  <i
+                    class="pi pi-arrow-right text-xs text-surface-300 group-hover:text-primary-500 group-hover:translate-x-0.5 transition-all duration-150 flex-shrink-0 mt-1"
+                  ></i>
+                </div>
+
+                <p
+                  class="text-sm text-muted-color line-clamp-2 pl-[18px] mb-0 min-h-[40px]"
+                >
+                  {{ board.description || '' }}
+                </p>
+
+                <div
+                  class="border-t border-surface-100 dark:border-surface-700 mt-4 pt-4 space-y-2.5"
+                >
+                  <div class="flex items-center gap-4">
+                    <span class="flex items-center gap-1.5">
+                      <i class="pi pi-users text-[11px] text-muted-color"></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalMembers ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.members' | translate
+                      }}</span>
+                    </span>
+                    <span
+                      class="w-px h-3 bg-surface-200 dark:bg-surface-600"
+                    ></span>
+                    <span class="flex items-center gap-1.5">
+                      <i class="pi pi-list text-[11px] text-muted-color"></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalLists ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.lists' | translate
+                      }}</span>
+                    </span>
+                    <span
+                      class="w-px h-3 bg-surface-200 dark:bg-surface-600"
+                    ></span>
+                    <span class="flex items-center gap-1.5">
+                      <i
+                        class="pi pi-check-square text-[11px] text-muted-color"
+                      ></i>
+                      <span class="text-sm font-semibold">{{
+                        board.totalTasks ?? 0
+                      }}</span>
+                      <span class="text-xs text-muted-color">{{
+                        'task.manager.board.tasks' | translate
+                      }}</span>
+                    </span>
+                  </div>
+                  <div
+                    class="flex items-center gap-1.5 text-xs text-muted-color"
+                  >
+                    <i class="pi pi-clock text-[10px]"></i>
+                    <span>{{ board.createdAt | date: 'MMM d, yyyy' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <p-dialog
+      [header]="'task.manager.board.new' | translate"
+      [(visible)]="showCreateDialog"
+      [modal]="true"
+      [style]="{ width: '440px' }"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium"
+            >{{ 'shared.name' | translate }}
+            <span class="text-red-500">*</span></label
+          >
+          <input
+            pInputText
+            [(ngModel)]="newBoardName"
+            [placeholder]="'task.manager.board.name.placeholder' | translate"
+          />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="newBoardDescription"
+            rows="2"
+            [placeholder]="
+              'task.manager.board.description.placeholder' | translate
+            "
+          ></textarea>
+        </div>
+        <div class="flex flex-col gap-2">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.color.label' | translate
+          }}</label>
+          <div class="flex flex-wrap gap-2">
+            @for (c of boardColors; track c) {
+              <button
+                type="button"
+                class="w-8 h-8 rounded-full border-2 transition-all hover:scale-110 focus:outline-none flex items-center justify-center"
+                [style.background-color]="c"
+                [class.ring-2]="newBoardColor === c"
+                [class.ring-offset-2]="newBoardColor === c"
+                [class.ring-surface-900]="newBoardColor === c"
+                [pTooltip]="c"
+                (click)="newBoardColor = c"
+              >
+                @if (newBoardColor === c) {
+                  <i class="pi pi-check text-white text-xs"></i>
+                }
+              </button>
+            }
+          </div>
+          <div class="flex items-center gap-2 mt-1">
+            <span
+              class="w-8 h-8 rounded-full border border-surface-200 flex-shrink-0"
+              [style.background-color]="newBoardColor"
+            ></span>
+            <span class="text-sm text-surface-500 font-mono">{{
+              newBoardColor
+            }}</span>
+          </div>
+        </div>
+      </div>
+
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="closeCreateDialog()"
+          />
+          <p-button
+            [label]="'shared.create' | translate"
+            [loading]="isCreating()"
+            (onClick)="createBoard()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+var boardListPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    BoardListPageComponent: BoardListPageComponent
+});
+
+class BoardViewPageComponent {
+    state = inject(TaskBoardStateService);
+    taskApi = inject(TaskApiService);
+    listApi = inject(TaskListApiService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    translateAdapter = inject(TranslateService, { optional: true });
+    destroyRef = inject(DestroyRef);
+    translate(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    boardId = input.required(...(ngDevMode ? [{ debugName: "boardId" }] : []));
+    viewMode = signal('board', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    showTaskForm = signal(false, ...(ngDevMode ? [{ debugName: "showTaskForm" }] : []));
+    editingTask = signal(null, ...(ngDevMode ? [{ debugName: "editingTask" }] : []));
+    activeListId = signal('', ...(ngDevMode ? [{ debugName: "activeListId" }] : []));
+    showAddListDialog = signal(false, ...(ngDevMode ? [{ debugName: "showAddListDialog" }] : []));
+    isAddingList = signal(false, ...(ngDevMode ? [{ debugName: "isAddingList" }] : []));
+    showLabelsDialog = signal(false, ...(ngDevMode ? [{ debugName: "showLabelsDialog" }] : []));
+    isAddingLabel = signal(false, ...(ngDevMode ? [{ debugName: "isAddingLabel" }] : []));
+    showMembersDialog = signal(false, ...(ngDevMode ? [{ debugName: "showMembersDialog" }] : []));
+    isAddingMember = signal(false, ...(ngDevMode ? [{ debugName: "isAddingMember" }] : []));
+    editingListId = signal(null, ...(ngDevMode ? [{ debugName: "editingListId" }] : []));
+    editingListNameValue = signal('', ...(ngDevMode ? [{ debugName: "editingListNameValue" }] : []));
+    showEditBoardDialog = signal(false, ...(ngDevMode ? [{ debugName: "showEditBoardDialog" }] : []));
+    isSavingBoard = signal(false, ...(ngDevMode ? [{ debugName: "isSavingBoard" }] : []));
+    newListName = '';
+    newLabelName = '';
+    newLabelColor = '#6366F1';
+    selectedMemberUser = null;
+    newMemberRole = 'MEMBER';
+    editBoardName = '';
+    editBoardDescription = '';
+    editBoardColor = '#6366F1';
+    boardColorPalette = BOARD_COLOR_PALETTE;
+    memberRoleOptions = [
+        { labelKey: 'task.manager.member.role.admin', value: 'ADMIN' },
+        { labelKey: 'task.manager.member.role.member', value: 'MEMBER' },
+        { labelKey: 'task.manager.member.role.viewer', value: 'VIEWER' },
+    ];
+    allTasksFlat = computed(() => this.state.listsWithTasks().flatMap((list) => list.tasks.map((task) => ({
+        ...task,
+        listName: list.name,
+        listColor: list.color,
+    }))), ...(ngDevMode ? [{ debugName: "allTasksFlat" }] : []));
+    listDropIds = computed(() => this.state.listsWithTasks().map((l) => l.id), ...(ngDevMode ? [{ debugName: "listDropIds" }] : []));
+    constructor() {
+        effect(() => { const id = this.boardId(); untracked(() => this.state.openBoard(id)); });
+        this.destroyRef.onDestroy(() => this.state.closeBoard());
+    }
+    openAddTask(list) {
+        this.editingTask.set(null);
+        this.activeListId.set(list.id);
+        this.showTaskForm.set(true);
+    }
+    onTaskSaved(task) {
+        this.state.addTaskOptimistic(task);
+    }
+    onDeleteTask(task) {
+        this.confirmationService.confirm({
+            message: this.translate('shared.confirm.delete.item', { name: task.title }),
+            header: this.translate('task.detail.delete'),
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                await this.state.deleteTask(task.id);
+                this.messageService.add({
+                    severity: 'success',
+                    summary: this.translate('shared.success'),
+                    detail: this.translate('task.delete.success'),
+                });
+            },
+        });
+    }
+    onEditTask(task) {
+        this.editingTask.set(task);
+        this.activeListId.set(task.listId);
+        this.showTaskForm.set(true);
+        this.state.selectTask(null);
+    }
+    getMemberName(assigneeId) {
+        return this.state.members().find((m) => m.userId === assigneeId)?.userName ?? null;
+    }
+    getMemberInitials(assigneeId) {
+        return memberInitials(this.getMemberName(assigneeId));
+    }
+    memberInitials(member) {
+        return memberInitials(member.userName);
+    }
+    memberColor(member) {
+        return memberColorFromId(member.userId);
+    }
+    memberColorById(userId) {
+        return memberColorFromId(userId);
+    }
+    roleBadgeClass(role) {
+        const map = {
+            OWNER: 'text-primary-600 dark:text-primary-400 font-semibold',
+            ADMIN: 'text-orange-600 dark:text-orange-400 font-semibold',
+            MEMBER: 'text-surface-500 dark:text-surface-400',
+            VIEWER: 'text-surface-400 dark:text-surface-500',
+        };
+        return map[role] ?? map['MEMBER'];
+    }
+    prioritySeverity = taskPrioritySeverity;
+    isOverdue = isTaskOverdue;
+    async onTaskDrop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            const task = event.container.data[event.currentIndex];
+            await this.taskApi.moveTask({
+                taskId: task.id,
+                targetListId: event.container.id,
+                position: event.currentIndex * 100,
+            });
+        }
+    }
+    async onListDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const lists = this.state.listsWithTasks().slice();
+        moveItemInArray(lists, event.previousIndex, event.currentIndex);
+        const orderedIds = lists.map((l) => l.id);
+        await this.state.reorderLists(this.boardId(), orderedIds);
+    }
+    startRenameList(list) {
+        this.editingListId.set(list.id);
+        this.editingListNameValue.set(list.name);
+    }
+    cancelRenameList() {
+        this.editingListId.set(null);
+        this.editingListNameValue.set('');
+    }
+    async saveRenameList() {
+        const id = this.editingListId();
+        const name = this.editingListNameValue().trim();
+        this.cancelRenameList();
+        if (!id || !name)
+            return;
+        await this.state.renameList(id, name);
+        this.messageService.add({
+            severity: 'success',
+            summary: this.translate('shared.success'),
+            detail: this.translate('task.list.update.success'),
+        });
+    }
+    openEditBoardDialog(board) {
+        this.editBoardName = board.name;
+        this.editBoardDescription = board.description ?? '';
+        this.editBoardColor = board.color;
+        this.showEditBoardDialog.set(true);
+    }
+    async saveBoard() {
+        const board = this.state.activeBoard();
+        if (!board || !this.editBoardName.trim())
+            return;
+        this.isSavingBoard.set(true);
+        try {
+            await this.state.updateBoard({
+                id: board.id,
+                name: this.editBoardName.trim(),
+                description: this.editBoardDescription.trim() || undefined,
+                color: this.editBoardColor,
+            });
+            this.showEditBoardDialog.set(false);
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: this.translate('task.board.update.success'),
+            });
+        }
+        finally {
+            this.isSavingBoard.set(false);
+        }
+    }
+    async addLabel() {
+        if (!this.newLabelName.trim())
+            return;
+        this.isAddingLabel.set(true);
+        try {
+            await this.state.addLabel(this.boardId(), this.newLabelName.trim(), this.newLabelColor);
+            this.newLabelName = '';
+            this.newLabelColor = '#6366F1';
+        }
+        finally {
+            this.isAddingLabel.set(false);
+        }
+    }
+    async removeLabel(labelId) {
+        await this.state.deleteLabel(labelId);
+    }
+    async addMember() {
+        if (!this.selectedMemberUser)
+            return;
+        this.isAddingMember.set(true);
+        try {
+            await this.state.addMember(this.selectedMemberUser, this.newMemberRole);
+            this.resetMemberForm();
+        }
+        finally {
+            this.isAddingMember.set(false);
+        }
+    }
+    resetMemberForm() {
+        this.selectedMemberUser = null;
+        this.newMemberRole = 'MEMBER';
+    }
+    async removeMember(userId) {
+        await this.state.removeMember(userId);
+    }
+    async addList() {
+        if (!this.newListName.trim())
+            return;
+        this.isAddingList.set(true);
+        try {
+            const position = this.state.lists().length * 100;
+            await this.listApi.insert({
+                boardId: this.boardId(),
+                name: this.newListName,
+                position,
+            });
+            await this.state.openBoard(this.boardId());
+            this.showAddListDialog.set(false);
+            this.newListName = '';
+        }
+        finally {
+            this.isAddingList.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardViewPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BoardViewPageComponent, isStandalone: true, selector: "tm-board-view-page", inputs: { boardId: { classPropertyName: "boardId", publicName: "boardId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="flex flex-col h-full">
+      <div class="flex flex-col">
+        <div class="flex items-center justify-between px-5 py-2.5 gap-4">
+          @if (state.activeBoard(); as board) {
+            <div class="flex items-center gap-2.5 min-w-0 flex-1 group">
+              <div class="flex flex-col min-w-0">
+                <div class="flex items-center gap-1.5 min-w-0">
+                  <h1 class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug">
+                    {{ board.name }}
+                  </h1>
+                  <p-button
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    [pTooltip]="'task.manager.board.edit' | translate"
+                    tooltipPosition="bottom"
+                    (onClick)="openEditBoardDialog(board)"
+                  />
+                </div>
+                @if (board.description) {
+                  <span class="text-xs text-surface-400 truncate max-w-sm hidden md:block leading-snug">
+                    {{ board.description }}
+                  </span>
+                }
+              </div>
+            </div>
+          }
+
+          <div class="flex items-center gap-1.5 flex-shrink-0">
+            @if (state.members().length > 0) {
+              <div
+                class="flex items-center -space-x-2 cursor-pointer mr-1"
+                (click)="showMembersDialog.set(true)"
+                [pTooltip]="'task.manager.board.manage.members' | translate"
+                tooltipPosition="bottom"
+              >
+                @for (member of state.members().slice(0, 4); track member.id) {
+                  <div
+                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface-100 dark:ring-surface-800"
+                    [style.background-color]="memberColor(member)"
+                  >
+                    {{ memberInitials(member) }}
+                  </div>
+                }
+                @if (state.members().length > 4) {
+                  <div
+                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[9px] font-bold text-surface-600 dark:text-surface-300 flex-shrink-0"
+                  >
+                    +{{ state.members().length - 4 }}
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+
+            <div class="flex rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700">
+              <p-button
+                icon="pi pi-th-large"
+                [pTooltip]="'task.manager.view.board' | translate"
+                tooltipPosition="bottom"
+                size="small"
+                [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
+                [outlined]="viewMode() !== 'board'"
+                styleClass="!rounded-none !border-0"
+                (onClick)="viewMode.set('board')"
+              />
+              <p-button
+                icon="pi pi-list"
+                [pTooltip]="'task.manager.view.list' | translate"
+                tooltipPosition="bottom"
+                size="small"
+                [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
+                [outlined]="viewMode() !== 'list'"
+                styleClass="!rounded-none !border-0"
+                (onClick)="viewMode.set('list')"
+              />
+            </div>
+
+            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+
+            <p-button
+              icon="pi pi-users"
+              [text]="true"
+              severity="secondary"
+              size="small"
+              styleClass="!w-8 !h-8"
+              [pTooltip]="'task.manager.board.manage.members' | translate"
+              tooltipPosition="bottom"
+              (onClick)="showMembersDialog.set(true)"
+            />
+            <p-button
+              icon="pi pi-tag"
+              [text]="true"
+              severity="secondary"
+              size="small"
+              styleClass="!w-8 !h-8"
+              [pTooltip]="'task.manager.board.manage.labels' | translate"
+              tooltipPosition="bottom"
+              (onClick)="showLabelsDialog.set(true)"
+            />
+
+            @if (viewMode() === 'board') {
+              <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+              <p-button
+                icon="pi pi-plus"
+                [label]="'task.manager.board.add.list' | translate"
+                size="small"
+                (onClick)="showAddListDialog.set(true)"
+              />
+            }
+          </div>
+        </div>
+
+        @if (state.activeBoard(); as board) {
+          <div class="h-0.5 w-full flex-shrink-0" [style.background-color]="board.color"></div>
+        }
+      </div>
+
+      @if (state.isBoardLoading()) {
+        @if (viewMode() === 'board') {
+          <div class="flex gap-4 p-6 overflow-x-auto">
+            @for (i of [1, 2, 3]; track i) {
+              <div class="flex-shrink-0 w-72">
+                <p-skeleton height="36px" class="mb-3" />
+                @for (j of [1, 2, 3]; track j) {
+                  <p-skeleton height="90px" class="mb-2" />
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="p-6">
+            @for (i of [1, 2, 3, 4, 5]; track i) {
+              <p-skeleton height="48px" class="mb-2" />
+            }
+          </div>
+        }
+
+      } @else if (viewMode() === 'board') {
+        <div
+          class="flex gap-4 p-5 overflow-x-auto flex-1"
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListData]="state.listsWithTasks()"
+          (cdkDropListDropped)="onListDrop($event)"
+        >
+          @for (list of state.listsWithTasks(); track list.id) {
+            <div
+              cdkDrag
+              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start"
+            >
+              <div
+                class="flex items-center gap-1 px-2 py-2.5 rounded-t-xl border border-b-0 border-surface-200 dark:border-surface-700"
+                [style.border-top]="'3px solid ' + list.color"
+              >
+                <i
+                  cdkDragHandle
+                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
+                ></i>
+
+                <div class="flex items-center gap-2 min-w-0 flex-1">
+                  @if (editingListId() === list.id) {
+                    <input
+                      pInputText
+                      class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
+                      [ngModel]="editingListNameValue()"
+                      (ngModelChange)="editingListNameValue.set($event)"
+                      (keydown.enter)="saveRenameList()"
+                      (keydown.escape)="cancelRenameList()"
+                      (blur)="cancelRenameList()"
+                      (click)="$event.stopPropagation()"
+                      autofocus
+                    />
+                  } @else {
+                    <span class="font-semibold text-sm truncate">{{ list.name }}</span>
+                    <span
+                      class="text-[11px] font-semibold px-1.5 py-0.5 rounded-full text-white flex-shrink-0"
+                      [style.background-color]="list.color"
+                    >
+                      {{ list.tasks.length }}
+                    </span>
+                  }
+                </div>
+
+                @if (editingListId() === list.id) {
+                  <p-button
+                    icon="pi pi-check"
+                    [text]="true"
+                    size="small"
+                    severity="success"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="saveRenameList(); $event.stopPropagation()"
+                  />
+                  <p-button
+                    icon="pi pi-times"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="cancelRenameList(); $event.stopPropagation()"
+                  />
+                } @else {
+                  <p-button
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    [pTooltip]="'task.manager.list.rename' | translate"
+                    tooltipPosition="bottom"
+                    (click)="startRenameList(list); $event.stopPropagation()"
+                  />
+                }
+              </div>
+
+              <div
+                cdkDropList
+                [id]="list.id"
+                [cdkDropListData]="list.tasks"
+                [cdkDropListConnectedTo]="listDropIds()"
+                (cdkDropListDropped)="onTaskDrop($event)"
+                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px] border border-t-0 border-b-0 border-surface-200 dark:border-surface-700"
+              >
+                @for (task of list.tasks; track task.id) {
+                  <div cdkDrag>
+                    <tm-task-card
+                      [task]="task"
+                      (cardClick)="state.selectTask($event)"
+                      (editClick)="onEditTask($event)"
+                      (deleteClick)="onDeleteTask($event)"
+                    />
+                  </div>
+                }
+                @if (list.tasks.length === 0) {
+                  <div
+                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg"
+                  >
+                    <span class="text-xs text-surface-400">{{
+                      'task.manager.board.drop.tasks.here' | translate
+                    }}</span>
+                  </div>
+                }
+              </div>
+
+              <div
+                class="rounded-b-xl border border-t-0 border-surface-200 dark:border-surface-700 p-1.5"
+              >
+                <p-button
+                  icon="pi pi-plus"
+                  [label]="'task.manager.board.add.task' | translate"
+                  severity="secondary"
+                  size="small"
+                  styleClass="w-full !justify-start"
+                  (onClick)="openAddTask(list)"
+                />
+              </div>
+            </div>
+          }
+
+          @if (state.listsWithTasks().length === 0) {
+            <div class="flex-1 flex items-center justify-center">
+              <div class="text-center text-surface-400">
+                <div
+                  class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"
+                >
+                  <i
+                    class="pi pi-list text-3xl text-surface-300 dark:text-surface-600"
+                  ></i>
+                </div>
+                <p class="font-medium text-surface-500">
+                  {{ 'task.manager.board.list.empty' | translate }}
+                </p>
+                <p-button
+                  icon="pi pi-plus"
+                  [label]="'task.manager.board.add.list' | translate"
+                  severity="secondary"
+                  size="small"
+                  class="mt-3"
+                  (onClick)="showAddListDialog.set(true)"
+                />
+              </div>
+            </div>
+          }
+        </div>
+
+      } @else {
+        <div class="p-4 sm:p-6 flex-1 overflow-auto">
+          <div class="card">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-table
+                [value]="allTasksFlat()"
+                [paginator]="allTasksFlat().length > 20"
+                [rows]="20"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [scrollable]="true"
+                class="p-datatable-sm"
+                [tableStyle]="{ 'min-width': '700px' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th pSortableColumn="title" class="min-w-[240px]">
+                      {{ 'task.manager.table.title' | translate }}
+                      <p-sortIcon field="title" />
+                    </th>
+                    <th pSortableColumn="listName" class="w-40">
+                      {{ 'task.manager.table.list' | translate }}
+                      <p-sortIcon field="listName" />
+                    </th>
+                    <th pSortableColumn="priority" class="w-32">
+                      {{ 'task.manager.table.priority' | translate }}
+                      <p-sortIcon field="priority" />
+                    </th>
+                    <th class="w-36">
+                      {{ 'task.manager.table.assignee' | translate }}
+                    </th>
+                    <th pSortableColumn="dueDate" class="w-32">
+                      {{ 'task.manager.table.due.date' | translate }}
+                      <p-sortIcon field="dueDate" />
+                    </th>
+                    <th class="w-[100px]">{{ 'shared.actions' | translate }}</th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-task>
+                  <tr>
+                    <td>
+                      <span
+                        class="font-medium text-sm cursor-pointer hover:text-primary-500 transition-colors"
+                        (click)="state.selectTask(task)"
+                      >{{ task.title }}</span>
+                    </td>
+                    <td>
+                      <span class="inline-flex items-center gap-1.5 text-sm">
+                        <span
+                          class="w-2 h-2 rounded-full flex-shrink-0"
+                          [style.background-color]="task.listColor"
+                        ></span>
+                        {{ task.listName }}
+                      </span>
+                    </td>
+                    <td>
+                      <p-tag
+                        [value]="task.priority"
+                        [severity]="prioritySeverity(task.priority)"
+                      />
+                    </td>
+                    <td>
+                      @if (task.assignees?.length) {
+                        <div class="flex items-center -space-x-1.5">
+                          @for (a of task.assignees!.slice(0, 3); track a.userId) {
+                            <span
+                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+                              [style.background-color]="memberColorById(a.userId)"
+                              [pTooltip]="a.userName ?? ''"
+                            >
+                              {{ getMemberInitials(a.userId) }}
+                            </span>
+                          }
+                          @if (task.assignees!.length > 3) {
+                            <span
+                              class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[10px] font-bold text-surface-600 ring-2 ring-white dark:ring-surface-800 flex-shrink-0"
+                            >
+                              +{{ task.assignees!.length - 3 }}
+                            </span>
+                          }
+                        </div>
+                      } @else {
+                        <span class="text-muted-color text-sm">—</span>
+                      }
+                    </td>
+                    <td>
+                      @if (task.dueDate) {
+                        <span
+                          class="text-sm"
+                          [class.text-red-500]="isOverdue(task.dueDate)"
+                        >
+                          {{ task.dueDate | date: 'MMM d, y' }}
+                        </span>
+                      } @else {
+                        <span class="text-muted-color text-sm">—</span>
+                      }
+                    </td>
+                    <td>
+                      <div class="flex gap-1">
+                        <p-button
+                          icon="pi pi-pencil"
+                          [text]="true"
+                          severity="secondary"
+                          size="small"
+                          [pTooltip]="'shared.edit' | translate"
+                          (onClick)="onEditTask(task)"
+                        />
+                        <p-button
+                          icon="pi pi-trash"
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          [pTooltip]="'shared.delete' | translate"
+                          (onClick)="onDeleteTask(task)"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="6" class="text-center text-muted-color py-8">
+                      <i class="pi pi-inbox text-4xl block mb-3"></i>
+                      {{ 'task.manager.table.empty' | translate }}
+                    </td>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+
+    <tm-task-form-dialog
+      [(visible)]="showTaskForm"
+      [task]="editingTask()"
+      [boardId]="boardId()"
+      [listId]="activeListId()"
+      [members]="state.members()"
+      [labels]="state.labels()"
+      (saved)="onTaskSaved($event)"
+    />
+
+    <tm-task-detail-panel
+      [task]="state.selectedTask()"
+      (closePanel)="state.selectTask(null)"
+      (editTask)="onEditTask($event)"
+    />
+
+    <p-dialog
+      [header]="'task.manager.label.manage.title' | translate"
+      [(visible)]="showLabelsDialog"
+      [modal]="true"
+      [style]="{ width: '420px' }"
+      (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex gap-2 items-end">
+          <div class="flex flex-col gap-1 flex-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.label.name.label' | translate
+            }}</label>
+            <input
+              pInputText
+              [(ngModel)]="newLabelName"
+              [placeholder]="'task.manager.label.name.placeholder' | translate"
+            />
+          </div>
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.label.color.label' | translate
+            }}</label>
+            <input
+              type="color"
+              [(ngModel)]="newLabelColor"
+              class="w-10 h-10 rounded cursor-pointer border border-surface-300"
+            />
+          </div>
+          <p-button
+            icon="pi pi-plus"
+            [label]="'task.manager.label.add' | translate"
+            size="small"
+            [loading]="isAddingLabel()"
+            (onClick)="addLabel()"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2 max-h-64 overflow-y-auto">
+          @if (state.labels().length === 0) {
+            <p class="text-sm text-surface-400 text-center py-4">
+              {{ 'task.manager.label.no.labels' | translate }}
+            </p>
+          }
+          @for (label of state.labels(); track label.id) {
+            <div
+              class="flex items-center justify-between px-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700"
+            >
+              <div class="flex items-center gap-2">
+                <span
+                  class="w-4 h-4 rounded-full flex-shrink-0"
+                  [style.background-color]="label.color"
+                ></span>
+                <span class="text-sm font-medium">{{ label.name }}</span>
+              </div>
+              <p-button
+                icon="pi pi-trash"
+                severity="danger"
+                size="small"
+                [text]="true"
+                (onClick)="removeLabel(label.id)"
+              />
+            </div>
+          }
+        </div>
+      </div>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.member.manage.title' | translate"
+      [(visible)]="showMembersDialog"
+      [modal]="true"
+      [style]="{ width: '480px' }"
+      (onHide)="resetMemberForm()"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-3">
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.member.user.label' | translate
+            }}</label>
+            <lib-user-select
+              [(value)]="selectedMemberUser"
+              [isEditMode]="true"
+              [placeHolder]="'task.manager.member.user.placeholder' | translate"
+            />
+          </div>
+
+          <div class="flex gap-2 items-end">
+            <div class="flex flex-col gap-1 flex-1">
+              <label class="text-sm font-medium">{{
+                'task.manager.member.role.label' | translate
+              }}</label>
+              <p-select
+                [(ngModel)]="newMemberRole"
+                [options]="memberRoleOptions"
+                optionValue="value"
+                [placeholder]="
+                  'task.manager.member.role.placeholder' | translate
+                "
+                class="w-full"
+                appendTo="body"
+              >
+                <ng-template #selectedItem let-opt>
+                  {{ opt.labelKey | translate }}
+                </ng-template>
+                <ng-template #item let-opt>
+                  {{ opt.labelKey | translate }}
+                </ng-template>
+              </p-select>
+            </div>
+            <p-button
+              icon="pi pi-plus"
+              [label]="'task.manager.member.add' | translate"
+              size="small"
+              [loading]="isAddingMember()"
+              [disabled]="!selectedMemberUser"
+              (onClick)="addMember()"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2 max-h-72 overflow-y-auto">
+          @if (state.members().length === 0) {
+            <p class="text-sm text-surface-400 text-center py-4">
+              {{ 'task.manager.member.no.members' | translate }}
+            </p>
+          }
+          @for (member of state.members(); track member.id) {
+            <div
+              class="flex items-center justify-between px-3 py-2.5 rounded-lg border border-surface-200 dark:border-surface-700"
+            >
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
+                  [style.background-color]="memberColor(member)"
+                >
+                  {{ memberInitials(member) }}
+                </div>
+                <div>
+                  <div class="text-sm font-medium ">
+                    {{ member.userName ?? member.userId }}
+                  </div>
+                  @if (member.userEmail) {
+                    <div class="text-xs text-surface-400">
+                      {{ member.userEmail }}
+                    </div>
+                  }
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <span
+                  class="text-[10px] font-semibold px-2 py-0.5 rounded-full"
+                  [class]="roleBadgeClass(member.role)"
+                >
+                  {{ ('task.manager.member.role.' + member.role.toLowerCase()) | translate }}
+                </span>
+                @if (member.role !== 'OWNER') {
+                  <p-button
+                    icon="pi pi-trash"
+                    severity="danger"
+                    size="small"
+                    [text]="true"
+                    (onClick)="removeMember(member.userId)"
+                  />
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.list.new' | translate"
+      [(visible)]="showAddListDialog"
+      [modal]="true"
+      [style]="{ width: '360px' }"
+      (onHide)="newListName = ''"
+    >
+      <div class="flex flex-col gap-2 py-2">
+        <label class="text-sm font-medium">
+          {{ 'task.manager.list.name.label' | translate }}
+          <span class="text-red-500">*</span>
+        </label>
+        <input
+          pInputText
+          [(ngModel)]="newListName"
+          [placeholder]="'task.manager.list.name.placeholder' | translate"
+        />
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="showAddListDialog.set(false)"
+          />
+          <p-button
+            [label]="'shared.create' | translate"
+            [loading]="isAddingList()"
+            (onClick)="addList()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.board.edit' | translate"
+      [(visible)]="showEditBoardDialog"
+      [modal]="true"
+      [style]="{ width: '420px' }"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">
+            {{ 'task.manager.board.name.label' | translate }}
+            <span class="text-red-500">*</span>
+          </label>
+          <input pInputText [(ngModel)]="editBoardName" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.description.label' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="editBoardDescription"
+            [rows]="3"
+            [placeholder]="'task.manager.board.description.placeholder' | translate"
+          ></textarea>
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.color.label' | translate
+          }}</label>
+          <div class="flex items-center gap-3">
+            <input
+              type="color"
+              [(ngModel)]="editBoardColor"
+              class="w-10 h-10 rounded cursor-pointer border border-surface-300"
+            />
+            <div class="flex gap-2 flex-wrap">
+              @for (color of boardColorPalette; track color) {
+                <button
+                  type="button"
+                  class="w-6 h-6 rounded-full border-2 transition-transform hover:scale-110"
+                  [style.background-color]="color"
+                  [class.border-surface-900]="editBoardColor === color"
+                  [class.border-transparent]="editBoardColor !== color"
+                  (click)="editBoardColor = color"
+                ></button>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="showEditBoardDialog.set(false)"
+          />
+          <p-button
+            [label]="'shared.save' | translate"
+            [loading]="isSavingBoard()"
+            [disabled]="!editBoardName.trim()"
+            (onClick)="saveBoard()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i1$1.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: i9$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: TaskCardComponent, selector: "tm-task-card", inputs: ["task"], outputs: ["cardClick", "editClick", "deleteClick"] }, { kind: "component", type: TaskFormDialogComponent, selector: "tm-task-form-dialog", inputs: ["visible", "task", "boardId", "listId", "members", "labels"], outputs: ["visibleChange", "saved"] }, { kind: "component", type: TaskDetailPanelComponent, selector: "tm-task-detail-panel", inputs: ["task"], outputs: ["closePanel", "editTask"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["showClear", "value"], outputs: ["valueChange", "userSelected"] }, { kind: "pipe", type: i9$1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BoardViewPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tm-board-view-page',
+                    imports: [
+                        DragDropModule,
+                        AngularModule,
+                        PrimeModule,
+                        TaskCardComponent,
+                        TaskFormDialogComponent,
+                        TaskDetailPanelComponent,
+                        TranslatePipe,
+                        UserSelectComponent,
+                    ],
+                    template: `
+    <div class="flex flex-col h-full">
+      <div class="flex flex-col">
+        <div class="flex items-center justify-between px-5 py-2.5 gap-4">
+          @if (state.activeBoard(); as board) {
+            <div class="flex items-center gap-2.5 min-w-0 flex-1 group">
+              <div class="flex flex-col min-w-0">
+                <div class="flex items-center gap-1.5 min-w-0">
+                  <h1 class="text-base font-bold text-surface-900 dark:text-surface-0 truncate leading-snug">
+                    {{ board.name }}
+                  </h1>
+                  <p-button
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    [pTooltip]="'task.manager.board.edit' | translate"
+                    tooltipPosition="bottom"
+                    (onClick)="openEditBoardDialog(board)"
+                  />
+                </div>
+                @if (board.description) {
+                  <span class="text-xs text-surface-400 truncate max-w-sm hidden md:block leading-snug">
+                    {{ board.description }}
+                  </span>
+                }
+              </div>
+            </div>
+          }
+
+          <div class="flex items-center gap-1.5 flex-shrink-0">
+            @if (state.members().length > 0) {
+              <div
+                class="flex items-center -space-x-2 cursor-pointer mr-1"
+                (click)="showMembersDialog.set(true)"
+                [pTooltip]="'task.manager.board.manage.members' | translate"
+                tooltipPosition="bottom"
+              >
+                @for (member of state.members().slice(0, 4); track member.id) {
+                  <div
+                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 flex items-center justify-center text-[9px] font-bold text-white flex-shrink-0 ring-1 ring-surface-100 dark:ring-surface-800"
+                    [style.background-color]="memberColor(member)"
+                  >
+                    {{ memberInitials(member) }}
+                  </div>
+                }
+                @if (state.members().length > 4) {
+                  <div
+                    class="w-6 h-6 rounded-full border-2 border-white dark:border-surface-900 bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[9px] font-bold text-surface-600 dark:text-surface-300 flex-shrink-0"
+                  >
+                    +{{ state.members().length - 4 }}
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+
+            <div class="flex rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700">
+              <p-button
+                icon="pi pi-th-large"
+                [pTooltip]="'task.manager.view.board' | translate"
+                tooltipPosition="bottom"
+                size="small"
+                [severity]="viewMode() === 'board' ? 'primary' : 'secondary'"
+                [outlined]="viewMode() !== 'board'"
+                styleClass="!rounded-none !border-0"
+                (onClick)="viewMode.set('board')"
+              />
+              <p-button
+                icon="pi pi-list"
+                [pTooltip]="'task.manager.view.list' | translate"
+                tooltipPosition="bottom"
+                size="small"
+                [severity]="viewMode() === 'list' ? 'primary' : 'secondary'"
+                [outlined]="viewMode() !== 'list'"
+                styleClass="!rounded-none !border-0"
+                (onClick)="viewMode.set('list')"
+              />
+            </div>
+
+            <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+
+            <p-button
+              icon="pi pi-users"
+              [text]="true"
+              severity="secondary"
+              size="small"
+              styleClass="!w-8 !h-8"
+              [pTooltip]="'task.manager.board.manage.members' | translate"
+              tooltipPosition="bottom"
+              (onClick)="showMembersDialog.set(true)"
+            />
+            <p-button
+              icon="pi pi-tag"
+              [text]="true"
+              severity="secondary"
+              size="small"
+              styleClass="!w-8 !h-8"
+              [pTooltip]="'task.manager.board.manage.labels' | translate"
+              tooltipPosition="bottom"
+              (onClick)="showLabelsDialog.set(true)"
+            />
+
+            @if (viewMode() === 'board') {
+              <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-0.5"></div>
+              <p-button
+                icon="pi pi-plus"
+                [label]="'task.manager.board.add.list' | translate"
+                size="small"
+                (onClick)="showAddListDialog.set(true)"
+              />
+            }
+          </div>
+        </div>
+
+        @if (state.activeBoard(); as board) {
+          <div class="h-0.5 w-full flex-shrink-0" [style.background-color]="board.color"></div>
+        }
+      </div>
+
+      @if (state.isBoardLoading()) {
+        @if (viewMode() === 'board') {
+          <div class="flex gap-4 p-6 overflow-x-auto">
+            @for (i of [1, 2, 3]; track i) {
+              <div class="flex-shrink-0 w-72">
+                <p-skeleton height="36px" class="mb-3" />
+                @for (j of [1, 2, 3]; track j) {
+                  <p-skeleton height="90px" class="mb-2" />
+                }
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="p-6">
+            @for (i of [1, 2, 3, 4, 5]; track i) {
+              <p-skeleton height="48px" class="mb-2" />
+            }
+          </div>
+        }
+
+      } @else if (viewMode() === 'board') {
+        <div
+          class="flex gap-4 p-5 overflow-x-auto flex-1"
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListData]="state.listsWithTasks()"
+          (cdkDropListDropped)="onListDrop($event)"
+        >
+          @for (list of state.listsWithTasks(); track list.id) {
+            <div
+              cdkDrag
+              class="flex-shrink-0 w-72 flex flex-col max-h-[calc(100vh-140px)] self-start"
+            >
+              <div
+                class="flex items-center gap-1 px-2 py-2.5 rounded-t-xl border border-b-0 border-surface-200 dark:border-surface-700"
+                [style.border-top]="'3px solid ' + list.color"
+              >
+                <i
+                  cdkDragHandle
+                  class="pi pi-bars text-surface-300 dark:text-surface-600 text-xs cursor-grab flex-shrink-0 px-1"
+                ></i>
+
+                <div class="flex items-center gap-2 min-w-0 flex-1">
+                  @if (editingListId() === list.id) {
+                    <input
+                      pInputText
+                      class="text-sm font-semibold !h-6 !py-0 !px-1 w-full"
+                      [ngModel]="editingListNameValue()"
+                      (ngModelChange)="editingListNameValue.set($event)"
+                      (keydown.enter)="saveRenameList()"
+                      (keydown.escape)="cancelRenameList()"
+                      (blur)="cancelRenameList()"
+                      (click)="$event.stopPropagation()"
+                      autofocus
+                    />
+                  } @else {
+                    <span class="font-semibold text-sm truncate">{{ list.name }}</span>
+                    <span
+                      class="text-[11px] font-semibold px-1.5 py-0.5 rounded-full text-white flex-shrink-0"
+                      [style.background-color]="list.color"
+                    >
+                      {{ list.tasks.length }}
+                    </span>
+                  }
+                </div>
+
+                @if (editingListId() === list.id) {
+                  <p-button
+                    icon="pi pi-check"
+                    [text]="true"
+                    size="small"
+                    severity="success"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="saveRenameList(); $event.stopPropagation()"
+                  />
+                  <p-button
+                    icon="pi pi-times"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    (mousedown)="$event.preventDefault()"
+                    (click)="cancelRenameList(); $event.stopPropagation()"
+                  />
+                } @else {
+                  <p-button
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    size="small"
+                    severity="secondary"
+                    styleClass="!w-6 !h-6 flex-shrink-0"
+                    [pTooltip]="'task.manager.list.rename' | translate"
+                    tooltipPosition="bottom"
+                    (click)="startRenameList(list); $event.stopPropagation()"
+                  />
+                }
+              </div>
+
+              <div
+                cdkDropList
+                [id]="list.id"
+                [cdkDropListData]="list.tasks"
+                [cdkDropListConnectedTo]="listDropIds()"
+                (cdkDropListDropped)="onTaskDrop($event)"
+                class="flex flex-col gap-2 p-2 overflow-y-auto flex-1 min-h-[60px] border border-t-0 border-b-0 border-surface-200 dark:border-surface-700"
+              >
+                @for (task of list.tasks; track task.id) {
+                  <div cdkDrag>
+                    <tm-task-card
+                      [task]="task"
+                      (cardClick)="state.selectTask($event)"
+                      (editClick)="onEditTask($event)"
+                      (deleteClick)="onDeleteTask($event)"
+                    />
+                  </div>
+                }
+                @if (list.tasks.length === 0) {
+                  <div
+                    class="flex items-center justify-center h-14 border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-lg"
+                  >
+                    <span class="text-xs text-surface-400">{{
+                      'task.manager.board.drop.tasks.here' | translate
+                    }}</span>
+                  </div>
+                }
+              </div>
+
+              <div
+                class="rounded-b-xl border border-t-0 border-surface-200 dark:border-surface-700 p-1.5"
+              >
+                <p-button
+                  icon="pi pi-plus"
+                  [label]="'task.manager.board.add.task' | translate"
+                  severity="secondary"
+                  size="small"
+                  styleClass="w-full !justify-start"
+                  (onClick)="openAddTask(list)"
+                />
+              </div>
+            </div>
+          }
+
+          @if (state.listsWithTasks().length === 0) {
+            <div class="flex-1 flex items-center justify-center">
+              <div class="text-center text-surface-400">
+                <div
+                  class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"
+                >
+                  <i
+                    class="pi pi-list text-3xl text-surface-300 dark:text-surface-600"
+                  ></i>
+                </div>
+                <p class="font-medium text-surface-500">
+                  {{ 'task.manager.board.list.empty' | translate }}
+                </p>
+                <p-button
+                  icon="pi pi-plus"
+                  [label]="'task.manager.board.add.list' | translate"
+                  severity="secondary"
+                  size="small"
+                  class="mt-3"
+                  (onClick)="showAddListDialog.set(true)"
+                />
+              </div>
+            </div>
+          }
+        </div>
+
+      } @else {
+        <div class="p-4 sm:p-6 flex-1 overflow-auto">
+          <div class="card">
+            <div class="overflow-x-auto -mx-4 sm:mx-0">
+              <p-table
+                [value]="allTasksFlat()"
+                [paginator]="allTasksFlat().length > 20"
+                [rows]="20"
+                [rowsPerPageOptions]="[10, 20, 50]"
+                [scrollable]="true"
+                class="p-datatable-sm"
+                [tableStyle]="{ 'min-width': '700px' }"
+              >
+                <ng-template #header>
+                  <tr>
+                    <th pSortableColumn="title" class="min-w-[240px]">
+                      {{ 'task.manager.table.title' | translate }}
+                      <p-sortIcon field="title" />
+                    </th>
+                    <th pSortableColumn="listName" class="w-40">
+                      {{ 'task.manager.table.list' | translate }}
+                      <p-sortIcon field="listName" />
+                    </th>
+                    <th pSortableColumn="priority" class="w-32">
+                      {{ 'task.manager.table.priority' | translate }}
+                      <p-sortIcon field="priority" />
+                    </th>
+                    <th class="w-36">
+                      {{ 'task.manager.table.assignee' | translate }}
+                    </th>
+                    <th pSortableColumn="dueDate" class="w-32">
+                      {{ 'task.manager.table.due.date' | translate }}
+                      <p-sortIcon field="dueDate" />
+                    </th>
+                    <th class="w-[100px]">{{ 'shared.actions' | translate }}</th>
+                  </tr>
+                </ng-template>
+                <ng-template #body let-task>
+                  <tr>
+                    <td>
+                      <span
+                        class="font-medium text-sm cursor-pointer hover:text-primary-500 transition-colors"
+                        (click)="state.selectTask(task)"
+                      >{{ task.title }}</span>
+                    </td>
+                    <td>
+                      <span class="inline-flex items-center gap-1.5 text-sm">
+                        <span
+                          class="w-2 h-2 rounded-full flex-shrink-0"
+                          [style.background-color]="task.listColor"
+                        ></span>
+                        {{ task.listName }}
+                      </span>
+                    </td>
+                    <td>
+                      <p-tag
+                        [value]="task.priority"
+                        [severity]="prioritySeverity(task.priority)"
+                      />
+                    </td>
+                    <td>
+                      @if (task.assignees?.length) {
+                        <div class="flex items-center -space-x-1.5">
+                          @for (a of task.assignees!.slice(0, 3); track a.userId) {
+                            <span
+                              class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white flex-shrink-0 ring-2 ring-white dark:ring-surface-800"
+                              [style.background-color]="memberColorById(a.userId)"
+                              [pTooltip]="a.userName ?? ''"
+                            >
+                              {{ getMemberInitials(a.userId) }}
+                            </span>
+                          }
+                          @if (task.assignees!.length > 3) {
+                            <span
+                              class="w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center text-[10px] font-bold text-surface-600 ring-2 ring-white dark:ring-surface-800 flex-shrink-0"
+                            >
+                              +{{ task.assignees!.length - 3 }}
+                            </span>
+                          }
+                        </div>
+                      } @else {
+                        <span class="text-muted-color text-sm">—</span>
+                      }
+                    </td>
+                    <td>
+                      @if (task.dueDate) {
+                        <span
+                          class="text-sm"
+                          [class.text-red-500]="isOverdue(task.dueDate)"
+                        >
+                          {{ task.dueDate | date: 'MMM d, y' }}
+                        </span>
+                      } @else {
+                        <span class="text-muted-color text-sm">—</span>
+                      }
+                    </td>
+                    <td>
+                      <div class="flex gap-1">
+                        <p-button
+                          icon="pi pi-pencil"
+                          [text]="true"
+                          severity="secondary"
+                          size="small"
+                          [pTooltip]="'shared.edit' | translate"
+                          (onClick)="onEditTask(task)"
+                        />
+                        <p-button
+                          icon="pi pi-trash"
+                          [text]="true"
+                          severity="danger"
+                          size="small"
+                          [pTooltip]="'shared.delete' | translate"
+                          (onClick)="onDeleteTask(task)"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                </ng-template>
+                <ng-template #emptymessage>
+                  <tr>
+                    <td colspan="6" class="text-center text-muted-color py-8">
+                      <i class="pi pi-inbox text-4xl block mb-3"></i>
+                      {{ 'task.manager.table.empty' | translate }}
+                    </td>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+
+    <tm-task-form-dialog
+      [(visible)]="showTaskForm"
+      [task]="editingTask()"
+      [boardId]="boardId()"
+      [listId]="activeListId()"
+      [members]="state.members()"
+      [labels]="state.labels()"
+      (saved)="onTaskSaved($event)"
+    />
+
+    <tm-task-detail-panel
+      [task]="state.selectedTask()"
+      (closePanel)="state.selectTask(null)"
+      (editTask)="onEditTask($event)"
+    />
+
+    <p-dialog
+      [header]="'task.manager.label.manage.title' | translate"
+      [(visible)]="showLabelsDialog"
+      [modal]="true"
+      [style]="{ width: '420px' }"
+      (onHide)="newLabelName = ''; newLabelColor = '#6366F1'"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex gap-2 items-end">
+          <div class="flex flex-col gap-1 flex-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.label.name.label' | translate
+            }}</label>
+            <input
+              pInputText
+              [(ngModel)]="newLabelName"
+              [placeholder]="'task.manager.label.name.placeholder' | translate"
+            />
+          </div>
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.label.color.label' | translate
+            }}</label>
+            <input
+              type="color"
+              [(ngModel)]="newLabelColor"
+              class="w-10 h-10 rounded cursor-pointer border border-surface-300"
+            />
+          </div>
+          <p-button
+            icon="pi pi-plus"
+            [label]="'task.manager.label.add' | translate"
+            size="small"
+            [loading]="isAddingLabel()"
+            (onClick)="addLabel()"
+          />
+        </div>
+
+        <div class="flex flex-col gap-2 max-h-64 overflow-y-auto">
+          @if (state.labels().length === 0) {
+            <p class="text-sm text-surface-400 text-center py-4">
+              {{ 'task.manager.label.no.labels' | translate }}
+            </p>
+          }
+          @for (label of state.labels(); track label.id) {
+            <div
+              class="flex items-center justify-between px-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700"
+            >
+              <div class="flex items-center gap-2">
+                <span
+                  class="w-4 h-4 rounded-full flex-shrink-0"
+                  [style.background-color]="label.color"
+                ></span>
+                <span class="text-sm font-medium">{{ label.name }}</span>
+              </div>
+              <p-button
+                icon="pi pi-trash"
+                severity="danger"
+                size="small"
+                [text]="true"
+                (onClick)="removeLabel(label.id)"
+              />
+            </div>
+          }
+        </div>
+      </div>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.member.manage.title' | translate"
+      [(visible)]="showMembersDialog"
+      [modal]="true"
+      [style]="{ width: '480px' }"
+      (onHide)="resetMemberForm()"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-3">
+          <div class="flex flex-col gap-1">
+            <label class="text-sm font-medium">{{
+              'task.manager.member.user.label' | translate
+            }}</label>
+            <lib-user-select
+              [(value)]="selectedMemberUser"
+              [isEditMode]="true"
+              [placeHolder]="'task.manager.member.user.placeholder' | translate"
+            />
+          </div>
+
+          <div class="flex gap-2 items-end">
+            <div class="flex flex-col gap-1 flex-1">
+              <label class="text-sm font-medium">{{
+                'task.manager.member.role.label' | translate
+              }}</label>
+              <p-select
+                [(ngModel)]="newMemberRole"
+                [options]="memberRoleOptions"
+                optionValue="value"
+                [placeholder]="
+                  'task.manager.member.role.placeholder' | translate
+                "
+                class="w-full"
+                appendTo="body"
+              >
+                <ng-template #selectedItem let-opt>
+                  {{ opt.labelKey | translate }}
+                </ng-template>
+                <ng-template #item let-opt>
+                  {{ opt.labelKey | translate }}
+                </ng-template>
+              </p-select>
+            </div>
+            <p-button
+              icon="pi pi-plus"
+              [label]="'task.manager.member.add' | translate"
+              size="small"
+              [loading]="isAddingMember()"
+              [disabled]="!selectedMemberUser"
+              (onClick)="addMember()"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2 max-h-72 overflow-y-auto">
+          @if (state.members().length === 0) {
+            <p class="text-sm text-surface-400 text-center py-4">
+              {{ 'task.manager.member.no.members' | translate }}
+            </p>
+          }
+          @for (member of state.members(); track member.id) {
+            <div
+              class="flex items-center justify-between px-3 py-2.5 rounded-lg border border-surface-200 dark:border-surface-700"
+            >
+              <div class="flex items-center gap-3">
+                <div
+                  class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white flex-shrink-0"
+                  [style.background-color]="memberColor(member)"
+                >
+                  {{ memberInitials(member) }}
+                </div>
+                <div>
+                  <div class="text-sm font-medium ">
+                    {{ member.userName ?? member.userId }}
+                  </div>
+                  @if (member.userEmail) {
+                    <div class="text-xs text-surface-400">
+                      {{ member.userEmail }}
+                    </div>
+                  }
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <span
+                  class="text-[10px] font-semibold px-2 py-0.5 rounded-full"
+                  [class]="roleBadgeClass(member.role)"
+                >
+                  {{ ('task.manager.member.role.' + member.role.toLowerCase()) | translate }}
+                </span>
+                @if (member.role !== 'OWNER') {
+                  <p-button
+                    icon="pi pi-trash"
+                    severity="danger"
+                    size="small"
+                    [text]="true"
+                    (onClick)="removeMember(member.userId)"
+                  />
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.list.new' | translate"
+      [(visible)]="showAddListDialog"
+      [modal]="true"
+      [style]="{ width: '360px' }"
+      (onHide)="newListName = ''"
+    >
+      <div class="flex flex-col gap-2 py-2">
+        <label class="text-sm font-medium">
+          {{ 'task.manager.list.name.label' | translate }}
+          <span class="text-red-500">*</span>
+        </label>
+        <input
+          pInputText
+          [(ngModel)]="newListName"
+          [placeholder]="'task.manager.list.name.placeholder' | translate"
+        />
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="showAddListDialog.set(false)"
+          />
+          <p-button
+            [label]="'shared.create' | translate"
+            [loading]="isAddingList()"
+            (onClick)="addList()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+
+    <p-dialog
+      [header]="'task.manager.board.edit' | translate"
+      [(visible)]="showEditBoardDialog"
+      [modal]="true"
+      [style]="{ width: '420px' }"
+    >
+      <div class="flex flex-col gap-4 py-2">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">
+            {{ 'task.manager.board.name.label' | translate }}
+            <span class="text-red-500">*</span>
+          </label>
+          <input pInputText [(ngModel)]="editBoardName" />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.description.label' | translate
+          }}</label>
+          <textarea
+            pTextarea
+            [(ngModel)]="editBoardDescription"
+            [rows]="3"
+            [placeholder]="'task.manager.board.description.placeholder' | translate"
+          ></textarea>
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium">{{
+            'task.manager.board.color.label' | translate
+          }}</label>
+          <div class="flex items-center gap-3">
+            <input
+              type="color"
+              [(ngModel)]="editBoardColor"
+              class="w-10 h-10 rounded cursor-pointer border border-surface-300"
+            />
+            <div class="flex gap-2 flex-wrap">
+              @for (color of boardColorPalette; track color) {
+                <button
+                  type="button"
+                  class="w-6 h-6 rounded-full border-2 transition-transform hover:scale-110"
+                  [style.background-color]="color"
+                  [class.border-surface-900]="editBoardColor === color"
+                  [class.border-transparent]="editBoardColor !== color"
+                  (click)="editBoardColor = color"
+                ></button>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+      <ng-template pTemplate="footer">
+        <div class="flex justify-end gap-2">
+          <p-button
+            [label]="'shared.cancel' | translate"
+            severity="secondary"
+            (onClick)="showEditBoardDialog.set(false)"
+          />
+          <p-button
+            [label]="'shared.save' | translate"
+            [loading]="isSavingBoard()"
+            [disabled]="!editBoardName.trim()"
+            (onClick)="saveBoard()"
+          />
+        </div>
+      </ng-template>
+    </p-dialog>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { boardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardId", required: true }] }] } });
+
+var boardViewPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    BoardViewPageComponent: BoardViewPageComponent
+});
+
+const TASK_MANAGER_MESSAGES = {
+    // Board API messages (keys must match NestJS message-keys.ts)
+    'task.board.not.found': 'Board not found',
+    'task.board.create.success': 'Board created successfully',
+    'task.board.create.many.success': 'Boards created successfully',
+    'task.board.get.success': 'Board retrieved successfully',
+    'task.board.get.all.success': 'Boards retrieved successfully',
+    'task.board.update.success': 'Board updated successfully',
+    'task.board.update.many.success': 'Boards updated successfully',
+    'task.board.delete.success': 'Board deleted successfully',
+    'task.board.restore.success': 'Board restored successfully',
+    'task.board.member.added': 'Member added to board',
+    'task.board.member.removed': 'Member removed from board',
+    'task.board.member.not.found': 'Board member not found',
+    'task.board.member.already.exists': 'User is already a board member',
+    'task.board.member.get.all.success': 'Board members retrieved successfully',
+    'task.list.not.found': 'List not found',
+    'task.list.create.success': 'List created successfully',
+    'task.list.create.many.success': 'Lists created successfully',
+    'task.list.get.success': 'List retrieved successfully',
+    'task.list.get.all.success': 'Lists retrieved successfully',
+    'task.list.update.success': 'List updated successfully',
+    'task.list.update.many.success': 'Lists updated successfully',
+    'task.list.delete.success': 'List deleted successfully',
+    'task.list.restore.success': 'List restored successfully',
+    'task.list.reorder.success': 'Lists reordered successfully',
+    'task.not.found': 'Task not found',
+    'task.create.success': 'Task created successfully',
+    'task.create.many.success': 'Tasks created successfully',
+    'task.get.success': 'Task retrieved successfully',
+    'task.get.all.success': 'Tasks retrieved successfully',
+    'task.update.success': 'Task updated successfully',
+    'task.update.many.success': 'Tasks updated successfully',
+    'task.delete.success': 'Task deleted successfully',
+    'task.restore.success': 'Task restored successfully',
+    'task.move.success': 'Task moved successfully',
+    'task.assign.success': 'Task assigned successfully',
+    'task.assignee.not.board.member': 'Assignee is not a board member',
+    'task.label.not.found': 'Label not found',
+    'task.label.create.success': 'Label created successfully',
+    'task.label.create.many.success': 'Labels created successfully',
+    'task.label.get.success': 'Label retrieved successfully',
+    'task.label.get.all.success': 'Labels retrieved successfully',
+    'task.label.update.success': 'Label updated successfully',
+    'task.label.update.many.success': 'Labels updated successfully',
+    'task.label.delete.success': 'Label deleted successfully',
+    'task.label.restore.success': 'Label restored successfully',
+    'task.comment.not.found': 'Comment not found',
+    'task.comment.create.success': 'Comment added successfully',
+    'task.comment.create.many.success': 'Comments added successfully',
+    'task.comment.get.success': 'Comment retrieved successfully',
+    'task.comment.get.all.success': 'Comments retrieved successfully',
+    'task.comment.update.success': 'Comment updated successfully',
+    'task.comment.update.many.success': 'Comments updated successfully',
+    'task.comment.delete.success': 'Comment deleted successfully',
+    'task.comment.restore.success': 'Comment restored successfully',
+    'task.comment.forbidden': "Cannot edit another user's comment",
+    'task.manager.boards.title': 'Task Boards',
+    'task.manager.boards.subtitle': 'Manage and organize your project boards',
+    'task.manager.board.new': 'New Board',
+    'task.manager.board.name.placeholder': 'e.g. Product Backlog',
+    'task.manager.board.description.placeholder': 'Optional description',
+    'task.manager.board.color.label': 'Board Color',
+    'task.manager.board.empty': 'No boards yet',
+    'task.manager.board.empty.hint': 'Create your first board to get started',
+    'task.manager.board.members': 'Members',
+    'task.manager.board.lists': 'Lists',
+    'task.manager.board.tasks': 'Tasks',
+    'task.manager.board.add.list': 'Add List',
+    'task.manager.board.add.task': 'Add task',
+    'task.manager.board.drop.tasks.here': 'Drop tasks here',
+    'task.manager.board.list.empty': 'No lists yet. Click "Add List" to create one.',
+    'task.manager.list.new': 'New List',
+    'task.manager.list.name.label': 'List Name',
+    'task.manager.list.name.placeholder': 'e.g. In Progress',
+    'task.manager.list.rename': 'Rename List',
+    'task.manager.board.manage.members': 'Members',
+    'task.manager.member.manage.title': 'Manage Members',
+    'task.manager.member.add': 'Add Member',
+    'task.manager.member.no.members': 'No members yet.',
+    'task.manager.member.user.label': 'User',
+    'task.manager.member.user.placeholder': 'Search by name or email',
+    'task.manager.member.role.label': 'Role',
+    'task.manager.member.role.placeholder': 'Select role',
+    'task.manager.member.role.owner': 'Owner',
+    'task.manager.member.role.admin': 'Admin',
+    'task.manager.member.role.member': 'Member',
+    'task.manager.member.role.viewer': 'Viewer',
+    'task.manager.board.manage.labels': 'Labels',
+    'task.manager.label.manage.title': 'Manage Labels',
+    'task.manager.label.name.label': 'Label Name',
+    'task.manager.label.name.placeholder': 'e.g. Bug, Feature',
+    'task.manager.label.color.label': 'Color',
+    'task.manager.label.add': 'Add Label',
+    'task.manager.label.no.labels': 'No labels yet.',
+    'task.manager.board.edit': 'Edit Board',
+    'task.manager.board.name.label': 'Board Name',
+    'task.manager.board.description.label': 'Description',
+    'task.manager.view.board': 'Board',
+    'task.manager.view.list': 'List',
+    'task.manager.table.title': 'Title',
+    'task.manager.table.list': 'List',
+    'task.manager.table.priority': 'Priority',
+    'task.manager.table.assignee': 'Assignee',
+    'task.manager.table.due.date': 'Due Date',
+    'task.manager.table.empty': 'No tasks yet.',
+    'task.form.title.create': 'New Task',
+    'task.form.title.edit': 'Edit Task',
+    'task.form.title.label': 'Title',
+    'task.form.title.placeholder': 'Task title',
+    'task.form.description.placeholder': 'Add a description...',
+    'task.form.priority.label': 'Priority',
+    'task.form.priority.placeholder': 'Select priority',
+    'task.form.due.date.label': 'Due Date',
+    'task.form.due.date.placeholder': 'Pick a date',
+    'task.form.assignee.label': 'Assignee',
+    'task.form.assignee.placeholder': 'Assign to board member',
+    'task.form.labels.label': 'Labels',
+    'task.form.labels.placeholder': 'Select labels',
+    'task.priority.LOW': 'Low',
+    'task.priority.MEDIUM': 'Medium',
+    'task.priority.HIGH': 'High',
+    'task.priority.URGENT': 'Urgent',
+    'task.detail.description.empty': 'No description',
+    'task.detail.comments.label': 'Comments',
+    'task.detail.comments.empty': 'No comments yet',
+    'task.detail.comment.placeholder': 'Add a comment...',
+    'task.detail.due.label': 'Due',
+    'task.detail.assignees.label': 'Assignees',
+    'task.detail.edit': 'Edit task',
+    'task.detail.delete': 'Delete task',
+    'task.comment.reply': 'Reply',
+    'task.comment.reply.placeholder': 'Write a reply...',
+};
+
+const TASK_MANAGER_ROUTES = [
+    {
+        path: '',
+        resolve: {
+            translations: resolveTranslationModule({
+                modules: ['task-manager'],
+                fallbackMessages: { ...TASK_MANAGER_MESSAGES, ...SHARED_MESSAGES },
+            }),
+        },
+        loadComponent: () => Promise.resolve().then(function () { return boardListPage_component; }).then((m) => m.BoardListPageComponent),
+    },
+    {
+        path: 'board/:boardId',
+        resolve: {
+            translations: resolveTranslationModule({
+                modules: ['task-manager'],
+                fallbackMessages: { ...TASK_MANAGER_MESSAGES, ...SHARED_MESSAGES },
+            }),
+        },
+        loadComponent: () => Promise.resolve().then(function () { return boardViewPage_component; }).then((m) => m.BoardViewPageComponent),
+    },
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BOARD_COLOR_PALETTE, BoardListPageComponent, BoardViewPageComponent, MEMBER_COLOR_PALETTE, TASK_MANAGER_MESSAGES, TASK_MANAGER_ROUTES, TaskApiService, TaskBoardApiService, TaskBoardSocketService, TaskBoardStateService, TaskCardComponent, TaskCommentApiService, TaskDetailPanelComponent, TaskFormDialogComponent, TaskLabelApiService, TaskListApiService, isTaskOverdue, memberColorFromId, memberInitials, taskPrioritySeverity };
+//# sourceMappingURL=flusys-ng-task-manager.mjs.map