@hed-hog/operations 0.0.304 → 0.0.305

package/hedhog/frontend/app/_components/project-details-screen.tsx.ejs

@@ -1,8 +1,38 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -11,14 +41,45 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { FileText, FolderKanban, Pencil } from 'lucide-react';
-import Link from 'next/link';
+import {
+  AlarmClock,
+  BarChart3,
+  FileText,
+  FolderKanban,
+  Pencil,
+  Plus,
+  Rocket,
+  Rows3,
+  Trash2,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { OperationsHeader } from './operations-header';
-import { SectionCard } from './section-card';
-import { StatusBadge } from './status-badge';
-import { fetchOperations } from '../_lib/api';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type { OperationsProjectDetails } from '../_lib/types';
 import {
@@ -30,19 +91,555 @@ import {
   formatPercent,
   getStatusBadgeClass,
 } from '../_lib/utils/format';
+import { OperationsHeader } from './operations-header';
+import { ProjectFormScreen } from './project-form-screen';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+
+type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
+
+type BoardTask = {
+  id: number;
+  name: string;
+  description: string | null;
+  status: BoardColumnId;
+  priority: 'low' | 'medium' | 'high';
+  dueDate: string | null;
+  estimateHours: number | null;
+  tags: string | null;
+  assigneeCollaboratorId: number | null;
+  assigneeName: string | null;
+  assigneeUserPhotoId: number | null;
+  assigneePersonAvatarId: number | null;
+  projectAssignmentId: number | null;
+};
+
+type TaskFormState = {
+  name: string;
+  description: string;
+  priority: 'low' | 'medium' | 'high';
+  status: BoardColumnId;
+  assigneeCollaboratorId: string;
+  dueDate: string;
+  estimateHours: string;
+  tags: string;
+};
+
+const EMPTY_TASK_FORM: TaskFormState = {
+  name: '',
+  description: '',
+  priority: 'medium',
+  status: 'todo',
+  assigneeCollaboratorId: 'none',
+  dueDate: '',
+  estimateHours: '',
+  tags: '',
+};
+
+type BoardColumns = Record<BoardColumnId, BoardTask[]>;
+
+type BoardState = {
+  projectId: number;
+  columns: BoardColumns;
+};
+
+const KANBAN_COLUMNS: Array<{ id: BoardColumnId; label: string }> = [
+  { id: 'todo', label: 'Backlog' },
+  { id: 'doing', label: 'Em execução' },
+  { id: 'review', label: 'Revisão' },
+  { id: 'done', label: 'Concluído' },
+];
+
+function apiTaskToBoardTask(row: any): BoardTask {
+  const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
+    ? (row.status as BoardColumnId)
+    : 'todo';
+  return {
+    id: row.id,
+    name: row.name,
+    description: row.description ?? null,
+    status,
+    priority: row.priority ?? 'medium',
+    dueDate: row.dueDate ?? null,
+    estimateHours: row.estimateHours ?? null,
+    tags: row.tags ?? null,
+    assigneeCollaboratorId: row.assigneeCollaboratorId ?? null,
+    assigneeName: row.assigneeName ?? null,
+    assigneeUserPhotoId: row.assigneeUserPhotoId ?? null,
+    assigneePersonAvatarId: row.assigneePersonAvatarId ?? null,
+    projectAssignmentId: row.projectAssignmentId ?? null,
+  };
+}
+
+function splitTasksByColumn(tasks: BoardTask[]): BoardColumns {
+  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'),
+  };
+}
+
+const boardChartConfig = {
+  allocation: { label: 'Alocacao', color: 'hsl(201 96% 32%)' },
+  loggedHours: { label: 'Horas', color: 'hsl(166 72% 28%)' },
+} satisfies ChartConfig;
+
+function taskDragId(taskId: number) {
+  return `task-${taskId}`;
+}
+
+function columnDropId(columnId: BoardColumnId) {
+  return `col-${columnId}`;
+}
+
+function parseTaskId(value: UniqueIdentifier | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const id = String(value);
+  if (!id.startsWith('task-')) {
+    return null;
+  }
+
+  const parsed = Number(id.slice(5));
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function parseColumnId(value: UniqueIdentifier | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const id = String(value);
+  if (!id.startsWith('col-')) {
+    return null;
+  }
+
+  const column = id.slice(4);
+  return KANBAN_COLUMNS.some((item) => item.id === column)
+    ? (column as BoardColumnId)
+    : null;
+}
+
+function DroppableColumn({
+  columnId,
+  children,
+}: {
+  columnId: BoardColumnId;
+  children: (isOver: boolean) => React.ReactNode;
+}) {
+  const { isOver, setNodeRef } = useDroppable({ id: columnDropId(columnId) });
+
+  return <div ref={setNodeRef}>{children(isOver)}</div>;
+}
+
+function DraggableTaskCard({
+  task,
+  children,
+}: {
+  task: BoardTask;
+  children: (isDragging: boolean) => React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({ id: taskDragId(task.id) });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      {...listeners}
+      {...attributes}
+      className={isDragging ? 'z-20' : undefined}
+    >
+      {children(isDragging)}
+    </div>
+  );
+}
+
+function shouldOpenEditSheet(value: string | null, projectId: number) {
+  if (!value) {
+    return false;
+  }
+
+  return value === '1' || value === 'true' || value === String(projectId);
+}
+
+function getInitials(value?: string | null) {
+  const parts = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (!parts.length) {
+    return '??';
+  }
+
+  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
+}
+
+function getPersonAvatarUrl(avatarId?: number | null) {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getUserPhotoUrl(photoId?: number | null) {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/file/open/${photoId}`
+    : null;
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const normalizedValue = String(value).trim();
+  const directMatch = normalizedValue.match(/^\d{4}-\d{2}-\d{2}/);
+
+  if (directMatch?.[0]) {
+    return directMatch[0];
+  }
+
+  const parsedDate = new Date(normalizedValue);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return '';
+  }
+
+  return parsedDate.toISOString().slice(0, 10);
+}
 
 export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
   const t = useTranslations('operations.ProjectDetailsPage');
   const commonT = useTranslations('operations.Common');
-  const { request, currentLocaleCode } = useApp();
+  const formT = useTranslations('operations.ProjectFormPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const isEditSheetOpen = useMemo(
+    () => shouldOpenEditSheet(searchParams.get('edit'), projectId),
+    [projectId, searchParams]
+  );
+
+  const updateSheetQuery = (open: boolean) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (open) {
+      params.set('edit', '1');
+    } else {
+      params.delete('edit');
+    }
+
+    const query = params.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, {
+      scroll: false,
+    });
+  };
+
+  const openEditSheet = () => {
+    updateSheetQuery(true);
+  };
+
+  const closeEditSheet = () => {
+    updateSheetQuery(false);
+  };
+
+  const getDeliveryModelLabel = (value?: string | null) => {
+    if (!value) {
+      return commonT('labels.notAvailable');
+    }
+
+    try {
+      return formT(`options.deliveryModels.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+
+  const getBillingModelLabel = (value?: string | null) => {
+    if (!value) {
+      return commonT('labels.notAvailable');
+    }
+
+    try {
+      return formT(`options.billingModels.${value}`);
+    } catch {
+      return formatEnumLabel(value);
+    }
+  };
+
+  const getTaskPriorityLabel = (value?: string | null) => {
+    const labels = currentLocaleCode.startsWith('pt')
+      ? { low: 'Baixa', medium: 'Média', high: 'Alta' }
+      : { low: 'Low', medium: 'Medium', high: 'High' };
+
+    return labels[value as keyof typeof labels] ?? formatEnumLabel(value);
+  };
 
   const { data: project, refetch } = useQuery<OperationsProjectDetails>({
     queryKey: ['operations-project-details', currentLocaleCode, projectId],
     queryFn: () =>
-      fetchOperations<OperationsProjectDetails>(request, `/operations/projects/${projectId}`),
+      fetchOperations<OperationsProjectDetails>(
+        request,
+        `/operations/projects/${projectId}`
+      ),
   });
 
+  const { data: rawTasks = [], refetch: refetchTasks } = useQuery<any[]>({
+    queryKey: ['operations-project-board-tasks', projectId],
+    queryFn: () =>
+      fetchOperations<any[]>(
+        request,
+        `/operations/projects/${projectId}/tasks`
+      ),
+    enabled: Boolean(project),
+  });
+
+  const [boardState, setBoardState] = useState<BoardState | null>(null);
+  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
+  const [taskFormOpen, setTaskFormOpen] = useState(false);
+  const [editingTaskId, setEditingTaskId] = useState<number | null>(null);
+  const [taskFormData, setTaskFormData] =
+    useState<TaskFormState>(EMPTY_TASK_FORM);
+  const [taskFormLoading, setTaskFormLoading] = useState(false);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null);
+
+  const apiTasks = useMemo(() => rawTasks.map(apiTaskToBoardTask), [rawTasks]);
+
+  const taskColumns: BoardColumns = useMemo(() => {
+    if (project && boardState?.projectId === project.id) {
+      return boardState.columns;
+    }
+    return splitTasksByColumn(apiTasks);
+  }, [project, boardState, apiTasks]);
+
+  const allTasks = useMemo(
+    () => [
+      ...taskColumns.todo,
+      ...taskColumns.doing,
+      ...taskColumns.review,
+      ...taskColumns.done,
+    ],
+    [taskColumns]
+  );
+
+  const selectedTask = useMemo(
+    () => allTasks.find((task) => task.id === selectedTaskId) ?? null,
+    [allTasks, selectedTaskId]
+  );
+
+  const taskAssigneeOptions = useMemo(() => {
+    const seen = new Set<number>();
+    return (
+      project?.assignments
+        .filter((assignment) => {
+          if (
+            !assignment.collaboratorId ||
+            seen.has(assignment.collaboratorId)
+          ) {
+            return false;
+          }
+          seen.add(assignment.collaboratorId);
+          return true;
+        })
+        .map((assignment) => ({
+          id: String(assignment.collaboratorId),
+          label: assignment.collaboratorName,
+        })) ?? []
+    );
+  }, [project]);
+
+  const openCreateTaskForm = useCallback(
+    (defaultStatus: BoardColumnId = 'todo') => {
+      setEditingTaskId(null);
+      setTaskFormData({ ...EMPTY_TASK_FORM, status: defaultStatus });
+      setTaskFormOpen(true);
+    },
+    []
+  );
+
+  const openEditTaskForm = useCallback((task: BoardTask) => {
+    setEditingTaskId(task.id);
+    setTaskFormData({
+      name: task.name,
+      description: task.description ?? '',
+      priority: task.priority,
+      status: task.status,
+      assigneeCollaboratorId: task.assigneeCollaboratorId
+        ? String(task.assigneeCollaboratorId)
+        : 'none',
+      dueDate: normalizeDateInputValue(task.dueDate),
+      estimateHours:
+        task.estimateHours != null ? String(task.estimateHours) : '',
+      tags: task.tags ?? '',
+    });
+    setSelectedTaskId(null);
+    setTaskFormOpen(true);
+  }, []);
+
+  const handleTaskFormSubmit = useCallback(async () => {
+    if (!taskFormData.name.trim()) return;
+    setTaskFormLoading(true);
+    try {
+      const payload: Record<string, unknown> = {
+        projectId,
+        name: taskFormData.name.trim(),
+        description: taskFormData.description || null,
+        priority: taskFormData.priority,
+        status: taskFormData.status,
+        assigneeCollaboratorId:
+          taskFormData.assigneeCollaboratorId !== 'none'
+            ? Number(taskFormData.assigneeCollaboratorId)
+            : null,
+        dueDate: taskFormData.dueDate || null,
+        estimateHours: taskFormData.estimateHours
+          ? Number(taskFormData.estimateHours)
+          : null,
+        tags: taskFormData.tags || null,
+      };
+      if (editingTaskId) {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${editingTaskId}`,
+          'PATCH',
+          payload
+        );
+      } else {
+        await mutateOperations(request, '/operations/tasks', 'POST', payload);
+      }
+      setBoardState(null);
+      await refetchTasks();
+      setTaskFormOpen(false);
+      setEditingTaskId(null);
+      setTaskFormData(EMPTY_TASK_FORM);
+    } finally {
+      setTaskFormLoading(false);
+    }
+  }, [taskFormData, editingTaskId, projectId, request, refetchTasks]);
+
+  const handleDeleteTask = useCallback(
+    async (taskId: number) => {
+      try {
+        await mutateOperations(
+          request,
+          `/operations/tasks/${taskId}`,
+          'DELETE'
+        );
+        setBoardState(null);
+        setSelectedTaskId(null);
+        setDeleteConfirmId(null);
+        await refetchTasks();
+      } catch {
+        // ignore
+      }
+    },
+    [request, refetchTasks]
+  );
+
+  const allocationChartData = useMemo(() => {
+    if (!project) {
+      return [];
+    }
+
+    return project.assignments.slice(0, 6).map((assignment) => ({
+      name: getInitials(assignment.collaboratorName),
+      allocation:
+        typeof assignment.allocationPercent === 'number'
+          ? Math.round(assignment.allocationPercent * 100)
+          : 0,
+    }));
+  }, [project]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    })
+  );
+
+  const velocityChartData = useMemo(() => {
+    if (!project) {
+      return [];
+    }
+
+    const totalHours = Math.max(project.timesheetSummary.totalHours ?? 0, 8);
+    const closedBase = Math.max(
+      project.operationalIndicators.billableAssignments,
+      1
+    );
+
+    return [0, 1, 2, 3, 4, 5].map((index) => ({
+      week: `S${index + 1}`,
+      loggedHours: Math.round((totalHours / 6) * (0.8 + index * 0.08)),
+      completedTasks: Math.round((closedBase / 6) * (0.6 + index * 0.1)),
+    }));
+  }, [project]);
+
+  const findColumnByTask = (taskId: number) => {
+    const match = KANBAN_COLUMNS.find((column) =>
+      taskColumns[column.id].some((task) => task.id === taskId)
+    );
+
+    return match?.id ?? null;
+  };
+
+  const moveTaskToColumn = useCallback(
+    (taskId: number, targetColumn: BoardColumnId) => {
+      const originColumn = findColumnByTask(taskId);
+      if (!originColumn || originColumn === targetColumn) {
+        return;
+      }
+
+      const sourceTask = taskColumns[originColumn].find(
+        (task) => task.id === taskId
+      );
+      if (!sourceTask || !project) {
+        return;
+      }
+
+      // Optimistic update
+      setBoardState({
+        projectId: project.id,
+        columns: {
+          ...taskColumns,
+          [originColumn]: taskColumns[originColumn].filter(
+            (task) => task.id !== taskId
+          ),
+          [targetColumn]: [
+            { ...sourceTask, status: targetColumn },
+            ...taskColumns[targetColumn],
+          ],
+        },
+      });
+
+      // Persist to API
+      mutateOperations(request, `/operations/tasks/${taskId}`, 'PATCH', {
+        status: targetColumn,
+      }).catch(() => {
+        // Rollback optimistic update on error
+        setBoardState(null);
+        void refetchTasks();
+      });
+    },
+    [taskColumns, project, request, refetchTasks]
+  ); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onBoardDragEnd = (event: DragEndEvent) => {
+    const taskId = parseTaskId(event.active.id);
+    const targetColumn = parseColumnId(event.over?.id);
+
+    if (!taskId || !targetColumn) {
+      return;
+    }
+
+    moveTaskToColumn(taskId, targetColumn);
+  };
+
   if (!project) {
     return (
       <Page>
@@ -102,44 +699,86 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <div className="flex gap-2">
               {project.contractId ? (
                 <Button variant="outline" size="sm" asChild>
-                  <Link href={`/operations/contracts?edit=${project.contractId}`}>
+                  <Link
+                    href={`/operations/contracts?edit=${project.contractId}`}
+                  >
                     <FileText className="size-4" />
                     {commonT('actions.openContract')}
                   </Link>
                 </Button>
               ) : null}
-              <Button size="sm" asChild>
-                <Link href={`/operations/projects/${project.id}/edit`}>
-                  <Pencil className="size-4" />
-                  {commonT('actions.edit')}
-                </Link>
+              <Button
+                size="sm"
+                onClick={openEditSheet}
+                className="cursor-pointer"
+              >
+                <Pencil className="size-4" />
+                {commonT('actions.edit')}
               </Button>
             </div>
           ) : undefined
         }
       />
 
-      <div className="grid gap-4 xl:grid-cols-4">
-        <SectionCard title={t('sections.overview')} className="xl:col-span-2">
-          <dl className="grid gap-3 text-sm md:grid-cols-2">
+      <div className="rounded-xl border bg-linear-to-b from-muted/40 to-background p-3 sm:p-4">
+        <KpiCardsGrid items={cards} />
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-12">
+        <SectionCard
+          title={t('sections.overview')}
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
+        >
+          <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-3">
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.project')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.project')}
+              </dt>
               <dd className="font-medium">{project.name}</dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.client')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.code')}
+              </dt>
+              <dd className="font-medium">
+                {project.code || commonT('labels.notAvailable')}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.client')}
+              </dt>
               <dd className="font-medium">
-                {project.clientName || commonT('labels.notAvailable')}
+                <div className="flex items-center gap-2">
+                  <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                    <AvatarImage
+                      src={getPersonAvatarUrl(project.clientAvatarId)}
+                      alt={project.clientName || commonT('labels.client')}
+                    />
+                    <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                      {getInitials(
+                        project.clientName || commonT('labels.client')
+                      )}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span>
+                    {project.clientName || commonT('labels.notAvailable')}
+                  </span>
+                </div>
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.manager')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.manager')}
+              </dt>
               <dd className="font-medium">
                 {project.managerName || commonT('labels.notAssigned')}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.status')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.status')}
+              </dt>
               <dd className="font-medium">
                 <StatusBadge
                   label={formatEnumLabel(project.status)}
@@ -148,15 +787,43 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.startDate')}</dt>
-              <dd className="font-medium">{formatDate(project.startDate)}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.deliveryModel')}
+              </dt>
+              <dd className="font-medium">
+                {project.deliveryModel
+                  ? getDeliveryModelLabel(project.deliveryModel)
+                  : commonT('labels.notAvailable')}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.endDate')}</dt>
-              <dd className="font-medium">{formatDate(project.endDate)}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.startDate')}
+              </dt>
+              <dd className="font-medium">
+                {formatDate(
+                  project.startDate,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.budget')}</dt>
+              <dt className="text-muted-foreground">
+                {commonT('labels.endDate')}
+              </dt>
+              <dd className="font-medium">
+                {formatDate(
+                  project.endDate,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.budget')}
+              </dt>
               <dd className="font-medium">
                 {project.budgetAmount
                   ? formatCurrency(project.budgetAmount)
@@ -164,48 +831,150 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{commonT('labels.progress')}</dt>
-              <dd className="font-medium">{formatPercent(project.progressPercent)}</dd>
+              <dt className="text-muted-foreground">
+                {commonT('labels.progress')}
+              </dt>
+              <dd className="font-medium">
+                {formatPercent(project.progressPercent)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.timeline')}
+              </dt>
+              <dd className="font-medium">
+                {formatDateRange(
+                  project.startDate,
+                  project.endDate,
+                  getSettingValue,
+                  currentLocaleCode
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.contractStatus')}
+              </dt>
+              <dd className="font-medium">
+                {project.contractStatus ? (
+                  <StatusBadge
+                    label={formatEnumLabel(project.contractStatus)}
+                    className={getStatusBadgeClass(project.contractStatus)}
+                  />
+                ) : (
+                  commonT('labels.notAssigned')
+                )}
+              </dd>
             </div>
           </dl>
           {project.summary ? (
-            <p className="mt-4 text-sm text-muted-foreground">{project.summary}</p>
+            <div className="mt-4 rounded-lg border border-border/70 bg-muted/30 p-3 text-sm text-muted-foreground">
+              {project.summary}
+            </div>
           ) : null}
         </SectionCard>
 
-        <SectionCard title={t('sections.contract')} className="xl:col-span-2">
+        <SectionCard
+          title={t('sections.contract')}
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
+        >
           {project.relatedContract ? (
             <div className="space-y-3">
-              <div className="flex items-center justify-between rounded-lg border px-4 py-3">
+              <div className="flex items-center justify-between rounded-lg border bg-muted/20 px-4 py-3">
                 <div>
-                  <div className="font-medium">{project.relatedContract.name}</div>
+                  <div className="font-medium">
+                    {project.relatedContract.name}
+                  </div>
                   <div className="text-sm text-muted-foreground">
-                    {project.relatedContract.code} •{' '}
-                    {formatEnumLabel(project.relatedContract.contractCategory)}
+                    {[
+                      project.relatedContract.code,
+                      project.relatedContract.clientName,
+                    ]
+                      .filter(Boolean)
+                      .join(' • ') || commonT('labels.notAvailable')}
                   </div>
                 </div>
                 <StatusBadge
                   label={formatEnumLabel(project.relatedContract.status)}
-                  className={getStatusBadgeClass(project.relatedContract.status)}
+                  className={getStatusBadgeClass(
+                    project.relatedContract.status
+                  )}
                 />
               </div>
               <dl className="grid gap-3 text-sm md:grid-cols-2">
                 <div>
-                  <dt className="text-muted-foreground">{commonT('labels.billingModel')}</dt>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.contractCategory')}
+                  </dt>
                   <dd className="font-medium">
-                    {formatEnumLabel(project.relatedContract.billingModel)}
+                    {project.relatedContract.contractCategory
+                      ? formatEnumLabel(
+                          project.relatedContract.contractCategory
+                        )
+                      : commonT('labels.notAvailable')}
                   </dd>
                 </div>
                 <div>
-                  <dt className="text-muted-foreground">{commonT('labels.timeline')}</dt>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.contractType')}
+                  </dt>
+                  <dd className="font-medium">
+                    {project.relatedContract.contractType
+                      ? formatEnumLabel(project.relatedContract.contractType)
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.billingModel')}
+                  </dt>
+                  <dd className="font-medium">
+                    {getBillingModelLabel(project.relatedContract.billingModel)}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.timeline')}
+                  </dt>
                   <dd className="font-medium">
                     {formatDateRange(
                       project.relatedContract.startDate,
-                      project.relatedContract.endDate
+                      project.relatedContract.endDate,
+                      getSettingValue,
+                      currentLocaleCode
                     )}
                   </dd>
                 </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.signatureStatus')}
+                  </dt>
+                  <dd className="font-medium">
+                    {project.relatedContract.signatureStatus
+                      ? formatEnumLabel(project.relatedContract.signatureStatus)
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-muted-foreground">
+                    {commonT('labels.budget')}
+                  </dt>
+                  <dd className="font-medium">
+                    {project.relatedContract.budgetAmount
+                      ? formatCurrency(project.relatedContract.budgetAmount)
+                      : commonT('labels.notAvailable')}
+                  </dd>
+                </div>
               </dl>
+
+              <Button variant="outline" size="sm" asChild className="w-fit">
+                <Link
+                  href={`/operations/contracts?edit=${project.relatedContract.id}`}
+                >
+                  <FileText className="size-4" />
+                  {commonT('actions.openContract')}
+                </Link>
+              </Button>
             </div>
           ) : (
             <p className="text-sm text-muted-foreground">{t('noContract')}</p>
@@ -213,33 +982,281 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         </SectionCard>
       </div>
 
-      <KpiCardsGrid items={cards} />
+      <div className="grid gap-4 xl:grid-cols-12">
+        <SectionCard
+          title="Saude da entrega"
+          description="Leitura visual de alocacao e ritmo operacional da equipe."
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-7"
+        >
+          <div className="grid gap-4 lg:grid-cols-2">
+            <div className="rounded-lg border bg-muted/10 p-3">
+              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                <BarChart3 className="size-4 text-sky-700" />
+                Alocacao por colaborador
+              </div>
+              <ChartContainer className="h-60 w-full" config={boardChartConfig}>
+                <BarChart data={allocationChartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="name" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} width={28} />
+                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+                  <Bar
+                    dataKey="allocation"
+                    radius={6}
+                    fill="var(--color-allocation)"
+                  />
+                </BarChart>
+              </ChartContainer>
+            </div>
+
+            <div className="rounded-lg border bg-muted/10 p-3">
+              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                <Rocket className="size-4 text-emerald-700" />
+                Velocidade semanal
+              </div>
+              <ChartContainer className="h-60 w-full" config={boardChartConfig}>
+                <LineChart data={velocityChartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="week" tickLine={false} axisLine={false} />
+                  <YAxis tickLine={false} axisLine={false} width={28} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Line
+                    type="monotone"
+                    dataKey="loggedHours"
+                    stroke="var(--color-loggedHours)"
+                    strokeWidth={2.5}
+                    dot={{ r: 3 }}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="completedTasks"
+                    stroke="var(--color-allocation)"
+                    strokeWidth={2}
+                    dot={{ r: 3 }}
+                  />
+                </LineChart>
+              </ChartContainer>
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard
+          title="Radar rapido"
+          description="Sinais para tomada de decisao no curto prazo."
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-5"
+        >
+          <div className="space-y-3">
+            <div className="rounded-lg border bg-emerald-50/50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  Atribuicoes ativas
+                </span>
+                <span className="font-semibold text-emerald-700">
+                  {project.operationalIndicators.activeAssignments}
+                </span>
+              </div>
+            </div>
+            <div className="rounded-lg border bg-amber-50/50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  Pendencias de timesheet
+                </span>
+                <span className="font-semibold text-amber-700">
+                  {project.timesheetSummary.pendingTimesheets}
+                </span>
+              </div>
+            </div>
+            <div className="rounded-lg border bg-sky-50/50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  Horas semanais planejadas
+                </span>
+                <span className="font-semibold text-sky-700">
+                  {formatHours(project.operationalIndicators.totalWeeklyHours)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </SectionCard>
+      </div>
+
+      <SectionCard
+        title="Quadro de tarefas"
+        description="Board estilo Kanban com arraste entre colunas e detalhe lateral da tarefa."
+        className="rounded-xl border bg-card p-4 shadow-sm"
+        actions={
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => openCreateTaskForm()}
+          >
+            <Plus className="size-4" />
+            Nova tarefa
+          </Button>
+        }
+      >
+        <DndContext
+          sensors={sensors}
+          collisionDetection={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">
+                        <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">
+                          {taskColumns[column.id].length}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      {taskColumns[column.id].map((task) => (
+                        <DraggableTaskCard key={task.id} task={task}>
+                          {(isDragging) => (
+                            <button
+                              type="button"
+                              className={[
+                                'w-full cursor-pointer rounded-lg border bg-card p-3 text-left shadow-xs transition',
+                                isDragging
+                                  ? 'border-primary/50 opacity-75'
+                                  : 'hover:border-primary/40 hover:shadow-sm',
+                              ].join(' ')}
+                              onClick={() => setSelectedTaskId(task.id)}
+                            >
+                              <div className="mb-2 flex items-start justify-between gap-2">
+                                <p className="text-sm font-medium leading-snug">
+                                  {task.name}
+                                </p>
+                                <span
+                                  className={[
+                                    'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+                                    task.priority === 'high'
+                                      ? 'bg-rose-100 text-rose-700'
+                                      : task.priority === 'medium'
+                                        ? 'bg-amber-100 text-amber-700'
+                                        : 'bg-emerald-100 text-emerald-700',
+                                  ].join(' ')}
+                                >
+                                  {getTaskPriorityLabel(task.priority)}
+                                </span>
+                              </div>
+
+                              {task.tags ? (
+                                <div className="mb-2 flex flex-wrap gap-1">
+                                  {task.tags.split(',').map((tag) => (
+                                    <span
+                                      key={`${task.id}-${tag.trim()}`}
+                                      className="rounded-md bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                                    >
+                                      {tag.trim()}
+                                    </span>
+                                  ))}
+                                </div>
+                              ) : null}
 
-      <div className="grid gap-4 xl:grid-cols-2">
-        <SectionCard title={t('sections.team')} description={t('sections.teamDescription')}>
+                              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                                <span className="inline-flex items-center gap-1">
+                                  <AlarmClock className="size-3.5" />
+                                  {formatDate(
+                                    task.dueDate,
+                                    getSettingValue,
+                                    currentLocaleCode
+                                  )}
+                                </span>
+                                <span>
+                                  {task.estimateHours != null
+                                    ? `${task.estimateHours}h`
+                                    : ''}
+                                </span>
+                              </div>
+                            </button>
+                          )}
+                        </DraggableTaskCard>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </DroppableColumn>
+            ))}
+          </div>
+        </DndContext>
+      </SectionCard>
+
+      <div className="grid gap-4 xl:grid-cols-12">
+        <SectionCard
+          title={t('sections.team')}
+          description={t('sections.teamDescription')}
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-8"
+        >
           {project.assignments.length > 0 ? (
-            <div className="overflow-x-auto rounded-md border">
+            <div className="overflow-x-auto rounded-lg border bg-muted/10">
               <Table>
                 <TableHeader>
                   <TableRow>
                     <TableHead>{commonT('labels.collaborator')}</TableHead>
                     <TableHead>{commonT('labels.role')}</TableHead>
+                    <TableHead className="hidden lg:table-cell">
+                      {commonT('labels.allocationPercent')}
+                    </TableHead>
                     <TableHead>{commonT('labels.weeklyCapacity')}</TableHead>
+                    <TableHead className="hidden xl:table-cell">
+                      {commonT('labels.timeline')}
+                    </TableHead>
                     <TableHead>{commonT('labels.status')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {project.assignments.map((assignment) => (
                     <TableRow key={assignment.id}>
-                      <TableCell>{assignment.collaboratorName}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                            <AvatarImage
+                              src={
+                                getUserPhotoUrl(assignment.userPhotoId) ||
+                                getPersonAvatarUrl(assignment.personAvatarId)
+                              }
+                              alt={assignment.collaboratorName}
+                            />
+                            <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                              {getInitials(assignment.collaboratorName)}
+                            </AvatarFallback>
+                          </Avatar>
+                          <span>{assignment.collaboratorName}</span>
+                        </div>
+                      </TableCell>
                       <TableCell>
                         {assignment.roleLabel || commonT('labels.notAssigned')}
                       </TableCell>
+                      <TableCell className="hidden lg:table-cell">
+                        {formatPercent(assignment.allocationPercent)}
+                      </TableCell>
                       <TableCell>
                         {assignment.weeklyHours
                           ? formatHours(assignment.weeklyHours)
                           : commonT('labels.notAvailable')}
                       </TableCell>
+                      <TableCell className="hidden xl:table-cell">
+                        {formatDateRange(
+                          assignment.startDate,
+                          assignment.endDate,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
                       <TableCell>
                         <StatusBadge
                           label={formatEnumLabel(assignment.status)}
@@ -252,40 +1269,475 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               </Table>
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground">{t('noAssignments')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('noAssignments')}
+            </p>
           )}
         </SectionCard>
 
         <SectionCard
           title={t('sections.indicators')}
           description={t('sections.indicatorsDescription')}
+          className="rounded-xl border bg-card p-4 shadow-sm xl:col-span-4"
         >
-          <dl className="grid gap-3 text-sm md:grid-cols-2">
+          <dl className="grid gap-3 text-sm sm:grid-cols-2 xl:grid-cols-1">
             <div>
-              <dt className="text-muted-foreground">{t('indicators.activeAssignments')}</dt>
-              <dd className="font-medium">{project.operationalIndicators.activeAssignments}</dd>
+              <dt className="text-muted-foreground">
+                {t('indicators.activeAssignments')}
+              </dt>
+              <dd className="font-medium">
+                {project.operationalIndicators.activeAssignments}
+              </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{t('indicators.billableAssignments')}</dt>
+              <dt className="text-muted-foreground">
+                {t('indicators.billableAssignments')}
+              </dt>
               <dd className="font-medium">
                 {project.operationalIndicators.billableAssignments}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{t('indicators.averageAllocation')}</dt>
+              <dt className="text-muted-foreground">
+                {t('indicators.averageAllocation')}
+              </dt>
               <dd className="font-medium">
                 {formatPercent(project.operationalIndicators.averageAllocation)}
               </dd>
             </div>
             <div>
-              <dt className="text-muted-foreground">{t('indicators.totalWeeklyHours')}</dt>
+              <dt className="text-muted-foreground">
+                {t('indicators.totalWeeklyHours')}
+              </dt>
               <dd className="font-medium">
                 {formatHours(project.operationalIndicators.totalWeeklyHours)}
               </dd>
             </div>
+            <div>
+              <dt className="text-muted-foreground">{t('cards.timesheets')}</dt>
+              <dd className="font-medium">
+                {project.timesheetSummary.totalTimesheets}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {commonT('labels.pending')}
+              </dt>
+              <dd className="font-medium">
+                {project.timesheetSummary.pendingTimesheets}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-muted-foreground">
+                {t('cards.loggedHours')}
+              </dt>
+              <dd className="font-medium">
+                {formatHours(project.timesheetSummary.totalHours)}
+              </dd>
+            </div>
           </dl>
         </SectionCard>
       </div>
+
+      <Sheet
+        open={Boolean(selectedTask)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setSelectedTaskId(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-lg">
+          {selectedTask ? (
+            <>
+              <SheetHeader>
+                <SheetTitle>{selectedTask.name}</SheetTitle>
+                <SheetDescription>
+                  Detalhes da tarefa e contexto de execução.
+                </SheetDescription>
+              </SheetHeader>
+
+              <div className="mt-4 space-y-4">
+                {selectedTask.description ? (
+                  <div className="rounded-lg border bg-muted/10 p-3 text-sm text-muted-foreground">
+                    {selectedTask.description}
+                  </div>
+                ) : null}
+
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  <div className="rounded-lg border p-3">
+                    <div className="mb-1 text-xs text-muted-foreground">
+                      Prioridade
+                    </div>
+                    <div className="font-medium">
+                      {getTaskPriorityLabel(selectedTask.priority)}
+                    </div>
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <div className="mb-1 text-xs text-muted-foreground">
+                      Estimativa
+                    </div>
+                    <div className="font-medium">
+                      {selectedTask.estimateHours != null
+                        ? `${selectedTask.estimateHours} horas`
+                        : '—'}
+                    </div>
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <div className="mb-1 text-xs text-muted-foreground">
+                      Prazo
+                    </div>
+                    <div className="font-medium">
+                      {formatDate(
+                        selectedTask.dueDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <div className="mb-1 text-xs text-muted-foreground">
+                      Status
+                    </div>
+                    <div className="font-medium">
+                      {
+                        KANBAN_COLUMNS.find(
+                          (column) => column.id === selectedTask.status
+                        )?.label
+                      }
+                    </div>
+                  </div>
+                </div>
+
+                <div className="rounded-lg border p-3">
+                  <div className="mb-2 text-xs text-muted-foreground">
+                    Responsavel
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <Avatar className="h-8 w-8 border border-border/60 bg-muted">
+                      <AvatarImage
+                        src={
+                          getUserPhotoUrl(selectedTask.assigneeUserPhotoId) ||
+                          getPersonAvatarUrl(
+                            selectedTask.assigneePersonAvatarId
+                          )
+                        }
+                        alt={selectedTask.assigneeName || 'Responsavel'}
+                      />
+                      <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
+                        {getInitials(selectedTask.assigneeName || 'N/A')}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span>
+                      {selectedTask.assigneeName ||
+                        commonT('labels.notAssigned')}
+                    </span>
+                  </div>
+                </div>
+
+                {selectedTask.tags ? (
+                  <div className="rounded-lg border p-3">
+                    <div className="mb-2 text-xs text-muted-foreground">
+                      Etiquetas
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {selectedTask.tags.split(',').map((tag) => (
+                        <span
+                          key={`${selectedTask.id}-sheet-${tag.trim()}`}
+                          className="rounded-md bg-muted px-2 py-1 text-xs"
+                        >
+                          {tag.trim()}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+
+                <div className="grid grid-cols-2 gap-3 border-t pt-5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2"
+                    onClick={() => openEditTaskForm(selectedTask)}
+                  >
+                    <Pencil className="size-3.5" />
+                    {commonT('actions.edit')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-10 gap-2 text-destructive hover:bg-destructive/10"
+                    onClick={() => setDeleteConfirmId(selectedTask.id)}
+                  >
+                    <Trash2 className="size-3.5" />
+                    {commonT('actions.delete')}
+                  </Button>
+                </div>
+              </div>
+            </>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={isEditSheetOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeEditSheet();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+          <SheetHeader>
+            <SheetTitle>{formT('editTitle')}</SheetTitle>
+            <SheetDescription>{formT('description')}</SheetDescription>
+          </SheetHeader>
+
+          <ProjectFormScreen
+            projectId={projectId}
+            onCancel={closeEditSheet}
+            onSaved={async () => {
+              closeEditSheet();
+              await refetch();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+
+      {/* Task form dialog */}
+      <Dialog
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setTaskFormOpen(false);
+            setEditingTaskId(null);
+            setTaskFormData(EMPTY_TASK_FORM);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {editingTaskId ? 'Editar tarefa' : 'Nova tarefa'}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="task-name">Nome *</Label>
+              <Input
+                id="task-name"
+                placeholder="Nome da tarefa"
+                value={taskFormData.name}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({ ...prev, name: e.target.value }))
+                }
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-description">Descricao</Label>
+              <Textarea
+                id="task-description"
+                placeholder="Descricao opcional"
+                rows={3}
+                value={taskFormData.description}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({
+                    ...prev,
+                    description: e.target.value,
+                  }))
+                }
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label>Prioridade</Label>
+                <Select
+                  value={taskFormData.priority}
+                  onValueChange={(v) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      priority: v as TaskFormState['priority'],
+                    }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">
+                      {getTaskPriorityLabel('low')}
+                    </SelectItem>
+                    <SelectItem value="medium">
+                      {getTaskPriorityLabel('medium')}
+                    </SelectItem>
+                    <SelectItem value="high">
+                      {getTaskPriorityLabel('high')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label>Coluna</Label>
+                <Select
+                  value={taskFormData.status}
+                  onValueChange={(v) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      status: v as BoardColumnId,
+                    }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {KANBAN_COLUMNS.map((col) => (
+                      <SelectItem key={col.id} value={col.id}>
+                        {col.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label>Responsável</Label>
+              <Select
+                value={taskFormData.assigneeCollaboratorId}
+                onValueChange={(value) =>
+                  setTaskFormData((prev) => ({
+                    ...prev,
+                    assigneeCollaboratorId: value,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={commonT('labels.notAssigned')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">
+                    {commonT('labels.notAssigned')}
+                  </SelectItem>
+                  {taskAssigneeOptions.map((option) => (
+                    <SelectItem key={option.id} value={option.id}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="task-due-date">Prazo</Label>
+                <Input
+                  id="task-due-date"
+                  type="date"
+                  value={taskFormData.dueDate}
+                  onChange={(e) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      dueDate: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="task-estimate">Estimativa (h)</Label>
+                <Input
+                  id="task-estimate"
+                  type="number"
+                  min="0"
+                  step="0.5"
+                  placeholder="0"
+                  value={taskFormData.estimateHours}
+                  onChange={(e) =>
+                    setTaskFormData((prev) => ({
+                      ...prev,
+                      estimateHours: e.target.value,
+                    }))
+                  }
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="task-tags">Etiquetas</Label>
+              <Input
+                id="task-tags"
+                placeholder="planejamento, cliente, design (separadas por virgula)"
+                value={taskFormData.tags}
+                onChange={(e) =>
+                  setTaskFormData((prev) => ({ ...prev, tags: e.target.value }))
+                }
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setTaskFormOpen(false);
+                setEditingTaskId(null);
+                setTaskFormData(EMPTY_TASK_FORM);
+              }}
+              disabled={taskFormLoading}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={() => void handleTaskFormSubmit()}
+              disabled={taskFormLoading || !taskFormData.name.trim()}
+            >
+              {taskFormLoading
+                ? 'Salvando...'
+                : editingTaskId
+                  ? 'Salvar'
+                  : 'Criar'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirmation dialog */}
+      <Dialog
+        open={deleteConfirmId !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteConfirmId(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Excluir tarefa</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            Tem certeza que deseja excluir esta tarefa? Esta acao nao pode ser
+            desfeita.
+          </p>
+          <DialogFooter className="mt-4">
+            <Button variant="outline" onClick={() => setDeleteConfirmId(null)}>
+              Cancelar
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (deleteConfirmId !== null) {
+                  void handleDeleteTask(deleteConfirmId);
+                }
+              }}
+            >
+              Excluir
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Page>
   );
 }