feat: Melhora interface de seleção de workspaces para gestores
- Adiciona contador visual de colaboradores - Cards destacados com gradiente verde para gestores - Separação clara entre 'Sua Equipe' e 'Seus Gestores' - Mostra email dos colaboradores nos cards - Mensagem visual quando não há workspaces - Botão 'Adicionar Novo Colaborador' contextual - Documentação completa do sistema de gestão de equipe
This commit is contained in:
@@ -16,13 +16,21 @@ export default async function WorkspacesPage() {
|
||||
where: { id: session.user.id },
|
||||
include: {
|
||||
workspacesAsEmployee: {
|
||||
where: { status: "ACTIVE" },
|
||||
where: {
|
||||
status: {
|
||||
in: ["ACTIVE", "PENDING_INVITE"]
|
||||
}
|
||||
},
|
||||
include: {
|
||||
manager: { select: { name: true, avatar: true, email: true } }
|
||||
}
|
||||
},
|
||||
workspacesAsManager: {
|
||||
where: { status: "ACTIVE" },
|
||||
where: {
|
||||
status: {
|
||||
in: ["ACTIVE", "PENDING_INVITE"]
|
||||
}
|
||||
},
|
||||
include: {
|
||||
employee: { select: { name: true, avatar: true, email: true } }
|
||||
}
|
||||
@@ -30,21 +38,163 @@ export default async function WorkspacesPage() {
|
||||
}
|
||||
})
|
||||
|
||||
// Se for admin, mostrar link para painel admin
|
||||
const isAdmin = user?.role === "HR_ADMIN"
|
||||
|
||||
const totalAsManager = user?.workspacesAsManager.length || 0
|
||||
const totalAsEmployee = user?.workspacesAsEmployee.length || 0
|
||||
const totalWorkspaces = totalAsManager + totalAsEmployee
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: "100vh", background: "#f7fafc", padding: "2rem" }}>
|
||||
<div style={{ maxWidth: "1200px", margin: "0 auto" }}>
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<div style={{ marginBottom: "2rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: "2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>
|
||||
Meus Workspaces
|
||||
{totalAsManager > 0 ? "🎓 Minha Equipe" : "Meus Workspaces"}
|
||||
</h1>
|
||||
<p style={{ color: "#666" }}>
|
||||
Selecione um workspace para acessar
|
||||
{totalAsManager > 0
|
||||
? `Gerencie ${totalAsManager} ${totalAsManager === 1 ? 'colaborador' : 'colaboradores'} da sua equipe`
|
||||
: "Selecione um workspace para acessar"
|
||||
}
|
||||
</p>
|
||||
{totalWorkspaces > 0 && (
|
||||
<div style={{ marginTop: "0.75rem", display: "flex", gap: "1rem" }}>
|
||||
{totalAsManager > 0 && (
|
||||
<span style={{
|
||||
padding: "0.375rem 0.75rem",
|
||||
background: "#d1fae5",
|
||||
color: "#047857",
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: "500"
|
||||
}}>
|
||||
🎓 {totalAsManager} {totalAsManager === 1 ? 'Colaborador' : 'Colaboradores'}
|
||||
</span>
|
||||
)}
|
||||
{totalAsEmployee > 0 && (
|
||||
<span style={{
|
||||
padding: "0.375rem 0.75rem",
|
||||
background: "#e0e7ff",
|
||||
color: "#4c51bf",
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: "500"
|
||||
}}>
|
||||
👤 {totalAsEmployee} {totalAsEmployee === 1 ? 'Gestor' : 'Gestores'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
|
||||
{isAdmin && (
|
||||
<Link
|
||||
href="/admin"
|
||||
style={{
|
||||
padding: "0.75rem 1.5rem",
|
||||
background: "#1a202c",
|
||||
color: "white",
|
||||
borderRadius: "0.5rem",
|
||||
textDecoration: "none",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
🔧 Painel Admin
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href="/api/auth/logout"
|
||||
style={{
|
||||
padding: "0.75rem 1.5rem",
|
||||
background: "#dc2626",
|
||||
color: "white",
|
||||
borderRadius: "0.5rem",
|
||||
textDecoration: "none",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
🚪 Sair
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1.5rem" }}>
|
||||
{/* Workspaces como Funcionário */}
|
||||
{user?.workspacesAsEmployee.map((workspace) => (
|
||||
{/* Seção de Gestão de Equipe */}
|
||||
{totalAsManager > 0 && (
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "600", marginBottom: "1rem", color: "#047857" }}>
|
||||
🎓 Sua Equipe ({totalAsManager})
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1.5rem" }}>
|
||||
{user?.workspacesAsManager.map((workspace) => (
|
||||
<Link
|
||||
key={workspace.id}
|
||||
href={`/workspace/${workspace.slug}`}
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
|
||||
padding: "1.5rem",
|
||||
borderRadius: "0.75rem",
|
||||
boxShadow: "0 4px 6px rgba(16, 185, 129, 0.2)",
|
||||
textDecoration: "none",
|
||||
color: "white",
|
||||
transition: "all 0.2s",
|
||||
cursor: "pointer",
|
||||
border: "2px solid transparent"
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1rem" }}>
|
||||
<div style={{
|
||||
width: "56px",
|
||||
height: "56px",
|
||||
borderRadius: "50%",
|
||||
background: "rgba(255, 255, 255, 0.2)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: "bold",
|
||||
border: "3px solid rgba(255, 255, 255, 0.3)"
|
||||
}}>
|
||||
{workspace.employee.name[0]}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: "700", fontSize: "1.25rem", marginBottom: "0.25rem" }}>
|
||||
{workspace.employee.name}
|
||||
</div>
|
||||
<div style={{ fontSize: "0.875rem", opacity: 0.9 }}>
|
||||
{workspace.employee.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
padding: "0.75rem",
|
||||
background: "rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "0.5rem",
|
||||
fontSize: "0.875rem",
|
||||
fontWeight: "500",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backdropFilter: "blur(10px)"
|
||||
}}>
|
||||
<span>🎓 Você é o Gestor</span>
|
||||
<span>→</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Seção de Workspaces como Funcionário */}
|
||||
{totalAsEmployee > 0 && (
|
||||
<div>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "600", marginBottom: "1rem", color: "#4c51bf" }}>
|
||||
👤 Seus Gestores ({totalAsEmployee})
|
||||
</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1.5rem" }}>
|
||||
{user?.workspacesAsEmployee.map((workspace) => (
|
||||
<Link
|
||||
key={workspace.id}
|
||||
href={`/workspace/${workspace.slug}`}
|
||||
@@ -93,78 +243,65 @@ export default async function WorkspacesPage() {
|
||||
👤 Você é o Funcionário
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Workspaces como Gestor */}
|
||||
{user?.workspacesAsManager.map((workspace) => (
|
||||
{/* Mensagem quando não há workspaces */}
|
||||
{totalWorkspaces === 0 && (
|
||||
<div style={{
|
||||
background: "white",
|
||||
padding: "3rem",
|
||||
borderRadius: "0.75rem",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
|
||||
}}>
|
||||
<div style={{ fontSize: "4rem", marginBottom: "1rem" }}>📋</div>
|
||||
<h2 style={{ fontSize: "1.5rem", fontWeight: "600", marginBottom: "1rem" }}>
|
||||
Nenhum Workspace Encontrado
|
||||
</h2>
|
||||
<p style={{ color: "#666", marginBottom: "2rem" }}>
|
||||
Crie um novo workspace para começar a gerenciar sua equipe
|
||||
</p>
|
||||
<Link
|
||||
key={workspace.id}
|
||||
href={`/workspace/${workspace.slug}`}
|
||||
href="/workspace/create"
|
||||
style={{
|
||||
background: "white",
|
||||
padding: "1.5rem",
|
||||
display: "inline-block",
|
||||
padding: "1rem 2rem",
|
||||
background: "#667eea",
|
||||
color: "white",
|
||||
borderRadius: "0.5rem",
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
transition: "all 0.2s",
|
||||
cursor: "pointer"
|
||||
fontWeight: "500",
|
||||
fontSize: "1rem"
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1rem" }}>
|
||||
<div style={{
|
||||
width: "48px",
|
||||
height: "48px",
|
||||
borderRadius: "50%",
|
||||
background: "#10b981",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "white",
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: "bold"
|
||||
}}>
|
||||
{workspace.employee.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontWeight: "600", fontSize: "1.1rem" }}>
|
||||
{workspace.employee.name}
|
||||
</div>
|
||||
<div style={{ fontSize: "0.875rem", color: "#666" }}>
|
||||
Seu Mentorado
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
padding: "0.5rem",
|
||||
background: "#d1fae5",
|
||||
borderRadius: "0.25rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "#047857"
|
||||
}}>
|
||||
🎓 Você é o Gestor
|
||||
</div>
|
||||
+ Criar Primeiro Workspace
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Botão para criar novo workspace */}
|
||||
<div style={{ marginTop: "2rem", textAlign: "center" }}>
|
||||
<Link
|
||||
href="/workspace/create"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "1rem 2rem",
|
||||
background: "#667eea",
|
||||
color: "white",
|
||||
borderRadius: "0.5rem",
|
||||
textDecoration: "none",
|
||||
fontWeight: "500"
|
||||
}}
|
||||
>
|
||||
+ Criar Novo Workspace
|
||||
</Link>
|
||||
</div>
|
||||
{totalWorkspaces > 0 && (
|
||||
<div style={{ marginTop: "2rem", textAlign: "center" }}>
|
||||
<Link
|
||||
href="/workspace/create"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "1rem 2rem",
|
||||
background: "#667eea",
|
||||
color: "white",
|
||||
borderRadius: "0.5rem",
|
||||
textDecoration: "none",
|
||||
fontWeight: "500",
|
||||
boxShadow: "0 2px 4px rgba(102, 126, 234, 0.3)"
|
||||
}}
|
||||
>
|
||||
+ Adicionar Novo Colaborador
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user