dashboard: reimaginacao

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

src/components/dashboard/WorkflowTarefas.tsx

@@ -47,15 +47,30 @@ 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 flex-col gap-2">
+        <div key={tarefa.id} className="border rounded-lg p-4 shadow flex flex-col gap-2 bg-white dark:bg-gray-800">
-          <div className="flex justify-between items-center">
+          <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
-            <span className="font-medium">{tarefa.titulo}</span>
+            <div className="flex items-center gap-3">
-            <span className={`px-2 py-1 rounded text-xs ${
+              <span className="font-medium text-lg text-gray-900 dark:text-white">{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'
+              {/* Exibe o grau de prioridade com cor */}
-            }`}>
+              <span className={`px-2 py-1 rounded text-xs font-semibold border ${
-              {tarefa.status.replace('_', ' ')}
+                tarefa.prioridade === 'URGENTE' ? 'bg-red-100 text-red-700 border-red-300' :
-            </span>
+                tarefa.prioridade === 'ALTA' ? 'bg-orange-100 text-orange-700 border-orange-300' :
-            <div className="flex items-center gap-2">
+                tarefa.prioridade === 'MEDIA' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
+                'bg-green-100 text-green-700 border-green-300'
+              }`}>
+                {tarefa.prioridade === 'URGENTE' ? 'Urgente' : tarefa.prioridade === 'ALTA' ? 'Alta' : tarefa.prioridade === 'MEDIA' ? 'Média' : 'Baixa'}
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              {/* Status da tarefa */}
+              <span className={`px-2 py-1 rounded text-xs font-semibold border ${
+                tarefa.status === 'CONCLUIDA' ? 'bg-green-100 text-green-700 border-green-300' :
+                tarefa.status === 'EM_ANDAMENTO' ? 'bg-blue-100 text-blue-700 border-blue-300' :
+                tarefa.status === 'PENDENTE' ? 'bg-gray-100 text-gray-700 border-gray-300' :
+                'bg-red-100 text-red-700 border-red-300'
+              }`}>
+                {tarefa.status.replace('_', ' ')}
+              </span>
               <button
                 onClick={() => handleEdit(tarefa)}
                 className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300"