dashboard: reimaginacao
Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
1 parent
9160939de2
commit
80df7310f3
1 file changed
+22
-35
@@ -1,50 +1,37 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
interface Tarefa {
|
||||
id: string;
|
||||
titulo: string;
|
||||
status: string;
|
||||
}
|
||||
import React from 'react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useTarefas } from '../../hooks/useTarefas';
|
||||
import { Tarefa } from '../../types/entities';
|
||||
|
||||
export const WorkflowTarefas: React.FC = () => {
|
||||
const [tarefas, setTarefas] = useState<Tarefa[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { user } = useAuth();
|
||||
const { tarefas, isLoading, deleteTarefa } = useTarefas();
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchTarefas() {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const res = await fetch('/api/tarefas', {
|
||||
headers: {
|
||||
'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);
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
|
||||
Carregando tarefas...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
fetchTarefas();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div>Carregando tarefas...</div>;
|
||||
if (error) return <div className="text-red-600">{error}</div>;
|
||||
if (!tarefas || tarefas.length === 0) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
|
||||
Nenhuma tarefa encontrada.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{tarefas.map((tarefa) => (
|
||||
{tarefas.map((tarefa: 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 === '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}
|
||||
{tarefa.status.replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user