From da18ab77ad70a9f7afbc2c845f7de61441d292d6 Mon Sep 17 00:00:00 2001 From: Gabriel Santana de Menezes Date: Sun, 3 May 2026 21:57:35 -0400 Subject: [PATCH] novo projetos --- frontend/src/pages/ProjectsPage.tsx | 370 +++++++++++++++++----------- 1 file changed, 231 insertions(+), 139 deletions(-) diff --git a/frontend/src/pages/ProjectsPage.tsx b/frontend/src/pages/ProjectsPage.tsx index dbce260..40058c4 100644 --- a/frontend/src/pages/ProjectsPage.tsx +++ b/frontend/src/pages/ProjectsPage.tsx @@ -5,19 +5,25 @@ import { Plus, Search, Building2, - Layout, ArrowRight, Loader2, X, + Target, + Rocket, + ShieldCheck, + ExternalLink, + ChevronRight } from "lucide-react"; import { useAuth } from "../contexts/AuthContext"; import { projectService, type Project } from "../services/projectService"; +import { cn } from "../lib/utils"; export const ProjectsPage: React.FC = () => { const { activeOrg } = useAuth(); const [projects, setProjects] = useState([]); const [isLoading, setIsLoading] = useState(true); const [isCreating, setIsCreating] = useState(false); + const [showCreateForm, setShowCreateForm] = useState(false); const [newProjectName, setNewProjectName] = useState(""); const [searchQuery, setSearchQuery] = useState(""); const [error, setError] = useState(null); @@ -45,6 +51,7 @@ export const ProjectsPage: React.FC = () => { if (!activeOrg || !newProjectName.trim()) return; setIsCreating(true); + setError(null); try { const newProject = await projectService.create( activeOrg.id, @@ -52,10 +59,11 @@ export const ProjectsPage: React.FC = () => { ); setProjects((prev) => [...prev, newProject]); setNewProjectName(""); - setIsCreating(false); + setShowCreateForm(false); } catch (err) { console.error("Failed to create project", err); setError("Falha ao criar o projeto."); + } finally { setIsCreating(false); } }; @@ -82,168 +90,252 @@ export const ProjectsPage: React.FC = () => { } return ( -
- {/* Header */} -
+
+ {/* Header Section */} +
-
- - Gerenciamento +
+ + Workspace
-

- Projetos de {activeOrg.name} +

+ Projetos em {activeOrg.name}

-

- Organize suas tarefas em projetos específicos para melhor - acompanhamento. +

+ Organize suas tarefas em fluxos de trabalho específicos.

-
-
- +
+ setSearchQuery(e.target.value)} - className="pl-12 pr-6 py-3.5 bg-surface border border-border-soft rounded-2xl outline-none focus:border-brand focus:ring-4 focus:ring-brand/5 transition-all w-full md:w-64 font-medium" + className="pl-10 pr-4 py-2.5 bg-surface border border-border-soft rounded-xl text-sm outline-none focus:border-brand focus:ring-4 focus:ring-brand/5 transition-all w-48 font-medium" />
-
-
- -
- {/* New Project Form */} -
- setShowCreateForm(true)} + className="inline-flex items-center justify-center gap-2 rounded-xl bg-brand px-6 py-3 text-sm font-bold text-white shadow-lg shadow-brand/20 transition-all hover:scale-[1.02] hover:bg-brand-dark active:scale-95" > -
- -
-

- Novo Projeto -

-

- Crie um novo contêiner para suas tarefas e objetivos. -

+ + Novo Projeto + +
+
-
-
- - setNewProjectName(e.target.value)} - className="w-full px-5 py-4 bg-app-bg border border-border-soft rounded-2xl outline-none focus:border-brand focus:ring-4 focus:ring-brand/5 transition-all font-bold" - /> -
- - -
- - {error && ( - - - {error} - - )} - + {/* Projects Grid */} +
+
+ +

Todos os Projetos

- {/* Projects List */} -
- {isLoading ? ( -
- {[1, 2, 4, 5, 6].map((i) => ( -
- ))} -
- ) : filteredProjects.length === 0 ? ( -
-
+
+ + {filteredProjects.map((project, index) => ( + +
+
+ {project.name.substring(0, 2).toUpperCase()} +
+ +

+ {project.name} +

+ +
+ + ID #{project.id} + + + Ativo + +
+ +
+
+ {[1, 2, 3].map(i => ( +
+ U{i} +
+ ))} +
+ +
+
+ + {/* Decorations */} +
+ + ))} + + {/* Quick Create Card */} + + +
+ + {filteredProjects.length === 0 && !isLoading && ( +
+

Nenhum projeto encontrado

- {searchQuery - ? "Nenhum projeto corresponde à sua busca." - : "Sua organização ainda não possui projetos."} + Sua organização ainda não possui projetos para exibir.

-
- ) : ( -
- - {filteredProjects.map((project, index) => ( - -
-
- {project.name.charAt(0).toUpperCase()} -
-
-

- {project.name} -

-
- - ID #{project.id} - -
-
-
-
- -
- - ))} - -
- )} +
+ )} +
+ + {/* Discovery Section */} +
+
+

+ Acelere sua Produtividade +

+

+ Projetos ajudam a categorizar tarefas e manter o foco no que realmente importa. Defina metas e acompanhe o progresso em tempo real. +

+
+ +
+
+ + {/* Abstract shapes */} +
+
+ +
+ + {/* Info Section */} +
+
+
+ +
+

Foco em Objetivos

+

+ Cada projeto pode ser encarado como um objetivo específico. Use-os para separar demandas de diferentes clientes ou departamentos da sua organização. +

+ + Melhores práticas de organização + + +
+ +
+
+ +
+

Colaboração Segura

+

+ Projetos herdam as permissões da organização. Apenas membros autorizados podem visualizar e interagir com as tarefas de cada projeto. +

+ + Ver detalhes de visibilidade + +
+ + {/* Create Project Modal */} + + {showCreateForm && ( +
+ + + +
+
+ +
+

Novo Projeto

+

Dê um nome ao seu novo espaço de trabalho em {activeOrg.name}.

+
+ +
+
+ + setNewProjectName(e.target.value)} + className="block w-full px-5 py-4 bg-surface-muted/50 border border-border-soft rounded-2xl text-text-main placeholder-text-muted/60 focus:outline-none focus:ring-4 focus:ring-brand/10 focus:border-brand transition-all font-bold" + placeholder="Ex: Redesign Mobile, Q4 Marketing..." + /> +
+ + {error && ( +
+ + {error} +
+ )} + + +
+ +
+ )} +
); };