@hed-hog/operations 0.0.322 → 0.0.325

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-tasks/page.js

@@ -0,0 +1,939 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OperationsMyTasksPage;
+const entity_list_1 = require("@/components/entity-list");
+const rich_text_editor_1 = require("@/components/rich-text-editor");
+const button_1 = require("@/components/ui/button");
+const card_1 = require("@/components/ui/card");
+const dialog_1 = require("@/components/ui/dialog");
+const input_1 = require("@/components/ui/input");
+const kpi_cards_grid_1 = require("@/components/ui/kpi-cards-grid");
+const label_1 = require("@/components/ui/label");
+const select_1 = require("@/components/ui/select");
+const table_1 = require("@/components/ui/table");
+const progress_1 = require("@/components/ui/progress");
+const toggle_group_1 = require("@/components/ui/toggle-group");
+const core_1 = require("@dnd-kit/core");
+const utilities_1 = require("@dnd-kit/utilities");
+const next_app_provider_1 = require("@hed-hog/next-app-provider");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const next_intl_1 = require("next-intl");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = require("react");
+const operations_header_1 = require("../_components/operations-header");
+const status_badge_1 = require("../_components/status-badge");
+const task_detail_sheet_1 = require("../_components/task-detail-sheet");
+const api_1 = require("../_lib/api");
+const format_1 = require("../_lib/utils/format");
+const KANBAN_COLUMNS = [
+    { id: 'todo', label: 'Backlog' },
+    { id: 'doing', label: 'Em execução' },
+    { id: 'review', label: 'Revisão' },
+    { id: 'done', label: 'Concluído' },
+];
+const EMPTY_TASK_FORM = {
+    projectId: '',
+    name: '',
+    description: '',
+    priority: 'medium',
+    status: 'todo',
+    dueDate: '',
+    estimateHours: '',
+    tags: '',
+};
+function taskDragId(taskId) {
+    return `task-${taskId}`;
+}
+function columnDropId(columnId) {
+    return `col-${columnId}`;
+}
+function parseTaskId(value) {
+    if (!value)
+        return null;
+    const match = String(value).match(/^task-(\d+)$/);
+    return match ? Number(match[1]) : null;
+}
+function parseColumnId(value) {
+    if (!value)
+        return null;
+    const match = String(value).match(/^col-(.+)$/);
+    const id = match === null || match === void 0 ? void 0 : match[1];
+    return KANBAN_COLUMNS.some((c) => c.id === id) ? id : null;
+}
+function splitTasksByColumn(tasks) {
+    return {
+        todo: tasks.filter((t) => t.status === 'todo'),
+        doing: tasks.filter((t) => t.status === 'doing'),
+        review: tasks.filter((t) => t.status === 'review'),
+        done: tasks.filter((t) => t.status === 'done'),
+    };
+}
+function getTaskPriorityLabel(value) {
+    var _a;
+    const labels = {
+        low: 'Baixa',
+        medium: 'Média',
+        high: 'Alta',
+    };
+    return (_a = labels[value !== null && value !== void 0 ? value : '']) !== null && _a !== void 0 ? _a : String(value !== null && value !== void 0 ? value : '');
+}
+function getPriorityClassName(priority) {
+    if (priority === 'high')
+        return 'border-rose-300 bg-rose-100 text-rose-700';
+    if (priority === 'medium')
+        return 'border-amber-300 bg-amber-100 text-amber-700';
+    return 'border-emerald-300 bg-emerald-100 text-emerald-700';
+}
+function getTaskProgress(status) {
+    var _a;
+    const map = {
+        todo: 0,
+        doing: 33,
+        review: 66,
+        done: 100,
+    };
+    return (_a = map[status !== null && status !== void 0 ? status : '']) !== null && _a !== void 0 ? _a : 0;
+}
+function isPastDue(dueDate) {
+    if (!dueDate)
+        return false;
+    return new Date(dueDate) < new Date();
+}
+function getInitials(value) {
+    const parts = String(value !== null && value !== void 0 ? value : '')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2);
+    if (!parts.length)
+        return '??';
+    return parts.map((part) => { var _a, _b; return (_b = (_a = part[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''; }).join('');
+}
+function getPersonAvatarUrl(avatarId) {
+    return typeof avatarId === 'number' && avatarId > 0
+        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+        : '/placeholder.png';
+}
+function getUserPhotoUrl(photoId) {
+    return typeof photoId === 'number' && photoId > 0
+        ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
+        : null;
+}
+function normalizeDateInputValue(value) {
+    if (!value) {
+        return '';
+    }
+    const normalizedValue = String(value).trim();
+    const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+    if (directMatch === null || directMatch === void 0 ? void 0 : directMatch[0]) {
+        return directMatch[0];
+    }
+    const parsedDate = new Date(normalizedValue);
+    if (Number.isNaN(parsedDate.getTime())) {
+        return '';
+    }
+    return parsedDate.toISOString().slice(0, 10);
+}
+function DraggableTaskCard({ task, children, }) {
+    const { attributes, listeners, setNodeRef, transform, isDragging } = (0, core_1.useDraggable)({
+        id: taskDragId(task.id),
+    });
+    return (<div ref={setNodeRef} style={{ transform: utilities_1.CSS.Translate.toString(transform) }} {...listeners} {...attributes} className={isDragging ? 'z-20' : undefined}>
+      {children(isDragging)}
+    </div>);
+}
+function DroppableColumn({ columnId, children, }) {
+    const { setNodeRef, isOver } = (0, core_1.useDroppable)({ id: columnDropId(columnId) });
+    return <div ref={setNodeRef}>{children(isOver)}</div>;
+}
+const MY_TASKS_VIEW_STORAGE_KEY = 'operations-my-tasks-view-mode';
+function OperationsMyTasksPage() {
+    var _a, _b, _c, _d, _e, _f;
+    const t = (0, next_intl_1.useTranslations)('operations.MyTasksPage');
+    const commonT = (0, next_intl_1.useTranslations)('operations.Common');
+    const detailT = (0, next_intl_1.useTranslations)('operations.ProjectDetailsPage');
+    const { request, currentLocaleCode, getSettingValue } = (0, next_app_provider_1.useApp)();
+    const [search, setSearch] = (0, react_1.useState)('');
+    const [statusFilter, setStatusFilter] = (0, react_1.useState)('all');
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [pageSize, setPageSize] = (0, react_1.useState)(20);
+    const [taskCollection, setTaskCollection] = (0, react_1.useState)('active');
+    const [viewMode, setViewMode] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined') {
+            return 'table';
+        }
+        const savedViewMode = window.localStorage.getItem(MY_TASKS_VIEW_STORAGE_KEY);
+        if (savedViewMode === 'cards' || savedViewMode === 'board')
+            return savedViewMode;
+        return 'table';
+    });
+    const [boardOverride, setBoardOverride] = (0, react_1.useState)(null);
+    const [selectedTask, setSelectedTask] = (0, react_1.useState)(null);
+    const [deletePromptTask, setDeletePromptTask] = (0, react_1.useState)(null);
+    const [taskFormOpen, setTaskFormOpen] = (0, react_1.useState)(false);
+    const [editingTaskId, setEditingTaskId] = (0, react_1.useState)(null);
+    const [taskFormLoading, setTaskFormLoading] = (0, react_1.useState)(false);
+    const [taskFormData, setTaskFormData] = (0, react_1.useState)(EMPTY_TASK_FORM);
+    const [inlineCreateColumn, setInlineCreateColumn] = (0, react_1.useState)(null);
+    const [inlineCreateName, setInlineCreateName] = (0, react_1.useState)('');
+    const [inlineCreateLoading, setInlineCreateLoading] = (0, react_1.useState)(false);
+    // Paginated query for table/cards views
+    const { data: tasksResponse, refetch } = (0, next_app_provider_1.useQuery)({
+        queryKey: [
+            'operations-my-tasks-list',
+            currentLocaleCode,
+            search,
+            statusFilter,
+            taskCollection,
+            page,
+            pageSize,
+        ],
+        queryFn: () => {
+            const params = new URLSearchParams({
+                page: String(page),
+                pageSize: String(pageSize),
+                sortField: 'createdAt',
+                sortOrder: 'desc',
+            });
+            if (search.trim())
+                params.set('search', search.trim());
+            if (statusFilter !== 'all')
+                params.set('status', statusFilter);
+            if (taskCollection === 'archived')
+                params.set('archived', 'true');
+            return (0, api_1.fetchOperations)(request, `/operations/my-tasks?${params.toString()}`);
+        },
+        placeholderData: (previous) => previous,
+    });
+    // Full-load query for board view (no pagination limit)
+    const { data: boardTasksResponse, refetch: refetchBoard } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-my-tasks-board', currentLocaleCode],
+        queryFn: () => (0, api_1.fetchOperations)(request, `/operations/my-tasks?pageSize=1000&sortField=createdAt&sortOrder=desc`),
+        enabled: viewMode === 'board' && taskCollection === 'active',
+        placeholderData: (previous) => previous,
+    });
+    const { data: projectOptionsResponse } = (0, next_app_provider_1.useQuery)({
+        queryKey: ['operations-my-task-project-options', currentLocaleCode],
+        queryFn: () => (0, api_1.fetchOperations)(request, '/operations/projects/options?pageSize=200&sortField=name&sortOrder=asc'),
+        placeholderData: (previous) => previous,
+    });
+    const tasks = (_a = tasksResponse === null || tasksResponse === void 0 ? void 0 : tasksResponse.data) !== null && _a !== void 0 ? _a : [];
+    const boardApiTasks = (_b = boardTasksResponse === null || boardTasksResponse === void 0 ? void 0 : boardTasksResponse.data) !== null && _b !== void 0 ? _b : [];
+    const projectOptions = (_c = projectOptionsResponse === null || projectOptionsResponse === void 0 ? void 0 : projectOptionsResponse.data) !== null && _c !== void 0 ? _c : [];
+    const boardColumns = (0, react_1.useMemo)(() => {
+        if (boardOverride)
+            return boardOverride.columns;
+        return splitTasksByColumn(boardApiTasks);
+    }, [boardOverride, boardApiTasks]);
+    const statsCards = (0, react_1.useMemo)(() => [
+        {
+            key: 'total',
+            title: t('cards.total'),
+            description: t('cards.totalDescription'),
+            value: tasks.length,
+            icon: lucide_react_1.ClipboardList,
+            accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+            iconContainerClassName: 'bg-slate-100 text-slate-700',
+        },
+        {
+            key: 'doing',
+            title: t('cards.doing'),
+            description: t('cards.doingDescription'),
+            value: tasks.filter((item) => item.status === 'doing').length,
+            icon: lucide_react_1.PlayCircle,
+            accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+            iconContainerClassName: 'bg-blue-50 text-blue-600',
+        },
+        {
+            key: 'review',
+            title: t('cards.review'),
+            description: t('cards.reviewDescription'),
+            value: tasks.filter((item) => item.status === 'review').length,
+            icon: lucide_react_1.Loader2,
+            accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+            iconContainerClassName: 'bg-amber-50 text-amber-600',
+        },
+        {
+            key: 'done',
+            title: t('cards.done'),
+            description: t('cards.doneDescription'),
+            value: tasks.filter((item) => item.status === 'done').length,
+            icon: lucide_react_1.CheckCircle2,
+            accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+            iconContainerClassName: 'bg-green-50 text-green-600',
+        },
+    ], [tasks, t]);
+    const handleViewModeChange = (value) => {
+        if (taskCollection === 'archived' && value === 'board')
+            return;
+        if (value !== 'table' && value !== 'cards' && value !== 'board')
+            return;
+        setViewMode(value);
+        if (typeof window !== 'undefined') {
+            window.localStorage.setItem(MY_TASKS_VIEW_STORAGE_KEY, value);
+        }
+    };
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, { activationConstraint: { distance: 6 } }));
+    const findColumnByTask = (0, react_1.useCallback)((taskId) => {
+        var _a;
+        const match = KANBAN_COLUMNS.find((column) => boardColumns[column.id].some((task) => task.id === taskId));
+        return (_a = match === null || match === void 0 ? void 0 : match.id) !== null && _a !== void 0 ? _a : null;
+    }, [boardColumns]);
+    const moveTaskToColumn = (0, react_1.useCallback)((taskId, targetColumn) => {
+        const originColumn = findColumnByTask(taskId);
+        if (!originColumn || originColumn === targetColumn)
+            return;
+        const sourceTask = boardColumns[originColumn].find((task) => task.id === taskId);
+        if (!sourceTask)
+            return;
+        setBoardOverride({
+            columns: Object.assign(Object.assign({}, boardColumns), { [originColumn]: boardColumns[originColumn].filter((task) => task.id !== taskId), [targetColumn]: [
+                    Object.assign(Object.assign({}, sourceTask), { status: targetColumn }),
+                    ...boardColumns[targetColumn],
+                ] }),
+        });
+        (0, api_1.mutateOperations)(request, `/operations/tasks/${taskId}`, 'PATCH', {
+            status: targetColumn,
+        }).catch(() => {
+            setBoardOverride(null);
+            void refetchBoard();
+        });
+    }, [boardColumns, findColumnByTask, request, refetchBoard]);
+    const onBoardDragEnd = (event) => {
+        var _a;
+        const taskId = parseTaskId(event.active.id);
+        const targetColumn = parseColumnId((_a = event.over) === null || _a === void 0 ? void 0 : _a.id);
+        if (!taskId || !targetColumn)
+            return;
+        moveTaskToColumn(taskId, targetColumn);
+    };
+    const refetchAll = (0, react_1.useCallback)(async () => {
+        await Promise.all([refetch(), refetchBoard()]);
+    }, [refetch, refetchBoard]);
+    const handleArchiveTask = (0, react_1.useCallback)(async (taskId) => {
+        await (0, api_1.mutateOperations)(request, `/operations/tasks/${taskId}`, 'PATCH', {
+            archived: true,
+        });
+        setSelectedTask(null);
+        setBoardOverride(null);
+        await refetchAll();
+    }, [request, refetchAll]);
+    const handleRestoreTask = (0, react_1.useCallback)(async (taskId) => {
+        await (0, api_1.mutateOperations)(request, `/operations/tasks/${taskId}`, 'PATCH', {
+            archived: false,
+        });
+        setSelectedTask(null);
+        setBoardOverride(null);
+        await refetchAll();
+    }, [request, refetchAll]);
+    const handlePermanentDeleteTask = (0, react_1.useCallback)(async (taskId) => {
+        await (0, api_1.mutateOperations)(request, `/operations/tasks/${taskId}?permanent=true`, 'DELETE');
+        setDeletePromptTask(null);
+        setSelectedTask(null);
+        setBoardOverride(null);
+        await refetchAll();
+    }, [request, refetchAll]);
+    const handleInlineCreateTask = (0, react_1.useCallback)(async (column) => {
+        const trimmed = inlineCreateName.trim();
+        if (!trimmed) {
+            setInlineCreateColumn(null);
+            setInlineCreateName('');
+            return;
+        }
+        setInlineCreateLoading(true);
+        try {
+            await (0, api_1.mutateOperations)(request, '/operations/tasks', 'POST', {
+                name: trimmed,
+                status: column,
+                priority: 'medium',
+            });
+            setBoardOverride(null);
+            setInlineCreateColumn(null);
+            setInlineCreateName('');
+            await refetchBoard();
+        }
+        finally {
+            setInlineCreateLoading(false);
+        }
+    }, [inlineCreateName, request, refetchBoard]);
+    const openCreateTaskForm = (0, react_1.useCallback)(() => {
+        setEditingTaskId(null);
+        setTaskFormData(EMPTY_TASK_FORM);
+        setSelectedTask(null);
+        setTaskFormOpen(true);
+    }, []);
+    const openEditTaskForm = (0, react_1.useCallback)((task) => {
+        var _a, _b, _c;
+        setEditingTaskId(task.id);
+        setTaskFormData({
+            projectId: String(task.projectId),
+            name: task.name,
+            description: (_a = task.description) !== null && _a !== void 0 ? _a : '',
+            priority: (_b = task.priority) !== null && _b !== void 0 ? _b : 'medium',
+            status: KANBAN_COLUMNS.some((column) => column.id === task.status)
+                ? task.status
+                : 'todo',
+            dueDate: normalizeDateInputValue(task.dueDate),
+            estimateHours: task.estimateHours != null ? String(task.estimateHours) : '',
+            tags: (_c = task.tags) !== null && _c !== void 0 ? _c : '',
+        });
+        setSelectedTask(null);
+        setTaskFormOpen(true);
+    }, []);
+    const handleTaskFormSubmit = (0, react_1.useCallback)(async () => {
+        var _a;
+        const selectedProject = projectOptions.find((project) => String(project.id) === taskFormData.projectId);
+        const normalizedName = taskFormData.name.trim();
+        if (!selectedProject || !normalizedName)
+            return;
+        setTaskFormLoading(true);
+        try {
+            const payload = {
+                projectId: selectedProject.id,
+                projectAssignmentId: (_a = selectedProject.projectAssignmentId) !== null && _a !== void 0 ? _a : null,
+                name: normalizedName,
+                description: taskFormData.description.trim() || null,
+                priority: taskFormData.priority,
+                status: taskFormData.status,
+                dueDate: taskFormData.dueDate || null,
+                estimateHours: taskFormData.estimateHours
+                    ? Number(taskFormData.estimateHours)
+                    : null,
+                tags: taskFormData.tags.trim() || null,
+            };
+            if (editingTaskId) {
+                await (0, api_1.mutateOperations)(request, `/operations/tasks/${editingTaskId}`, 'PATCH', payload);
+            }
+            else {
+                await (0, api_1.mutateOperations)(request, '/operations/tasks', 'POST', payload);
+            }
+            setTaskFormOpen(false);
+            setEditingTaskId(null);
+            setTaskFormData(EMPTY_TASK_FORM);
+            setTaskCollection('active');
+            setPage(1);
+            setBoardOverride(null);
+            await refetchAll();
+        }
+        finally {
+            setTaskFormLoading(false);
+        }
+    }, [editingTaskId, projectOptions, request, refetchAll, taskFormData]);
+    return (<entity_list_1.Page>
+      <operations_header_1.OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')} actions={<button_1.Button size="sm" className="gap-2" onClick={openCreateTaskForm}>
+            <lucide_react_1.Plus className="size-4"/>
+            {t('actions.create')}
+          </button_1.Button>}/>
+
+      <kpi_cards_grid_1.KpiCardsGrid items={statsCards} columns={4}/>
+
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        {viewMode !== 'board' ? (<entity_list_1.SearchBar className="w-auto" searchQuery={search} onSearchChange={(value) => {
+                setSearch(value);
+                setPage(1);
+            }} showSearchButton={false} debounceMs={500} placeholder={t('searchPlaceholder')} controls={[
+                {
+                    id: 'status',
+                    type: 'select',
+                    value: statusFilter,
+                    onChange: (value) => {
+                        setStatusFilter(value);
+                        setPage(1);
+                    },
+                    placeholder: commonT('labels.status'),
+                    options: [
+                        { value: 'all', label: commonT('filters.allStatuses') },
+                        { value: 'todo', label: t('status.todo') },
+                        { value: 'doing', label: t('status.doing') },
+                        { value: 'review', label: t('status.review') },
+                        { value: 'done', label: t('status.done') },
+                    ],
+                },
+            ]}/>) : null}
+
+        <button_1.Button variant={taskCollection === 'active' ? 'default' : 'outline'} size="sm" onClick={() => {
+            setTaskCollection('active');
+            setPage(1);
+        }}>
+          {t('collections.active')}
+        </button_1.Button>
+        <button_1.Button variant={taskCollection === 'archived' ? 'default' : 'outline'} size="sm" onClick={() => {
+            setTaskCollection('archived');
+            setPage(1);
+            if (viewMode === 'board') {
+                handleViewModeChange('table');
+            }
+        }}>
+          {t('collections.archived')}
+        </button_1.Button>
+
+        <div className="flex-1"/>
+
+        <toggle_group_1.ToggleGroup type="single" value={viewMode} onValueChange={handleViewModeChange} variant="outline" size="sm" aria-label={t('viewMode')}>
+          <toggle_group_1.ToggleGroupItem value="table" className="gap-1.5 px-2.5" aria-label={t('viewModeTable')}>
+            <lucide_react_1.List className="h-4 w-4"/>
+            <span className="hidden sm:inline">{t('viewModeTable')}</span>
+          </toggle_group_1.ToggleGroupItem>
+          <toggle_group_1.ToggleGroupItem value="cards" className="gap-1.5 px-2.5" aria-label={t('viewModeCards')}>
+            <lucide_react_1.LayoutGrid className="h-4 w-4"/>
+            <span className="hidden sm:inline">{t('viewModeCards')}</span>
+          </toggle_group_1.ToggleGroupItem>
+          {taskCollection === 'active' ? (<toggle_group_1.ToggleGroupItem value="board" className="gap-1.5 px-2.5" aria-label={t('viewModeBoard')}>
+              <lucide_react_1.KanbanSquare className="h-4 w-4"/>
+              <span className="hidden sm:inline">{t('viewModeBoard')}</span>
+            </toggle_group_1.ToggleGroupItem>) : null}
+        </toggle_group_1.ToggleGroup>
+      </div>
+
+      {viewMode === 'board' ? (boardApiTasks.length > 0 ? (<core_1.DndContext sensors={sensors} collisionDetection={core_1.closestCenter} onDragEnd={onBoardDragEnd}>
+            <div className="grid gap-4 xl:grid-cols-4">
+              {KANBAN_COLUMNS.map((column) => (<DroppableColumn key={column.id} columnId={column.id}>
+                  {(isOver) => (<div className={[
+                        'rounded-xl border bg-muted/20 p-3 transition-colors',
+                        isOver
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border',
+                    ].join(' ')}>
+                      <div className="mb-3 flex items-center justify-between">
+                        <div className="flex items-center gap-2 text-sm font-semibold">
+                          <lucide_react_1.Rows3 className="size-4 text-muted-foreground"/>
+                          {column.label}
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <span className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">
+                            {boardColumns[column.id].length}
+                          </span>
+                          <button type="button" className="flex size-5 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground" onClick={() => {
+                        setInlineCreateColumn(column.id);
+                        setInlineCreateName('');
+                    }}>
+                            <lucide_react_1.Plus className="size-3.5"/>
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-1 flex-col gap-2">
+                        <framer_motion_1.AnimatePresence initial={false}>
+                        {boardColumns[column.id].map((task) => {
+                        var _a;
+                        const taskTags = task.tags ? task.tags.split(',').map((t) => t.trim()).filter(Boolean) : [];
+                        const comments = (_a = task.commentCount) !== null && _a !== void 0 ? _a : 0;
+                        return (<DraggableTaskCard key={task.id} task={task}>
+                            {(isDragging) => {
+                                var _a;
+                                return (<framer_motion_1.motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95, y: -4 }} transition={{ duration: 0.18 }} role="button" tabIndex={0} onClick={() => !isDragging && setSelectedTask(task)} onKeyDown={(event) => {
+                                        if (event.key === 'Enter' || event.key === ' ') {
+                                            event.preventDefault();
+                                            setSelectedTask(task);
+                                        }
+                                    }} className={[
+                                        'group w-full cursor-pointer rounded-2xl border bg-card p-3 text-left shadow-xs transition',
+                                        isDragging
+                                            ? 'opacity-0'
+                                            : 'hover:border-primary/40 hover:shadow-lg',
+                                    ].join(' ')}>
+                                <div className="mb-3 flex items-start justify-between gap-2">
+                                  <div className="min-w-0 space-y-1">
+                                    <p className="line-clamp-2 text-sm font-semibold leading-snug">
+                                      {task.name}
+                                    </p>
+                                    <p className="truncate text-[11px] text-muted-foreground">
+                                      {[task.projectName, task.projectCode]
+                                        .filter(Boolean)
+                                        .join(' • ') ||
+                                        commonT('labels.notAvailable')}
+                                    </p>
+                                    {task.description ? (<p className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                                        {task.description.replace(/<[^>]*>/g, '')}
+                                      </p>) : null}
+                                  </div>
+                                  <div className="flex items-start gap-2">
+                                    <span className={[
+                                        'shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                        getPriorityClassName(task.priority),
+                                    ].join(' ')}>
+                                      {getTaskPriorityLabel(task.priority)}
+                                    </span>
+                                    <button_1.Button type="button" variant="ghost" size="icon" className="size-7 shrink-0 rounded-full opacity-0 transition group-hover:opacity-100" onPointerDown={(event) => event.stopPropagation()} onClick={(event) => {
+                                        event.stopPropagation();
+                                        openEditTaskForm(task);
+                                    }}>
+                                      <lucide_react_1.Pencil className="size-3.5"/>
+                                    </button_1.Button>
+                                  </div>
+                                </div>
+
+                                {taskTags.length > 0 ? (<div className="mb-3 flex flex-wrap gap-1">
+                                    {taskTags.slice(0, 4).map((tag) => (<span key={`${task.id}-${tag}`} className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                        {tag}
+                                      </span>))}
+                                    {taskTags.length > 4 ? (<span className="rounded-full border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                        +{taskTags.length - 4}
+                                      </span>) : null}
+                                  </div>) : null}
+
+                                <div className="grid grid-cols-2 gap-2 text-xs">
+                                  <div className={[
+                                        'rounded-xl border bg-muted/20 px-2 py-1.5',
+                                        isPastDue(task.dueDate) && task.status !== 'done'
+                                            ? 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300'
+                                            : 'text-muted-foreground',
+                                    ].join(' ')}>
+                                    <span className="flex items-center gap-1">
+                                      <lucide_react_1.AlarmClock className="size-3.5"/>
+                                      {(0, format_1.formatDate)(task.dueDate, getSettingValue, currentLocaleCode)}
+                                    </span>
+                                  </div>
+                                  <div className="rounded-xl border bg-muted/20 px-2 py-1.5 text-muted-foreground">
+                                    <span className="flex items-center gap-1">
+                                      <lucide_react_1.Timer className="size-3.5"/>
+                                      {task.estimateHours != null
+                                        ? `${task.estimateHours}h`
+                                        : '—'}
+                                    </span>
+                                  </div>
+                                </div>
+
+                                <div className="mt-3 space-y-1.5">
+                                  <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                                    <span>Progresso</span>
+                                    <span>{getTaskProgress(task.status)}%</span>
+                                  </div>
+                                  <progress_1.Progress value={getTaskProgress(task.status)} className="h-1.5"/>
+                                </div>
+
+                                <div className="mt-3 flex items-center justify-between gap-3 border-t pt-3">
+                                  <div className="flex min-w-0 items-center gap-2">
+                                    <div className="flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-[10px] font-semibold uppercase text-muted-foreground ring-1 ring-border">
+                                      {(() => {
+                                        var _a;
+                                        const photoUrl = getUserPhotoUrl(task.assigneeUserPhotoId);
+                                        const avatarUrl = task.assigneePersonAvatarId
+                                            ? getPersonAvatarUrl(task.assigneePersonAvatarId)
+                                            : null;
+                                        const imgSrc = photoUrl !== null && photoUrl !== void 0 ? photoUrl : avatarUrl;
+                                        return imgSrc ? (
+                                        // eslint-disable-next-line @next/next/no-img-element
+                                        <img src={imgSrc} alt={(_a = task.assigneeName) !== null && _a !== void 0 ? _a : ''} className="size-full object-cover"/>) : (getInitials(task.assigneeName));
+                                    })()}
+                                    </div>
+                                    <span className="truncate text-[11px] text-muted-foreground">
+                                      {(_a = task.assigneeName) !== null && _a !== void 0 ? _a : '—'}
+                                    </span>
+                                  </div>
+                                  <div className="flex shrink-0 items-center gap-2 text-[11px] text-muted-foreground">
+                                    <span className="inline-flex items-center gap-1">
+                                      <lucide_react_1.MessageSquare className="size-3.5"/>
+                                      {comments}
+                                    </span>
+                                    <span className="inline-flex items-center gap-1">
+                                      <lucide_react_1.Paperclip className="size-3.5"/>
+                                      0
+                                    </span>
+                                  </div>
+                                </div>
+                              </framer_motion_1.motion.div>);
+                            }}
+                          </DraggableTaskCard>);
+                    })}
+                        </framer_motion_1.AnimatePresence>
+                      </div>
+
+                      {inlineCreateColumn === column.id ? (<div className="space-y-1.5 rounded-lg border bg-card p-2">
+                          <input_1.Input autoFocus placeholder={detailT('taskForm.namePlaceholder')} value={inlineCreateName} onChange={(e) => setInlineCreateName(e.target.value)} onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                void handleInlineCreateTask(column.id);
+                            }
+                            else if (e.key === 'Escape') {
+                                setInlineCreateColumn(null);
+                                setInlineCreateName('');
+                            }
+                        }} onBlur={() => {
+                            if (!inlineCreateName.trim()) {
+                                setInlineCreateColumn(null);
+                                setInlineCreateName('');
+                            }
+                        }} disabled={inlineCreateLoading} className="h-8 text-sm"/>
+                          <div className="flex gap-1">
+                            <button_1.Button type="button" size="sm" className="h-7 px-2 text-xs" disabled={!inlineCreateName.trim() || inlineCreateLoading} onMouseDown={(e) => e.preventDefault()} onClick={() => void handleInlineCreateTask(column.id)}>
+                              {t('actions.create')}
+                            </button_1.Button>
+                            <button_1.Button type="button" variant="ghost" size="sm" className="h-7 px-2 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => {
+                            setInlineCreateColumn(null);
+                            setInlineCreateName('');
+                        }}>
+                              {commonT('actions.cancel')}
+                            </button_1.Button>
+                          </div>
+                        </div>) : (<button type="button" className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground" onClick={() => {
+                            setInlineCreateColumn(column.id);
+                            setInlineCreateName('');
+                        }}>
+                          <lucide_react_1.Plus className="size-3"/>
+                          {t('actions.create')}
+                        </button>)}
+                    </div>)}
+                </DroppableColumn>))}
+            </div>
+          </core_1.DndContext>) : (<entity_list_1.EmptyState icon={<lucide_react_1.ClipboardList className="size-12"/>} title={commonT('states.emptyTitle')} description={t('emptyDescription')} actionLabel={commonT('actions.refresh')} onAction={() => void refetchBoard()}/>)) : tasks.length > 0 ? (viewMode === 'cards' ? (<div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {tasks.map((task) => (<card_1.Card key={task.id} className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md" onClick={() => setSelectedTask(task)}>
+                <card_1.CardContent className="space-y-4 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="min-w-0">
+                      <div className="truncate font-semibold">{task.name}</div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {[task.projectName, task.projectCode]
+                    .filter(Boolean)
+                    .join(' • ') || commonT('labels.notAvailable')}
+                      </div>
+                    </div>
+                    <status_badge_1.StatusBadge label={t(`status.${task.status}`)} className={(0, format_1.getStatusBadgeClass)(task.status)}/>
+                  </div>
+
+                  {task.description ? (<p className="line-clamp-3 text-sm text-muted-foreground">
+                      {task.description}
+                    </p>) : null}
+
+                  <div className="flex justify-end border-t border-border/60 pt-3">
+                    {task.projectId ? (<button_1.Button variant="outline" size="icon" asChild onClick={(event) => event.stopPropagation()}>
+                        <link_1.default href={`/operations/my-projects/${task.projectId}`}>
+                          <lucide_react_1.Eye className="size-4"/>
+                        </link_1.default>
+                      </button_1.Button>) : null}
+                  </div>
+                </card_1.CardContent>
+              </card_1.Card>))}
+          </div>) : (<div className="overflow-x-auto rounded-md border">
+            <table_1.Table>
+              <table_1.TableHeader>
+                <table_1.TableRow>
+                  <table_1.TableHead>{commonT('labels.task')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.project')}</table_1.TableHead>
+                  <table_1.TableHead>{commonT('labels.status')}</table_1.TableHead>
+                  <table_1.TableHead className="w-20 text-right">
+                    {commonT('labels.actions')}
+                  </table_1.TableHead>
+                </table_1.TableRow>
+              </table_1.TableHeader>
+              <table_1.TableBody>
+                {tasks.map((task) => (<table_1.TableRow key={task.id} className="cursor-pointer hover:bg-muted/30" onClick={() => setSelectedTask(task)}>
+                    <table_1.TableCell>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">{task.name}</div>
+                        {task.description ? (<div className="truncate text-xs text-muted-foreground">
+                            {task.description}
+                          </div>) : null}
+                      </div>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="truncate text-sm">
+                        {[task.projectName, task.projectCode]
+                    .filter(Boolean)
+                    .join(' • ') || commonT('labels.notAvailable')}
+                      </div>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <status_badge_1.StatusBadge label={t(`status.${task.status}`)} className={(0, format_1.getStatusBadgeClass)(task.status)}/>
+                    </table_1.TableCell>
+                    <table_1.TableCell>
+                      <div className="flex justify-end">
+                        {task.projectId ? (<button_1.Button variant="outline" size="icon" asChild onClick={(event) => event.stopPropagation()}>
+                            <link_1.default href={`/operations/my-projects/${task.projectId}`}>
+                              <lucide_react_1.Eye className="size-4"/>
+                            </link_1.default>
+                          </button_1.Button>) : null}
+                      </div>
+                    </table_1.TableCell>
+                  </table_1.TableRow>))}
+              </table_1.TableBody>
+            </table_1.Table>
+          </div>)) : (<entity_list_1.EmptyState icon={<lucide_react_1.ClipboardList className="size-12"/>} title={commonT('states.emptyTitle')} description={t('emptyDescription')} actionLabel={commonT('actions.refresh')} onAction={() => void refetch()}/>)}
+
+      {viewMode !== 'board' ? (<entity_list_1.PaginationFooter currentPage={(_d = tasksResponse === null || tasksResponse === void 0 ? void 0 : tasksResponse.page) !== null && _d !== void 0 ? _d : page} pageSize={(_e = tasksResponse === null || tasksResponse === void 0 ? void 0 : tasksResponse.pageSize) !== null && _e !== void 0 ? _e : pageSize} totalItems={(_f = tasksResponse === null || tasksResponse === void 0 ? void 0 : tasksResponse.total) !== null && _f !== void 0 ? _f : 0} onPageChange={setPage} onPageSizeChange={(value) => {
+                setPageSize(value);
+                setPage(1);
+            }} pageSizeOptions={[10, 20, 50]}/>) : null}
+
+      <task_detail_sheet_1.TaskDetailSheet task={selectedTask} open={selectedTask !== null} onOpenChange={(open) => {
+            if (!open)
+                setSelectedTask(null);
+        }} statusLabel={(status) => {
+            try {
+                return t(`status.${status}`);
+            }
+            catch (_a) {
+                return status;
+            }
+        }} footer={selectedTask ? (<div className="grid grid-cols-2 gap-3">
+              {taskCollection === 'archived' ? (<>
+                  <button_1.Button variant="outline" className="gap-2" onClick={() => void handleRestoreTask(selectedTask.id)}>
+                    <lucide_react_1.ArchiveRestore className="size-4"/>
+                    {commonT('actions.unarchive')}
+                  </button_1.Button>
+                  <button_1.Button variant="destructive" className="gap-2" onClick={() => setDeletePromptTask(selectedTask)}>
+                    <lucide_react_1.Trash2 className="size-4"/>
+                    {commonT('actions.delete')}
+                  </button_1.Button>
+                </>) : (<>
+                  <button_1.Button variant="outline" className="gap-2" onClick={() => openEditTaskForm(selectedTask)}>
+                    <lucide_react_1.Pencil className="size-4"/>
+                    {commonT('actions.edit')}
+                  </button_1.Button>
+                  <button_1.Button variant="outline" className="gap-2" onClick={() => void handleArchiveTask(selectedTask.id)}>
+                    <lucide_react_1.Archive className="size-4"/>
+                    {commonT('actions.archive')}
+                  </button_1.Button>
+                </>)}
+            </div>) : null}/>
+
+      <dialog_1.Dialog open={deletePromptTask !== null} onOpenChange={(open) => {
+            if (!open)
+                setDeletePromptTask(null);
+        }}>
+        <dialog_1.DialogContent className="sm:max-w-sm">
+          <dialog_1.DialogHeader>
+            <dialog_1.DialogTitle>{t('dialogs.deleteTitle')}</dialog_1.DialogTitle>
+          </dialog_1.DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            {t('dialogs.deleteDescription')}
+          </p>
+          <dialog_1.DialogFooter className="mt-4">
+            <button_1.Button variant="outline" onClick={() => setDeletePromptTask(null)}>
+              {commonT('actions.cancel')}
+            </button_1.Button>
+            {deletePromptTask ? (<button_1.Button variant="destructive" onClick={() => void handlePermanentDeleteTask(deletePromptTask.id)}>
+                {commonT('actions.delete')}
+              </button_1.Button>) : null}
+          </dialog_1.DialogFooter>
+        </dialog_1.DialogContent>
+      </dialog_1.Dialog>
+
+      <dialog_1.Dialog open={taskFormOpen} onOpenChange={(open) => {
+            if (!taskFormLoading) {
+                setTaskFormOpen(open);
+                if (!open) {
+                    setEditingTaskId(null);
+                    setTaskFormData(EMPTY_TASK_FORM);
+                }
+            }
+        }}>
+        <dialog_1.DialogContent className="sm:max-w-2xl">
+          <dialog_1.DialogHeader>
+            <dialog_1.DialogTitle>
+              {editingTaskId
+            ? detailT('taskForm.titleEdit')
+            : detailT('taskForm.titleNew')}
+            </dialog_1.DialogTitle>
+          </dialog_1.DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label_1.Label htmlFor="task-project">{commonT('labels.project')}</label_1.Label>
+              <select_1.Select value={taskFormData.projectId} onValueChange={(value) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { projectId: value })))}>
+                <select_1.SelectTrigger className="w-full" id="task-project">
+                  <select_1.SelectValue placeholder={t('dialogs.createProjectPlaceholder')}/>
+                </select_1.SelectTrigger>
+                <select_1.SelectContent>
+                  {projectOptions.map((project) => (<select_1.SelectItem key={project.id} value={String(project.id)}>
+                      {project.label}
+                    </select_1.SelectItem>))}
+                </select_1.SelectContent>
+              </select_1.Select>
+            </div>
+
+            <div className="space-y-2">
+              <label_1.Label htmlFor="task-name">
+                {detailT('taskForm.nameLabel')} *
+              </label_1.Label>
+              <input_1.Input id="task-name" value={taskFormData.name} onChange={(event) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { name: event.target.value })))} placeholder={detailT('taskForm.namePlaceholder')}/>
+            </div>
+
+            <div className="space-y-2">
+              <label_1.Label htmlFor="task-description">
+                {detailT('taskForm.descriptionLabel')}
+              </label_1.Label>
+              <rich_text_editor_1.RichTextEditor value={taskFormData.description} onChange={(val) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { description: val })))}/>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <label_1.Label>{detailT('taskForm.priorityLabel')}</label_1.Label>
+                <select_1.Select value={taskFormData.priority} onValueChange={(value) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { priority: value })))}>
+                  <select_1.SelectTrigger className="w-full">
+                    <select_1.SelectValue />
+                  </select_1.SelectTrigger>
+                  <select_1.SelectContent>
+                    <select_1.SelectItem value="low">
+                      {getTaskPriorityLabel('low')}
+                    </select_1.SelectItem>
+                    <select_1.SelectItem value="medium">
+                      {getTaskPriorityLabel('medium')}
+                    </select_1.SelectItem>
+                    <select_1.SelectItem value="high">
+                      {getTaskPriorityLabel('high')}
+                    </select_1.SelectItem>
+                  </select_1.SelectContent>
+                </select_1.Select>
+              </div>
+
+              <div className="space-y-2">
+                <label_1.Label>{detailT('taskForm.columnLabel')}</label_1.Label>
+                <select_1.Select value={taskFormData.status} onValueChange={(value) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { status: value })))}>
+                  <select_1.SelectTrigger className="w-full">
+                    <select_1.SelectValue />
+                  </select_1.SelectTrigger>
+                  <select_1.SelectContent>
+                    {KANBAN_COLUMNS.map((column) => (<select_1.SelectItem key={column.id} value={column.id}>
+                        {column.label}
+                      </select_1.SelectItem>))}
+                  </select_1.SelectContent>
+                </select_1.Select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <label_1.Label htmlFor="task-due-date">
+                  {detailT('taskForm.deadlineLabel')}
+                </label_1.Label>
+                <input_1.Input id="task-due-date" type="date" value={taskFormData.dueDate} onChange={(event) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { dueDate: event.target.value })))}/>
+              </div>
+
+              <div className="space-y-2">
+                <label_1.Label htmlFor="task-estimate">
+                  {detailT('taskForm.estimateLabel')}
+                </label_1.Label>
+                <input_1.Input id="task-estimate" type="number" min="0" step="0.5" placeholder="0" value={taskFormData.estimateHours} onChange={(event) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { estimateHours: event.target.value })))}/>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label_1.Label htmlFor="task-tags">{detailT('taskForm.tagsLabel')}</label_1.Label>
+              <input_1.Input id="task-tags" value={taskFormData.tags} onChange={(event) => setTaskFormData((prev) => (Object.assign(Object.assign({}, prev), { tags: event.target.value })))} placeholder={detailT('taskForm.tagsPlaceholder')}/>
+            </div>
+          </div>
+          <dialog_1.DialogFooter className="gap-2 sm:justify-between">
+            <button_1.Button variant="ghost" onClick={() => {
+            setTaskFormOpen(false);
+            setEditingTaskId(null);
+            setTaskFormData(EMPTY_TASK_FORM);
+        }} disabled={taskFormLoading}>
+              {commonT('actions.cancel')}
+            </button_1.Button>
+            <button_1.Button onClick={() => void handleTaskFormSubmit()} disabled={taskFormLoading ||
+            !taskFormData.projectId ||
+            !taskFormData.name.trim()}>
+              {taskFormLoading ? (<lucide_react_1.Loader2 className="size-4 animate-spin"/>) : null}
+              {editingTaskId ? commonT('actions.save') : t('actions.create')}
+            </button_1.Button>
+          </dialog_1.DialogFooter>
+        </dialog_1.DialogContent>
+      </dialog_1.Dialog>
+    </entity_list_1.Page>);
+}
+//# sourceMappingURL=page.js.map