dashboard: reimaginacao

Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>

src/components/dashboard/WorkflowTarefas.tsx

@@ -47,31 +47,43 @@ export const WorkflowTarefas: React.FC = () => {
   return (
     <div className="flex flex-col gap-4">
       {tarefasAtivas.map((tarefa: Tarefa) => (
-        <div key={tarefa.id} className="border rounded p-4 shadow flex justify-between items-center">
+        <div key={tarefa.id} className="border rounded p-4 shadow flex flex-col gap-2">
-          <span className="font-medium">{tarefa.titulo}</span>
+          <div className="flex justify-between items-center">
-          <span className={`px-2 py-1 rounded text-xs ${
+            <span className="font-medium">{tarefa.titulo}</span>
-            tarefa.status === 'CONCLUIDA' ? 'bg-green-100 text-green-700' : tarefa.status === 'EM_ANDAMENTO' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700'
+            <span className={`px-2 py-1 rounded text-xs ${
-          }`}>
+              tarefa.status === 'CONCLUIDA' ? 'bg-green-100 text-green-700' : tarefa.status === 'EM_ANDAMENTO' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700'
-            {tarefa.status.replace('_', ' ')}
+            }`}>
-          </span>
+              {tarefa.status.replace('_', ' ')}
-          <div className="flex items-center gap-2">
+            </span>
-            <button
+            <div className="flex items-center gap-2">
-              onClick={() => handleEdit(tarefa)}
-              className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"
-              title="Editar"
-            >
-              <PencilIcon className="h-5 w-5" />
-            </button>
-            {canDelete && (
               <button
-                onClick={() => handleDelete(tarefa.id)}
+                onClick={() => handleEdit(tarefa)}
-                className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"
-                title="Excluir"
+                title="Editar"
               >
-                <TrashIcon className="h-5 w-5" />
+                <PencilIcon className="h-5 w-5" />
               </button>
-            )}
+              {canDelete && (
+                <button
+                  onClick={() => handleDelete(tarefa.id)}
+                  className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
+                  title="Excluir"
+                >
+                  <TrashIcon className="h-5 w-5" />
+                </button>
+              )}
+            </div>
           </div>
+          {/* Listagem das subtarefas vinculadas */}
+          {tarefa.subtarefas && tarefa.subtarefas.length > 0 && (
+            <ul className="mt-2 ml-2 list-disc text-sm text-gray-700 dark:text-gray-300">
+              {tarefa.subtarefas.map((sub) => (
+                <li key={sub.id} className={sub.concluida ? 'line-through text-gray-400' : ''}>
+                  {sub.titulo} {sub.concluida ? '(Concluída)' : ''}
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       ))}
     </div>