first commit

src/components/tarefas/TarefaKanban.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Tarefa } from '../../types/entities';
+import { TarefaCard } from './TarefaCard';
+import api from '../../services/api';
+
+interface TarefaKanbanProps {
+  onEdit: (tarefa: Tarefa) => void;
+  onStatusChange: (id: string, status: string, progresso?: number) => void;
+}
+
+const colunas = [
+  { id: 'PENDENTE', titulo: 'Pendentes' },
+  { id: 'EM_ANDAMENTO', titulo: 'Em Andamento' },
+  { id: 'CONCLUIDA', titulo: 'Concluídas' },
+];
+
+export const TarefaKanban: React.FC<TarefaKanbanProps> = ({ onEdit, onStatusChange }) => {
+  const { data: tarefas = [], refetch } = useQuery('tarefas', async () => {
+    const response = await api.get('/tarefas');
+    return response.data;
+  });
+
+  const handleDragEnd = async (result: any) => {
+    if (!result.destination) return;
+
+    const { draggableId, source, destination } = result;
+    
+    if (source.droppableId !== destination.droppableId) {
+      onStatusChange(draggableId, destination.droppableId);
+    }
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {colunas.map((coluna) => (
+          <div key={coluna.id} className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+              {coluna.titulo}
+            </h3>
+            
+            <Droppable droppableId={coluna.id}>
+              {(provided) => (
+                <div
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className="space-y-4 min-h-[200px]"
+                >
+                  {tarefas
+                    .filter((tarefa: Tarefa) => tarefa.status === coluna.id)
+                    .map((tarefa: Tarefa, index: number) => (
+                      <TarefaCard
+                        key={tarefa.id}
+                        tarefa={tarefa}
+                        index={index}
+                        onEdit={onEdit}
+                        onStatusChange={onStatusChange}
+                      />
+                    ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </div>
+        ))}
+      </div>
+    </DragDropContext>
+  );
+};