57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
|
|
interface Tarefa {
|
|
id: string;
|
|
titulo: string;
|
|
status: string;
|
|
}
|
|
|
|
export const WorkflowTarefas: React.FC = () => {
|
|
const { token } = useAuth();
|
|
const [tarefas, setTarefas] = useState<Tarefa[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchTarefas() {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const res = await fetch('/api/tarefas', {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
if (!res.ok) throw new Error('Erro ao buscar tarefas');
|
|
const data = await res.json();
|
|
setTarefas(data);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchTarefas();
|
|
}, [token]);
|
|
|
|
if (loading) return <div>Carregando tarefas...</div>;
|
|
if (error) return <div className="text-red-600">{error}</div>;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{tarefas.map((tarefa) => (
|
|
<div key={tarefa.id} className="border rounded p-4 shadow flex justify-between items-center">
|
|
<span className="font-medium">{tarefa.titulo}</span>
|
|
<span className={`px-2 py-1 rounded text-xs ${
|
|
tarefa.status === 'Concluída' ? 'bg-green-100 text-green-700' : tarefa.status === 'Em andamento' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700'
|
|
}`}>
|
|
{tarefa.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|