erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enable project catalog management

Browse Source
This commit is contained in:
Erik
2025-11-27 16:22:14 -03:00
parent f077569bc1
commit 1138747565
6 changed files with 729 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
frontend/src/app/admin/projetos/page.tsx
View File

@@ -1,8 +1,105 @@
"use client";
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useToast } from '@/contexts/ToastContext';
import { useConfirm } from '@/contexts/ConfirmContext';
interface Project {
id: string;
title: string;
category: string;
client: string | null;
status: string;
completionDate: string | null;
description: string | null;
coverImage: string | null;
galleryImages: string[];
featured: boolean;
createdAt: string;
updatedAt: string;
}
const STATUS_STYLES: Record<string, string> = {
'Concluído': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
'Em andamento': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
'Rascunho': 'bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-gray-300',
};
export default function ProjectsList() {
const [projects, setProjects] = useState<Project[]>([]);
const [loading, setLoading] = useState(true);
const { success, error } = useToast();
const { confirm } = useConfirm();
useEffect(() => {
fetchProjects();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchProjects = async () => {
try {
setLoading(true);
const response = await fetch('/api/projects');
if (!response.ok) {
throw new Error('Falha ao carregar projetos');
}
const data: Project[] = await response.json();
setProjects(data);
} catch (err) {
console.error('Erro ao carregar projetos:', err);
error('Não foi possível carregar os projetos.');
} finally {
setLoading(false);
}
};
const handleDelete = async (id: string) => {
const confirmed = await confirm({
title: 'Excluir projeto',
message: 'Tem certeza que deseja remover este projeto? Esta ação não pode ser desfeita.',
confirmText: 'Excluir',
cancelText: 'Cancelar',
type: 'danger',
});
if (!confirmed) return;
try {
const response = await fetch(`/api/projects/${id}`, { method: 'DELETE' });
const result = await response.json();
if (!response.ok) {
throw new Error(result?.error || 'Falha ao excluir projeto');
}
success('Projeto excluído com sucesso!');
fetchProjects();
} catch (err) {
console.error('Erro ao excluir projeto:', err);
error('Não foi possível excluir o projeto.');
}
};
const renderStatus = (status: string) => {
const style = STATUS_STYLES[status] || 'bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-gray-300';
return (
<span className={`px-3 py-1 rounded-full text-xs font-bold ${style}`}>
{status}
</span>
);
};
const formatDate = (value: string | null) => {
if (!value) return '—';
try {
return new Intl.DateTimeFormat('pt-BR').format(new Date(value));
} catch (err) {
console.error('Erro ao formatar data:', err);
return '—';
}
};
return (
<div>
<div className="flex items-center justify-between mb-8">
@@ -10,8 +107,8 @@ export default function ProjectsList() {
<h1 className="text-3xl font-bold font-headline text-secondary dark:text-white mb-2">Projetos</h1>
<p className="text-gray-500 dark:text-gray-400">Gerencie os projetos exibidos no portfólio.</p>
</div>
<Link
href="/admin/projetos/novo"
<Link
href="/admin/projetos/novo"
className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2"
>
<i className="ri-add-line text-xl"></i>
@@ -20,58 +117,74 @@ export default function ProjectsList() {
</div>
<div className="bg-white dark:bg-secondary rounded-xl border border-gray-200 dark:border-white/10 shadow-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-gray-50 dark:bg-white/5 border-b border-gray-200 dark:border-white/10">
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Projeto</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Categoria</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Cliente</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Status</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider text-right">Ações</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-white/5">
{[
{ title: 'Adequação Coca-Cola', cat: 'Engenharia Veicular', client: 'Coca-Cola FEMSA', status: 'Concluído' },
{ title: 'Laudo Guindaste Articulado', cat: 'Inspeção Técnica', client: 'Logística Express', status: 'Concluído' },
{ title: 'Dispositivo de Içamento', cat: 'Projeto Mecânico', client: 'Metalúrgica ABC', status: 'Em Andamento' },
].map((project, index) => (
<tr key={index} className="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<td className="p-4">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-lg bg-gray-200 dark:bg-white/10 overflow-hidden shrink-0">
<div className="w-full h-full bg-gray-300 dark:bg-white/20"></div>
</div>
<span className="font-bold text-secondary dark:text-white">{project.title}</span>
</div>
</td>
<td className="p-4 text-gray-600 dark:text-gray-400">{project.cat}</td>
<td className="p-4 text-gray-600 dark:text-gray-400">{project.client}</td>
<td className="p-4">
<span className={`px-3 py-1 rounded-full text-xs font-bold ${
project.status === 'Concluído'
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
}`}>
{project.status}
</span>
</td>
<td className="p-4 text-right">
<div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button className="w-8 h-8 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 flex items-center justify-center text-gray-500 hover:text-primary transition-colors cursor-pointer" title="Editar">
<i className="ri-pencil-line"></i>
</button>
<button className="w-8 h-8 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center justify-center text-gray-500 hover:text-red-500 transition-colors cursor-pointer" title="Excluir">
<i className="ri-delete-bin-line"></i>
</button>
</div>
</td>
{loading ? (
<div className="flex items-center justify-center py-16">
<i className="ri-loader-4-line animate-spin text-3xl text-primary"></i>
</div>
) : projects.length === 0 ? (
<div className="py-16 text-center text-gray-500 dark:text-gray-400 flex flex-col items-center gap-3">
<i className="ri-briefcase-line text-4xl"></i>
Nenhum projeto cadastrado ainda.
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<thead>
<tr className="bg-gray-50 dark:bg-white/5 border-b border-gray-200 dark:border-white/10">
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Projeto</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Categoria</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Cliente</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Conclusão</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider">Status</th>
<th className="p-4 font-bold text-gray-600 dark:text-gray-300 text-sm uppercase tracking-wider text-right">Ações</th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-white/5">
{projects.map((project) => (
<tr key={project.id} className="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<td className="p-4">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-lg bg-gray-200 dark:bg-white/10 overflow-hidden shrink-0 border border-gray-100 dark:border-white/10">
{project.coverImage ? (
<img src={project.coverImage} alt={project.title} className="w-full h-full object-cover" />
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<i className="ri-image-line"></i>
</div>
)}
</div>
<div>
<p className="font-bold text-secondary dark:text-white flex items-center gap-2">
{project.title}
{project.featured && (
<span className="text-[10px] uppercase tracking-wider bg-primary/10 text-primary px-2 py-0.5 rounded-full font-bold">Destaque</span>
)}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Criado em {formatDate(project.createdAt)}</p>
</div>
</div>
</td>
<td className="p-4 text-gray-600 dark:text-gray-400">{project.category}</td>
<td className="p-4 text-gray-600 dark:text-gray-400">{project.client || '—'}</td>
<td className="p-4 text-gray-600 dark:text-gray-400">{formatDate(project.completionDate)}</td>
<td className="p-4">{renderStatus(project.status)}</td>
<td className="p-4 text-right">
<div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => handleDelete(project.id)}
className="w-8 h-8 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center justify-center text-gray-500 hover:text-red-500 transition-colors cursor-pointer"
title="Excluir"
>
<i className="ri-delete-bin-line"></i>
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
);