gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: elevate logged-in experience with ambient glows, glassmorphism, and landing page visual polish

Browse source
This commit is contained in:
Gabriel Menezes 2026-10-10 23:18:50 -04:00
parent eeccd176a1
commit 6412bb20d1
13 changed files with 396 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
new-frontend/src/components/layout/AppShell.tsx
View file

@ -7,7 +7,11 @@ export const AppShell = () => {
const [isMobileOpen, setIsMobileOpen] = useState(false) const [isMobileOpen, setIsMobileOpen] = useState(false)
return ( return (
<div className="min-h-screen bg-app-bg text-text-main flex font-sans selection:bg-brand-soft selection:text-brand"> <div className="min-h-screen bg-app-bg text-text-main flex font-sans selection:bg-brand-soft selection:text-brand relative overflow-x-hidden">
{/* Decorative ambient background glows matching Landing Page aesthetic */}
<div className="fixed top-0 left-1/4 w-[650px] h-[350px] bg-gradient-to-tr from-accent/10 via-brand/12 to-transparent blur-3xl pointer-events-none rounded-full -z-0" />
<div className="fixed bottom-10 right-10 w-[550px] h-[350px] bg-gradient-to-br from-brand/10 via-accent/10 to-transparent blur-3xl pointer-events-none rounded-full -z-0" />
{/* Sidebar Navigation */} {/* Sidebar Navigation */}
<Sidebar <Sidebar
isMobileOpen={isMobileOpen} isMobileOpen={isMobileOpen}
@ -15,9 +19,9 @@ export const AppShell = () => {
/> />
{/* Main Content Area */} {/* Main Content Area */}
<div className="flex-1 flex flex-col min-w-0"> <div className="flex-1 flex flex-col min-w-0 z-10">
<Header onToggleMobileSidebar={() => setIsMobileOpen(true)} /> <Header onToggleMobileSidebar={() => setIsMobileOpen(true)} />
<main className="flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl w-full mx-auto animate-in fade-in duration-200"> <main className="flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl w-full mx-auto animate-in fade-in duration-300">
<Outlet /> <Outlet />
</main> </main>
</div> </div>

2
new-frontend/src/components/layout/Sidebar.tsx
View file

@ -51,7 +51,7 @@ export const Sidebar = ({ isMobileOpen, onCloseMobile }: SidebarProps) => {
] ]
const navContent = ( const navContent = (
<div className="flex flex-col h-full bg-surface border-r border-border-soft select-none"> <div className="flex flex-col h-full bg-surface/90 backdrop-blur-md border-r border-border-soft select-none">
{/* Brand & Logo */} {/* Brand & Logo */}
<div className="h-18 px-6 flex items-center justify-between border-b border-border-soft"> <div className="h-18 px-6 flex items-center justify-between border-b border-border-soft">
<NavLink to="/dashboard" className="flex items-center gap-3"> <NavLink to="/dashboard" className="flex items-center gap-3">

6
new-frontend/src/components/tasks/TaskCard.tsx
View file

@ -52,10 +52,10 @@ export const TaskCard: React.FC<TaskCardProps> = ({
<div <div
draggable draggable
onDragStart={handleDragStart} onDragStart={handleDragStart}
className={`group relative rounded-xl border bg-surface p-4 transition-all duration-200 cursor-grab active:cursor-grabbing hover:shadow-lg hover:border-zinc-700 ${ className={`group relative rounded-2xl border bg-surface/90 backdrop-blur-md p-4 transition-all duration-200 cursor-grab active:cursor-grabbing hover:shadow-xl hover:-translate-y-0.5 hover:border-brand/40 ${
running running
? 'border-brand/60 shadow-[0_0_20px_rgba(15,118,110,0.18)] ring-1 ring-brand/40' ? 'border-brand/60 shadow-[0_0_25px_rgba(15,118,110,0.22)] ring-1 ring-brand/40 bg-brand/5'
: 'border-border shadow-xs' : 'border-border-soft shadow-panel'
}`} }`}
> >
{/* Top Row: Project & Quick Status Menu */} {/* Top Row: Project & Quick Status Menu */}

2
new-frontend/src/components/tasks/TaskKanbanView.tsx
View file

@ -112,7 +112,7 @@ export const TaskKanbanView: React.FC<TaskKanbanViewProps> = ({
onDragOver={(e) => handleDragOver(e, col.status)} onDragOver={(e) => handleDragOver(e, col.status)}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, col.status)} onDrop={(e) => handleDrop(e, col.status)}
className={`flex flex-col rounded-2xl border transition-all duration-200 min-h-[480px] bg-surface-sunken/40 ${ className={`flex flex-col rounded-3xl border transition-all duration-200 min-h-[500px] bg-surface/60 backdrop-blur-md shadow-xs ${
isOver isOver
? 'border-brand ring-2 ring-brand/30 bg-brand/5' ? 'border-brand ring-2 ring-brand/30 bg-brand/5'
: col.borderColor : col.borderColor

2
new-frontend/src/components/tasks/TaskListView.tsx
View file

@ -42,7 +42,7 @@ export const TaskListView: React.FC<TaskListViewProps> = ({
const [activeMenuId, setActiveMenuId] = React.useState<number | null>(null) const [activeMenuId, setActiveMenuId] = React.useState<number | null>(null)
return ( return (
<div className="rounded-2xl border border-border bg-surface overflow-hidden shadow-xs"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md overflow-hidden shadow-panel">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-left text-xs"> <table className="w-full text-left text-xs">
<thead> <thead>

47
new-frontend/src/pages/AnalyticsPage.tsx
View file

@ -211,11 +211,12 @@ export const AnalyticsPage: React.FC = () => {
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
Analytics & Produtividade Analytics & Produtividade
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
{activeOrg?.name || 'Workspace'} {activeOrg?.name || 'Workspace'}
</span> </span>
</div> </div>
@ -229,14 +230,14 @@ export const AnalyticsPage: React.FC = () => {
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar métricas" title="Recarregar métricas"
className="self-start sm:self-auto p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="self-start sm:self-auto p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
</button> </button>
</div> </div>
{error && ( {error && (
<div className="flex items-center justify-between p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs"> <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs shadow-panel backdrop-blur-md">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-rose-400" /> <AlertCircle className="w-4 h-4 text-rose-400" />
<span>{error}</span> <span>{error}</span>
@ -256,7 +257,7 @@ export const AnalyticsPage: React.FC = () => {
{[1, 2, 3, 4].map((i) => ( {[1, 2, 3, 4].map((i) => (
<div <div
key={i} key={i}
className="h-32 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4" className="h-32 rounded-3xl border border-border-soft bg-surface-sunken/40 animate-pulse p-5"
/> />
))} ))}
</div> </div>
@ -265,15 +266,15 @@ export const AnalyticsPage: React.FC = () => {
{/* Top 4 KPI Cards */} {/* Top 4 KPI Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Total Time */} {/* Total Time */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Tempo Total Dedicado</span> <span className="text-xs font-semibold text-muted">Tempo Total Dedicado</span>
<div className="w-8 h-8 rounded-lg bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400"> <div className="w-9 h-9 rounded-xl bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400">
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-foreground tracking-tight font-mono"> <p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
{formatSecondsToTimer(kpis.totalSecondsTracked)} {formatSecondsToTimer(kpis.totalSecondsTracked)}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted mt-1">
@ -283,15 +284,15 @@ export const AnalyticsPage: React.FC = () => {
</div> </div>
{/* Completion Rate */} {/* Completion Rate */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Taxa de Conclusão</span> <span className="text-xs font-semibold text-muted">Taxa de Conclusão</span>
<div className="w-8 h-8 rounded-lg bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400"> <div className="w-9 h-9 rounded-xl bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-emerald-400 tracking-tight"> <p className="text-2xl sm:text-3xl font-extrabold text-emerald-400 tracking-tight">
{kpis.completionRate}% {kpis.completionRate}%
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted mt-1">
@ -301,15 +302,15 @@ export const AnalyticsPage: React.FC = () => {
</div> </div>
{/* In Progress vs Backlog */} {/* In Progress vs Backlog */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Em Execução Agora</span> <span className="text-xs font-semibold text-muted">Em Execução Agora</span>
<div className="w-8 h-8 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="w-9 h-9 rounded-xl bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
<Activity className="w-4 h-4" /> <Activity className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-teal-300 tracking-tight"> <p className="text-2xl sm:text-3xl font-extrabold text-teal-300 tracking-tight">
{kpis.inProgressTasks} tarefas {kpis.inProgressTasks} tarefas
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted mt-1">
@ -319,15 +320,15 @@ export const AnalyticsPage: React.FC = () => {
</div> </div>
{/* Avg Time per Task */} {/* Avg Time per Task */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Média por Entrega</span> <span className="text-xs font-semibold text-muted">Média por Entrega</span>
<div className="w-8 h-8 rounded-lg bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400"> <div className="w-9 h-9 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-foreground tracking-tight font-mono"> <p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
{formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)} {formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted mt-1">
@ -340,10 +341,10 @@ export const AnalyticsPage: React.FC = () => {
{/* Main Grid: Projects & Categories Breakdown */} {/* Main Grid: Projects & Categories Breakdown */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Project Time Distribution */} {/* Project Time Distribution */}
<div className="p-6 rounded-2xl border border-border bg-surface shadow-xs space-y-5"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="w-8 h-8 rounded-xl bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
<Folder className="w-4 h-4" /> <Folder className="w-4 h-4" />
</div> </div>
<h2 className="text-sm font-bold text-foreground"> <h2 className="text-sm font-bold text-foreground">
@ -405,10 +406,10 @@ export const AnalyticsPage: React.FC = () => {
</div> </div>
{/* Category Time Distribution */} {/* Category Time Distribution */}
<div className="p-6 rounded-2xl border border-border bg-surface shadow-xs space-y-5"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400"> <div className="w-8 h-8 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400">
<Tag className="w-4 h-4" /> <Tag className="w-4 h-4" />
</div> </div>
<h2 className="text-sm font-bold text-foreground"> <h2 className="text-sm font-bold text-foreground">
@ -471,7 +472,7 @@ export const AnalyticsPage: React.FC = () => {
</div> </div>
{/* Team Productivity Table */} {/* Team Productivity Table */}
<div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-4"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-6 shadow-panel space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="w-7 h-7 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">

35
new-frontend/src/pages/CategoriesPage.tsx
View file

@ -157,11 +157,12 @@ export const CategoriesPage: React.FC = () => {
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-accent via-amber-400 to-brand bg-clip-text text-transparent">
Categorias & Tags Categorias & Tags
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-accent/15 text-accent border border-accent/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-accent/15 text-accent border border-accent/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
{activeOrg?.name || 'Workspace'} {activeOrg?.name || 'Workspace'}
</span> </span>
</div> </div>
@ -176,7 +177,7 @@ export const CategoriesPage: React.FC = () => {
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar categorias" title="Recarregar categorias"
className="p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-accent' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-accent' : ''}`} />
</button> </button>
@ -184,7 +185,7 @@ export const CategoriesPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={handleOpenCreateModal} onClick={handleOpenCreateModal}
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-accent text-white font-semibold text-xs hover:bg-accent-hover shadow-md shadow-accent/20 transition-all" className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-accent text-white font-semibold text-xs hover:bg-accent-hover shadow-md shadow-accent/25 transition-all hover:-translate-y-0.5 active:translate-y-0"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Nova Categoria</span> <span>Nova Categoria</span>
@ -193,7 +194,7 @@ export const CategoriesPage: React.FC = () => {
</div> </div>
{error && ( {error && (
<div className="flex items-center justify-between p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs"> <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs shadow-panel backdrop-blur-md">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-rose-400" /> <AlertCircle className="w-4 h-4 text-rose-400" />
<span>{error}</span> <span>{error}</span>
@ -209,15 +210,15 @@ export const CategoriesPage: React.FC = () => {
)} )}
{/* Search Bar */} {/* Search Bar */}
<div className="p-3.5 rounded-2xl border border-border bg-surface flex items-center justify-between gap-3 shadow-xs"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center justify-between gap-3 shadow-panel">
<div className="relative w-full sm:w-80"> <div className="relative w-full sm:w-80">
<Search className="w-4 h-4 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" /> <Search className="w-4 h-4 text-muted absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Buscar categoria por nome..." placeholder="Buscar categoria por nome..."
className="w-full pl-9 pr-3 py-2 rounded-xl border border-border bg-surface-raised text-xs text-foreground placeholder-muted/60 focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent transition-all" className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground placeholder-muted focus:outline-none focus:ring-2 focus:ring-accent/40 focus:border-accent transition-all"
/> />
</div> </div>
<div className="text-xs text-muted font-medium"> <div className="text-xs text-muted font-medium">
@ -227,11 +228,11 @@ export const CategoriesPage: React.FC = () => {
{/* Grid of Categories */} {/* Grid of Categories */}
{loading ? ( {loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div <div
key={i} key={i}
className="h-40 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-5 space-y-3" className="h-44 rounded-3xl border border-border-soft bg-surface-sunken/40 animate-pulse p-6 space-y-3"
> >
<div className="h-5 bg-surface-raised rounded-md w-1/2" /> <div className="h-5 bg-surface-raised rounded-md w-1/2" />
<div className="h-3 bg-surface-raised rounded-md w-3/4" /> <div className="h-3 bg-surface-raised rounded-md w-3/4" />
@ -239,12 +240,12 @@ export const CategoriesPage: React.FC = () => {
))} ))}
</div> </div>
) : filteredCategories.length === 0 ? ( ) : filteredCategories.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 px-4 text-center rounded-2xl border border-dashed border-border bg-surface/50"> <div className="flex flex-col items-center justify-center py-20 px-4 text-center rounded-3xl border border-dashed border-border-soft bg-surface/60 backdrop-blur-md shadow-panel">
<div className="w-14 h-14 rounded-2xl bg-accent/10 border border-accent/20 flex items-center justify-center text-accent mb-4"> <div className="w-14 h-14 rounded-2xl bg-accent/10 border border-accent/20 flex items-center justify-center text-accent mb-4">
<Tag className="w-7 h-7" /> <Tag className="w-7 h-7" />
</div> </div>
<h3 className="text-base font-bold text-foreground mb-1"> <h3 className="text-base font-bold text-foreground mb-1">
Nenhuma categoria cadastrada Nenhum categoria cadastrada
</h3> </h3>
<p className="text-xs text-muted max-w-sm mb-5 leading-relaxed"> <p className="text-xs text-muted max-w-sm mb-5 leading-relaxed">
{searchQuery {searchQuery
@ -254,7 +255,7 @@ export const CategoriesPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={handleOpenCreateModal} onClick={handleOpenCreateModal}
className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-accent text-white text-xs font-semibold hover:bg-accent-hover shadow-md shadow-accent/20 transition-all" className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-accent text-white text-xs font-semibold hover:bg-accent-hover shadow-md shadow-accent/25 transition-all hover:-translate-y-0.5"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Criar Primeira Categoria</span> <span>Criar Primeira Categoria</span>
@ -271,7 +272,7 @@ export const CategoriesPage: React.FC = () => {
return ( return (
<div <div
key={category.id} key={category.id}
className="group rounded-2xl border border-border bg-surface p-5 hover:border-zinc-700 hover:shadow-lg transition-all duration-200 flex flex-col justify-between" className="group rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-6 hover:border-accent/40 shadow-panel hover:shadow-xl hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between"
> >
<div> <div>
<div className="flex items-start justify-between gap-3 mb-4"> <div className="flex items-start justify-between gap-3 mb-4">
@ -307,7 +308,7 @@ export const CategoriesPage: React.FC = () => {
</div> </div>
{/* Metrics Bar */} {/* Metrics Bar */}
<div className="grid grid-cols-2 gap-2 p-3 rounded-xl bg-surface-sunken/60 border border-border/60 mb-4"> <div className="grid grid-cols-2 gap-2 p-3.5 rounded-2xl bg-surface-sunken/60 border border-border-soft mb-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ListTodo className="w-3.5 h-3.5 text-muted" /> <ListTodo className="w-3.5 h-3.5 text-muted" />
<div> <div>
@ -330,7 +331,7 @@ export const CategoriesPage: React.FC = () => {
</div> </div>
{/* Footer Link */} {/* Footer Link */}
<div className="pt-3 border-t border-border/80 flex items-center justify-between"> <div className="pt-3 border-t border-border-soft/60 flex items-center justify-between">
<span <span
className="inline-block w-3 h-3 rounded-full" className="inline-block w-3 h-3 rounded-full"
style={{ backgroundColor: category.color || '#d97706' }} style={{ backgroundColor: category.color || '#d97706' }}

302
new-frontend/src/pages/DashboardPage.tsx
View file

@ -16,6 +16,7 @@ import {
Tag, Tag,
Activity, Activity,
AlertCircle, AlertCircle,
Zap,
} from 'lucide-react' } from 'lucide-react'
import { useAuth } from '../contexts/AuthContext' import { useAuth } from '../contexts/AuthContext'
import { useTimer } from '../contexts/TimerContext' import { useTimer } from '../contexts/TimerContext'
@ -135,47 +136,55 @@ export const DashboardPage: React.FC = () => {
return tasks.find((t) => t.status === 'IN_PROGRESS') || tasks.find((t) => t.status === 'NOT_STARTED') || tasks[0] return tasks.find((t) => t.status === 'IN_PROGRESS') || tasks.find((t) => t.status === 'NOT_STARTED') || tasks[0]
}, [tasks]) }, [tasks])
const firstName = user?.name ? user.name.split(' ')[0] : 'Desenvolvedor'
return ( return (
<div className="space-y-6 max-w-7xl mx-auto"> <div className="space-y-8 max-w-7xl mx-auto">
{/* Header */} {/* Top Banner with Landing Page aesthetic */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-5 pb-2">
<div> <div className="space-y-1.5">
<div className="flex items-center gap-2 mb-1"> {/* Top pill badge */}
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-surface/90 backdrop-blur-md border border-border-soft shadow-xs text-xs font-semibold text-brand">
Olá, {user?.name?.split(' ')[0] || 'Desenvolvedor'}! 👋 <span className="flex h-2 w-2 rounded-full bg-accent animate-pulse" />
</h1> <span>Workspace: {activeOrg?.name || 'BeeTask'}</span>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <Sparkles className="w-3.5 h-3.5 text-accent" />
{activeOrg?.name || 'Workspace'}
</span>
</div> </div>
<p className="text-xs text-muted">
Visão geral da sua produtividade, metas e atividades recentes no workspace. <h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-foreground leading-tight">
Olá, {firstName}!{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-brand via-brand-strong to-accent">
Bom trabalho hoje.
</span>
</h1>
<p className="text-xs sm:text-sm text-muted max-w-2xl leading-relaxed">
Acompanhe o ritmo de entregas da sua equipe, audite suas horas e mantenha o foco na próxima entrega.
</p> </p>
</div> </div>
<div className="flex items-center gap-2.5 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
<button <button
type="button" type="button"
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar dashboard" title="Recarregar dados"
className="p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-xs disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
</button> </button>
<Link to="/tasks">
<button <button
type="button" type="button"
onClick={() => navigate('/tasks')} className="px-4 py-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-xs font-bold text-foreground hover:bg-surface-raised hover:border-brand/40 transition-all shadow-xs"
className="px-3.5 py-2 rounded-xl border border-border bg-surface text-xs font-semibold text-foreground hover:bg-surface-raised transition-colors shadow-xs"
> >
Quadro Kanban Quadro Kanban
</button> </button>
</Link>
<button <button
type="button" type="button"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand text-white font-semibold text-xs hover:bg-brand-hover shadow-md shadow-brand/20 transition-all" className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand hover:bg-brand-strong text-white font-bold text-xs shadow-lg shadow-brand/25 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Nova Tarefa</span> <span>Nova Tarefa</span>
@ -184,8 +193,8 @@ export const DashboardPage: React.FC = () => {
</div> </div>
{error && ( {error && (
<div className="flex items-center justify-between p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs"> <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs backdrop-blur-xs">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2.5">
<AlertCircle className="w-4 h-4 text-rose-400" /> <AlertCircle className="w-4 h-4 text-rose-400" />
<span>{error}</span> <span>{error}</span>
</div> </div>
@ -199,183 +208,189 @@ export const DashboardPage: React.FC = () => {
</div> </div>
)} )}
{/* KPI Cards */} {/* 4 Premium KPI Cards with shadow-panel & backdrop-blur */}
{loading ? ( {loading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
{[1, 2, 3, 4].map((i) => ( {[1, 2, 3, 4].map((i) => (
<div <div
key={i} key={i}
className="h-28 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4" className="h-32 rounded-3xl border border-border-soft bg-surface/60 backdrop-blur-md animate-pulse p-5"
/> />
))} ))}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
{/* In Progress */} {/* In Progress */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs hover:border-zinc-700 transition-colors"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-5 shadow-panel hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex flex-col justify-between">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Tarefas em Andamento</span> <span className="text-xs font-bold text-muted">Tarefas em Andamento</span>
<div className="w-8 h-8 rounded-lg bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400"> <div className="w-9 h-9 rounded-xl bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400 shadow-xs">
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-teal-400 tracking-tight"> <p className="text-3xl font-extrabold text-teal-400 tracking-tight font-mono">
{stats.inProgress} {stats.inProgress}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted font-medium mt-1">
{stats.notStarted} no backlog para iniciar {stats.notStarted} tarefas aguardando no backlog
</p> </p>
</div> </div>
</div> </div>
{/* Completed */} {/* Completed */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs hover:border-zinc-700 transition-colors"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-5 shadow-panel hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex flex-col justify-between">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Entregas Concluídas</span> <span className="text-xs font-bold text-muted">Entregas Concluídas</span>
<div className="w-8 h-8 rounded-lg bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400"> <div className="w-9 h-9 rounded-xl bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shadow-xs">
<CheckCircle2 className="w-4 h-4" /> <CheckCircle2 className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-emerald-400 tracking-tight"> <p className="text-3xl font-extrabold text-emerald-400 tracking-tight font-mono">
{stats.completed} {stats.completed}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted font-medium mt-1">
de {tasks.length} tarefas cadastradas de {tasks.length} demandas cadastradas
</p> </p>
</div> </div>
</div> </div>
{/* Time Tracked */} {/* Time Tracked */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs hover:border-zinc-700 transition-colors"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-5 shadow-panel hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex flex-col justify-between">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Tempo Total Dedicado</span> <span className="text-xs font-bold text-muted">Tempo Total Dedicado</span>
<div className="w-8 h-8 rounded-lg bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400"> <div className="w-9 h-9 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400 shadow-xs">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-amber-400 tracking-tight font-mono"> <p className="text-3xl font-extrabold text-amber-400 tracking-tight font-mono">
{formatSecondsToTimer(stats.totalSeconds)} {formatSecondsToTimer(stats.totalSeconds)}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted font-medium mt-1">
{formatSecondsToHuman(stats.totalSeconds)} acumuladas {formatSecondsToHuman(stats.totalSeconds)} auditadas no time
</p> </p>
</div> </div>
</div> </div>
{/* Projects */} {/* Projects */}
<div className="p-5 rounded-2xl border border-border bg-surface flex flex-col justify-between shadow-xs hover:border-zinc-700 transition-colors"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-5 shadow-panel hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 flex flex-col justify-between">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs font-semibold text-muted">Projetos Ativos</span> <span className="text-xs font-bold text-muted">Projetos Ativos</span>
<div className="w-8 h-8 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="w-9 h-9 rounded-xl bg-brand-soft text-brand border border-brand/25 flex items-center justify-center shadow-xs">
<FolderKanban className="w-4 h-4" /> <FolderKanban className="w-4 h-4 text-brand" />
</div> </div>
</div> </div>
<div> <div>
<p className="text-2xl font-extrabold text-foreground tracking-tight"> <p className="text-3xl font-extrabold text-foreground tracking-tight font-mono">
{stats.projectsCount} {stats.projectsCount}
</p> </p>
<p className="text-[11px] text-muted mt-1"> <p className="text-[11px] text-muted font-medium mt-1">
Iniciativas no workspace Iniciativas ativas no workspace
</p> </p>
</div> </div>
</div> </div>
</div> </div>
)} )}
{/* Main Content: Focus Session (Left) + Recent Tasks (Right) */} {/* Main Grid: Focus Session (5 cols) + Recent Sprint Tasks (7 cols) */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
{/* Focus Session Card (Left 5 cols) */} {/* Focus Session Hero Card (Left 5 cols) */}
<div className="lg:col-span-5 space-y-5"> <div className="lg:col-span-5 space-y-6">
<div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-5"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-6 shadow-panel space-y-5 transition-all hover:shadow-2xl">
<div className="flex items-center justify-between pb-3 border-b border-border"> {/* Header with macOS style dots */}
<div className="flex items-center gap-2.5"> <div className="flex items-center justify-between pb-4 border-b border-border-soft">
<div className="w-8 h-8 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="flex items-center gap-2">
<Flame className="w-4 h-4" /> <span className="w-2.5 h-2.5 rounded-full bg-rose-400/80" />
</div> <span className="w-2.5 h-2.5 rounded-full bg-amber-400/80" />
<div> <span className="w-2.5 h-2.5 rounded-full bg-emerald-400/80" />
<h2 className="text-sm font-bold text-foreground">Sessão em Foco</h2> <span className="text-xs font-bold text-foreground ml-1.5 flex items-center gap-1.5">
<p className="text-xs text-muted">Cronômetro em tempo real</p> <Flame className="w-3.5 h-3.5 text-accent" />
</div> Sessão em Foco
</div>
<span
className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border ${
activeTask
? 'bg-teal-500/15 text-teal-300 border-teal-500/30 animate-pulse'
: 'bg-zinc-800 text-zinc-400 border-zinc-700'
}`}
>
{activeTask ? 'ATIVO' : 'EM ESPERA'}
</span> </span>
</div> </div>
{/* Active or Suggested Task Info */} <div className="flex items-center gap-1.5">
<span
className={`inline-block w-2 h-2 rounded-full ${
activeTask ? 'bg-emerald-500 animate-ping' : 'bg-zinc-400'
}`}
/>
<span
className={`text-xs font-bold ${
activeTask ? 'text-teal-400' : 'text-muted'
}`}
>
{activeTask ? 'CRONOMETRANDO' : 'EM ESPERA'}
</span>
</div>
</div>
{/* Active or Suggested Task Info Box */}
{activeTask ? ( {activeTask ? (
<div className="p-4 rounded-xl bg-surface-raised border border-border space-y-2"> <div className="p-4 rounded-2xl bg-surface-raised border border-border-soft space-y-2 shadow-xs">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 flex-wrap">
{activeTask.project && ( {activeTask.project && (
<span <span
className="px-2 py-0.5 rounded-md text-[10px] font-medium border" className="px-2 py-0.5 rounded-md text-[10px] font-semibold border"
style={{ style={{
backgroundColor: activeTask.project.color ? `${activeTask.project.color}15` : 'rgba(15,118,110,0.1)', backgroundColor: activeTask.project.color ? `${activeTask.project.color}15` : 'rgba(15,118,110,0.1)',
color: activeTask.project.color || '#0f766e', color: activeTask.project.color || '#0f766e',
borderColor: activeTask.project.color ? `${activeTask.project.color}30` : 'rgba(15,118,110,0.25)', borderColor: activeTask.project.color ? `${activeTask.project.color}35` : 'rgba(15,118,110,0.25)',
}} }}
> >
{activeTask.project.name} {activeTask.project.name}
</span> </span>
)} )}
{activeTask.category && ( {activeTask.category && (
<span className="px-2 py-0.5 rounded-md text-[10px] font-medium bg-amber-500/15 text-amber-300 border border-amber-500/25"> <span className="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-accent-soft text-accent border border-accent/25">
{activeTask.category.name} {activeTask.category.name}
</span> </span>
)} )}
</div> </div>
<h3 className="text-sm font-bold text-foreground line-clamp-2"> <h3 className="text-sm font-bold text-foreground line-clamp-2 leading-snug">
{activeTask.title} {activeTask.title}
</h3> </h3>
</div> </div>
) : suggestedTask ? ( ) : suggestedTask ? (
<div className="p-4 rounded-xl bg-surface-sunken/60 border border-border space-y-2"> <div className="p-4 rounded-2xl bg-surface-muted/60 border border-border-soft space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-[10px] font-semibold text-muted uppercase tracking-wider"> <span className="text-[10px] font-bold text-muted uppercase tracking-wider">
Próxima da fila Sugerida para Focar
</span> </span>
{suggestedTask.project && ( {suggestedTask.project && (
<span className="text-[10px] text-muted truncate max-w-[120px]"> <span className="text-[11px] text-muted font-medium truncate max-w-[140px]">
{suggestedTask.project.name} {suggestedTask.project.name}
</span> </span>
)} )}
</div> </div>
<h3 className="text-sm font-semibold text-foreground line-clamp-2"> <h3 className="text-sm font-bold text-foreground line-clamp-2 leading-snug">
{suggestedTask.title} {suggestedTask.title}
</h3> </h3>
</div> </div>
) : ( ) : (
<div className="p-6 rounded-xl bg-surface-sunken/40 border border-dashed border-border text-center text-xs text-muted"> <div className="p-6 rounded-2xl bg-surface-muted/40 border border-dashed border-border-soft text-center text-xs text-muted">
Nenhuma tarefa pendente. Crie uma nova tarefa para iniciar o foco! Nenhuma tarefa ativa. Crie uma demanda para iniciar sua sessão produtiva!
</div> </div>
)} )}
{/* Big Timer Display */} {/* Big Bold Timer Display */}
<div className="text-center py-4 rounded-xl bg-surface-sunken border border-border"> <div className="text-center py-5 rounded-2xl bg-surface border border-border-soft shadow-xs">
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted"> <span className="text-[11px] font-bold uppercase tracking-wider text-muted">
{activeTask ? 'Tempo Decorrido na Tarefa' : 'Pronto para Cronometrar'} {activeTask ? 'Tempo Decorrido na Tarefa' : 'Pronto para Iniciar'}
</span> </span>
<p className="text-3xl sm:text-4xl font-extrabold font-mono text-foreground mt-1"> <p className="text-4xl sm:text-5xl font-extrabold font-mono text-foreground mt-1.5 tracking-tight">
{activeTask ? formatSecondsToTimer(activeSeconds) : '00:00:00'} {activeTask ? formatSecondsToTimer(activeSeconds) : '00:00:00'}
</p> </p>
</div> </div>
{/* Controls */} {/* Timer Actions */}
{activeTask ? ( {activeTask ? (
<button <button
type="button" type="button"
onClick={() => stopTimer(activeTask)} onClick={() => stopTimer(activeTask)}
className="w-full py-2.5 rounded-xl bg-rose-500/20 border border-rose-500/30 text-rose-300 hover:bg-rose-500/30 text-xs font-bold transition-all flex items-center justify-center gap-2" className="w-full py-3.5 rounded-xl bg-rose-500/15 border border-rose-500/30 text-rose-300 hover:bg-rose-500/25 text-xs font-bold transition-all flex items-center justify-center gap-2 shadow-xs"
> >
<Square className="w-4 h-4 fill-rose-300" /> <Square className="w-4 h-4 fill-rose-300" />
<span>Pausar Cronômetro</span> <span>Pausar Cronômetro</span>
@ -384,60 +399,60 @@ export const DashboardPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => handleToggleTimer(suggestedTask)} onClick={() => handleToggleTimer(suggestedTask)}
className="w-full py-2.5 rounded-xl bg-brand text-white hover:bg-brand-hover shadow-md shadow-brand/20 text-xs font-bold transition-all flex items-center justify-center gap-2" className="w-full py-3.5 rounded-xl bg-brand hover:bg-brand-strong text-white text-xs font-bold shadow-lg shadow-brand/25 transition-all flex items-center justify-center gap-2 duration-200 hover:scale-[1.01] active:scale-[0.99]"
> >
<Play className="w-4 h-4 fill-white" /> <Play className="w-4 h-4 fill-white" />
<span>Iniciar Foco Nesta Tarefa</span> <span>Iniciar Tempo nesta Tarefa</span>
</button> </button>
) : ( ) : (
<button <button
type="button" type="button"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="w-full py-2.5 rounded-xl bg-brand text-white hover:bg-brand-hover text-xs font-bold transition-all flex items-center justify-center gap-2" className="w-full py-3.5 rounded-xl bg-brand hover:bg-brand-strong text-white text-xs font-bold shadow-lg shadow-brand/25 transition-all flex items-center justify-center gap-2"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Criar Tarefa para Iniciar</span> <span>Criar Tarefa para Focar</span>
</button> </button>
)} )}
<div className="pt-2 border-t border-border flex items-center justify-between text-[11px] text-muted"> <div className="pt-2 border-t border-border-soft flex items-center justify-between text-[11px] text-muted">
<span>Usuário ativo:</span> <span>Usuário conectado</span>
<span className="font-semibold text-foreground truncate max-w-[150px]"> <span className="font-bold text-foreground truncate max-w-[160px]">
{user?.name || user?.email} {user?.name || user?.email}
</span> </span>
</div> </div>
</div> </div>
{/* Quick Shortcuts */} {/* Quick Shortcuts Card */}
<div className="rounded-2xl border border-border bg-surface p-5 shadow-xs space-y-3"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-5 shadow-panel space-y-3">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted block"> <span className="text-[11px] font-bold uppercase tracking-wider text-muted block">
Atalhos de Gestão Acesso Rápido ao Workspace
</span> </span>
<div className="grid grid-cols-2 gap-2 text-xs font-semibold"> <div className="grid grid-cols-2 gap-2 text-xs font-semibold">
<Link <Link
to="/projects" to="/projects"
className="p-3 rounded-xl bg-surface-raised hover:bg-brand/10 hover:text-brand border border-border transition-colors flex items-center gap-2 text-foreground" className="p-3.5 rounded-xl bg-surface-muted/60 hover:bg-brand-soft/50 hover:text-brand border border-border-soft transition-all flex items-center gap-2.5 text-foreground shadow-xs"
> >
<FolderKanban className="w-4 h-4 text-brand" /> <FolderKanban className="w-4 h-4 text-brand" />
<span>Projetos</span> <span>Ver Projetos</span>
</Link> </Link>
<Link <Link
to="/analytics" to="/analytics"
className="p-3 rounded-xl bg-surface-raised hover:bg-amber-500/10 hover:text-amber-400 border border-border transition-colors flex items-center gap-2 text-foreground" className="p-3.5 rounded-xl bg-surface-muted/60 hover:bg-accent-soft/50 hover:text-accent border border-border-soft transition-all flex items-center gap-2.5 text-foreground shadow-xs"
> >
<TrendingUp className="w-4 h-4 text-amber-400" /> <TrendingUp className="w-4 h-4 text-accent" />
<span>Analytics</span> <span>Analytics da Org</span>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
{/* Recent Tasks List (Right 7 cols) */} {/* Recent Sprint Tasks (Right 7 cols) */}
<div className="lg:col-span-7 space-y-4"> <div className="lg:col-span-7 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-base font-bold text-foreground flex items-center gap-2"> <h2 className="text-lg font-bold text-foreground flex items-center gap-2">
<Sparkles className="w-4 h-4 text-accent" /> <Zap className="w-4 h-4 text-accent" />
Tarefas Recentes Tarefas Recentes da Equipe
</h2> </h2>
<Link <Link
to="/tasks" to="/tasks"
@ -453,22 +468,22 @@ export const DashboardPage: React.FC = () => {
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div <div
key={i} key={i}
className="h-20 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4" className="h-20 rounded-2xl border border-border-soft bg-surface/60 backdrop-blur-md animate-pulse p-4"
/> />
))} ))}
</div> </div>
) : recentTasks.length === 0 ? ( ) : recentTasks.length === 0 ? (
<div className="text-center py-16 rounded-2xl border border-dashed border-border bg-surface/50"> <div className="text-center py-20 rounded-3xl border border-dashed border-border-soft bg-surface/60 backdrop-blur-md">
<Activity className="w-8 h-8 text-muted mx-auto mb-2" /> <Activity className="w-8 h-8 text-muted mx-auto mb-2" />
<p className="text-xs text-muted mb-4"> <p className="text-xs text-muted mb-4 font-medium">
Nenhuma tarefa encontrada neste workspace. Nenhuma tarefa encontrada neste workspace.
</p> </p>
<button <button
type="button" type="button"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand text-white text-xs font-semibold hover:bg-brand-hover shadow-xs" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand text-white text-xs font-bold hover:bg-brand-strong shadow-md shadow-brand/20 transition-all"
> >
<Plus className="w-3.5 h-3.5" /> <Plus className="w-4 h-4" />
<span>Criar Primeira Tarefa</span> <span>Criar Primeira Tarefa</span>
</button> </button>
</div> </div>
@ -481,45 +496,62 @@ export const DashboardPage: React.FC = () => {
return ( return (
<div <div
key={task.id} key={task.id}
className={`rounded-2xl border p-4 transition-all duration-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 ${ className={`rounded-2xl border p-4 transition-all duration-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-panel ${
isTracking isTracking
? 'border-brand/60 bg-brand/5 ring-1 ring-brand/30 shadow-md' ? 'border-brand/60 bg-brand/5 ring-1 ring-brand/30 shadow-lg'
: 'border-border bg-surface hover:border-zinc-700 shadow-xs' : 'border-border-soft bg-surface/90 backdrop-blur-md hover:border-brand/30 hover:shadow-xl'
}`} }`}
> >
<div className="space-y-1.5 flex-1 min-w-0"> <div className="space-y-1.5 flex-1 min-w-0">
<div className="flex items-center gap-1.5 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
{task.project && ( {task.project && (
<span <span
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium border" className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-semibold border"
style={{ style={{
backgroundColor: task.project.color ? `${task.project.color}15` : 'rgba(255,255,255,0.05)', backgroundColor: task.project.color ? `${task.project.color}15` : 'rgba(255,255,255,0.05)',
color: task.project.color || '#94a3b8', color: task.project.color || '#94a3b8',
borderColor: task.project.color ? `${task.project.color}30` : 'rgba(255,255,255,0.1)', borderColor: task.project.color ? `${task.project.color}30` : 'rgba(255,255,255,0.1)',
}} }}
> >
<Folder className="w-2.5 h-2.5" /> <Folder className="w-3 h-3" />
{task.project.name} {task.project.name}
</span> </span>
)} )}
{task.category && ( {task.category && (
<span <span
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium border" className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-semibold border"
style={{ style={{
backgroundColor: task.category.color ? `${task.category.color}15` : 'rgba(217,119,6,0.1)', backgroundColor: task.category.color ? `${task.category.color}15` : 'rgba(217,119,6,0.1)',
color: task.category.color || '#d97706', color: task.category.color || '#d97706',
borderColor: task.category.color ? `${task.category.color}30` : 'rgba(217,119,6,0.2)', borderColor: task.category.color ? `${task.category.color}30` : 'rgba(217,119,6,0.2)',
}} }}
> >
<Tag className="w-2.5 h-2.5" /> <Tag className="w-3 h-3" />
{task.category.name} {task.category.name}
</span> </span>
)} )}
<span
className={`text-[10px] font-bold px-2 py-0.5 rounded-md border ${
task.status === 'COMPLETED'
? 'bg-emerald-500/15 text-emerald-400 border-emerald-500/25'
: task.status === 'IN_PROGRESS'
? 'bg-teal-500/15 text-teal-400 border-teal-500/25'
: 'bg-surface-muted text-muted border-border-soft'
}`}
>
{task.status === 'COMPLETED'
? 'Concluído'
: task.status === 'IN_PROGRESS'
? 'Em Andamento'
: task.status === 'CANCELED'
? 'Cancelado'
: 'A Fazer'}
</span>
</div> </div>
<h3 <h3
onClick={() => navigate('/tasks')} onClick={() => navigate('/tasks')}
className="text-xs font-bold text-foreground hover:text-brand cursor-pointer truncate" className="text-sm font-bold text-foreground hover:text-brand cursor-pointer truncate transition-colors"
> >
{task.title} {task.title}
</h3> </h3>
@ -527,13 +559,13 @@ export const DashboardPage: React.FC = () => {
<div className="flex items-center gap-3 shrink-0 self-end sm:self-center"> <div className="flex items-center gap-3 shrink-0 self-end sm:self-center">
<div <div
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md font-mono text-[11px] ${ className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg font-mono text-[11px] font-bold ${
isTracking isTracking
? 'bg-teal-500/20 text-teal-300 font-bold' ? 'bg-teal-500/20 text-teal-300'
: 'bg-surface-sunken text-muted' : 'bg-surface-muted text-muted'
}`} }`}
> >
<Clock className={`w-3 h-3 ${isTracking ? 'animate-pulse text-brand' : ''}`} /> <Clock className={`w-3.5 h-3.5 ${isTracking ? 'animate-pulse text-brand' : ''}`} />
<span>{formatSecondsToTimer(taskSec)}</span> <span>{formatSecondsToTimer(taskSec)}</span>
</div> </div>
@ -541,10 +573,10 @@ export const DashboardPage: React.FC = () => {
type="button" type="button"
onClick={() => handleToggleTimer(task)} onClick={() => handleToggleTimer(task)}
title={isTracking ? 'Pausar cronômetro' : 'Iniciar cronômetro'} title={isTracking ? 'Pausar cronômetro' : 'Iniciar cronômetro'}
className={`p-1.5 rounded-lg transition-colors ${ className={`p-2 rounded-xl transition-all shadow-xs ${
isTracking isTracking
? 'bg-rose-500/20 text-rose-300 hover:bg-rose-500/30' ? 'bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 ring-1 ring-rose-500/40'
: 'bg-brand/15 text-teal-300 hover:bg-brand/25' : 'bg-brand/15 text-teal-300 hover:bg-brand/25 ring-1 ring-brand/30'
}`} }`}
> >
{isTracking ? ( {isTracking ? (

65
new-frontend/src/pages/MembersPage.tsx
View file

@ -153,11 +153,12 @@ export const MembersPage: React.FC = () => {
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
Membros & Equipe Membros & Equipe
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
{activeOrg?.name || 'Workspace'} {activeOrg?.name || 'Workspace'}
</span> </span>
</div> </div>
@ -171,7 +172,7 @@ export const MembersPage: React.FC = () => {
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar dados" title="Recarregar dados"
className="self-start sm:self-auto p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="self-start sm:self-auto p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
</button> </button>
@ -180,7 +181,7 @@ export const MembersPage: React.FC = () => {
{/* Feedback Alert */} {/* Feedback Alert */}
{feedbackMsg && ( {feedbackMsg && (
<div <div
className={`flex items-center justify-between p-3.5 rounded-xl border text-xs ${ className={`flex items-center justify-between p-4 rounded-2xl border text-xs shadow-panel backdrop-blur-md ${
feedbackMsg.type === 'success' feedbackMsg.type === 'success'
? 'bg-emerald-500/10 border-emerald-500/25 text-emerald-300' ? 'bg-emerald-500/10 border-emerald-500/25 text-emerald-300'
: 'bg-rose-500/10 border-rose-500/25 text-rose-300' : 'bg-rose-500/10 border-rose-500/25 text-rose-300'
@ -205,19 +206,19 @@ export const MembersPage: React.FC = () => {
)} )}
{/* Tabs Switcher */} {/* Tabs Switcher */}
<div className="flex items-center gap-2 border-b border-border pb-1 overflow-x-auto"> <div className="flex items-center gap-2 border-b border-border-soft pb-1.5 overflow-x-auto">
<button <button
type="button" type="button"
onClick={() => setActiveTab('members')} onClick={() => setActiveTab('members')}
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${ className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
activeTab === 'members' activeTab === 'members'
? 'bg-brand text-white shadow-xs' ? 'bg-brand text-white shadow-md shadow-brand/20'
: 'text-muted hover:text-foreground hover:bg-surface-raised' : 'text-muted hover:text-foreground hover:bg-surface-raised/80'
}`} }`}
> >
<Users className="w-4 h-4" /> <Users className="w-4 h-4" />
<span>Membros Ativos</span> <span>Membros Ativos</span>
<span className="px-1.5 py-0.2 rounded-full text-[10px] bg-white/20"> <span className="px-2 py-0.5 rounded-full text-[10px] bg-white/20 font-bold">
{members.length} {members.length}
</span> </span>
</button> </button>
@ -228,14 +229,14 @@ export const MembersPage: React.FC = () => {
onClick={() => setActiveTab('pending')} onClick={() => setActiveTab('pending')}
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${ className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
activeTab === 'pending' activeTab === 'pending'
? 'bg-amber-600 text-white shadow-xs' ? 'bg-amber-600 text-white shadow-md shadow-amber-600/20'
: 'text-muted hover:text-foreground hover:bg-surface-raised' : 'text-muted hover:text-foreground hover:bg-surface-raised/80'
}`} }`}
> >
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
<span>Solicitações Pendentes</span> <span>Solicitações Pendentes</span>
{pendingRequests.length > 0 && ( {pendingRequests.length > 0 && (
<span className="px-1.5 py-0.2 rounded-full text-[10px] bg-rose-500 text-white font-bold animate-pulse"> <span className="px-2 py-0.5 rounded-full text-[10px] bg-rose-500 text-white font-bold animate-pulse">
{pendingRequests.length} {pendingRequests.length}
</span> </span>
)} )}
@ -247,8 +248,8 @@ export const MembersPage: React.FC = () => {
onClick={() => setActiveTab('discover')} onClick={() => setActiveTab('discover')}
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${ className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-semibold transition-all whitespace-nowrap ${
activeTab === 'discover' activeTab === 'discover'
? 'bg-brand text-white shadow-xs' ? 'bg-brand text-white shadow-md shadow-brand/20'
: 'text-muted hover:text-foreground hover:bg-surface-raised' : 'text-muted hover:text-foreground hover:bg-surface-raised/80'
}`} }`}
> >
<UserPlus className="w-4 h-4" /> <UserPlus className="w-4 h-4" />
@ -260,15 +261,15 @@ export const MembersPage: React.FC = () => {
{activeTab === 'members' && ( {activeTab === 'members' && (
<div className="space-y-4"> <div className="space-y-4">
{/* Member Search Bar */} {/* Member Search Bar */}
<div className="p-3.5 rounded-2xl border border-border bg-surface flex items-center justify-between gap-3 shadow-xs"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center justify-between gap-3 shadow-panel">
<div className="relative w-full sm:w-80"> <div className="relative w-full sm:w-80">
<Search className="w-4 h-4 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" /> <Search className="w-4 h-4 text-muted absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
<input <input
type="text" type="text"
value={memberSearchTerm} value={memberSearchTerm}
onChange={(e) => setMemberSearchTerm(e.target.value)} onChange={(e) => setMemberSearchTerm(e.target.value)}
placeholder="Filtrar por nome ou e-mail..." placeholder="Filtrar por nome ou e-mail..."
className="w-full pl-9 pr-3 py-2 rounded-xl border border-border bg-surface-raised text-xs text-foreground placeholder-muted/60 focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand" className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground placeholder-muted focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all"
/> />
</div> </div>
<span className="text-xs text-muted font-medium"> <span className="text-xs text-muted font-medium">
@ -281,12 +282,12 @@ export const MembersPage: React.FC = () => {
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div <div
key={i} key={i}
className="h-28 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4" className="h-28 rounded-3xl border border-border-soft bg-surface-sunken/40 animate-pulse p-5"
/> />
))} ))}
</div> </div>
) : filteredMembers.length === 0 ? ( ) : filteredMembers.length === 0 ? (
<div className="text-center py-16 rounded-2xl border border-dashed border-border bg-surface/50"> <div className="text-center py-16 rounded-3xl border border-dashed border-border-soft bg-surface/60 backdrop-blur-md shadow-panel">
<Users className="w-8 h-8 text-muted mx-auto mb-2" /> <Users className="w-8 h-8 text-muted mx-auto mb-2" />
<p className="text-xs text-muted">Nenhum membro encontrado com este termo.</p> <p className="text-xs text-muted">Nenhum membro encontrado com este termo.</p>
</div> </div>
@ -297,7 +298,7 @@ export const MembersPage: React.FC = () => {
return ( return (
<div <div
key={member.userId} key={member.userId}
className="p-4 rounded-2xl border border-border bg-surface hover:border-zinc-700 transition-all flex items-center justify-between gap-3" className="p-5 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 flex items-center justify-between gap-3"
> >
<div className="flex items-center gap-3 truncate"> <div className="flex items-center gap-3 truncate">
<div className="w-10 h-10 rounded-full bg-brand/15 border border-brand/30 flex items-center justify-center text-sm font-bold text-brand uppercase shrink-0"> <div className="w-10 h-10 rounded-full bg-brand/15 border border-brand/30 flex items-center justify-center text-sm font-bold text-brand uppercase shrink-0">
@ -322,7 +323,7 @@ export const MembersPage: React.FC = () => {
</div> </div>
<div className="shrink-0"> <div className="shrink-0">
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium bg-surface-raised border border-border text-muted"> <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
<UserCheck className="w-3 h-3 text-emerald-400" /> <UserCheck className="w-3 h-3 text-emerald-400" />
Ativo Ativo
</span> </span>
@ -349,7 +350,7 @@ export const MembersPage: React.FC = () => {
</div> </div>
{pendingRequests.length === 0 ? ( {pendingRequests.length === 0 ? (
<div className="text-center py-16 rounded-2xl border border-dashed border-border bg-surface/50"> <div className="text-center py-16 rounded-3xl border border-dashed border-border-soft bg-surface/60 backdrop-blur-md shadow-panel">
<CheckCircle2 className="w-8 h-8 text-emerald-400 mx-auto mb-2" /> <CheckCircle2 className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
<h4 className="text-sm font-bold text-foreground">Tudo limpo!</h4> <h4 className="text-sm font-bold text-foreground">Tudo limpo!</h4>
<p className="text-xs text-muted">Não há solicitações pendentes de aprovação no momento.</p> <p className="text-xs text-muted">Não há solicitações pendentes de aprovação no momento.</p>
@ -359,7 +360,7 @@ export const MembersPage: React.FC = () => {
{pendingRequests.map((req) => ( {pendingRequests.map((req) => (
<div <div
key={req.userId} key={req.userId}
className="p-4 rounded-2xl border border-border bg-surface flex items-center justify-between gap-4" className="p-5 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 flex items-center justify-between gap-4"
> >
<div className="flex items-center gap-3 truncate"> <div className="flex items-center gap-3 truncate">
<div className="w-10 h-10 rounded-full bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-sm font-bold text-amber-400 uppercase shrink-0"> <div className="w-10 h-10 rounded-full bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-sm font-bold text-amber-400 uppercase shrink-0">
@ -376,7 +377,7 @@ export const MembersPage: React.FC = () => {
type="button" type="button"
disabled={actionLoadingId === req.userId} disabled={actionLoadingId === req.userId}
onClick={() => handleReject(req.userId)} onClick={() => handleReject(req.userId)}
className="p-2 rounded-xl border border-rose-500/30 text-rose-400 hover:bg-rose-500/15 transition-colors" className="p-2.5 rounded-xl border border-rose-500/30 text-rose-400 hover:bg-rose-500/15 transition-colors"
title="Rejeitar" title="Rejeitar"
> >
<XCircle className="w-4 h-4" /> <XCircle className="w-4 h-4" />
@ -385,7 +386,7 @@ export const MembersPage: React.FC = () => {
type="button" type="button"
disabled={actionLoadingId === req.userId} disabled={actionLoadingId === req.userId}
onClick={() => handleApprove(req.userId)} onClick={() => handleApprove(req.userId)}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-brand text-white text-xs font-bold hover:bg-brand-hover shadow-xs transition-colors" className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand text-white text-xs font-bold hover:bg-brand-hover shadow-md shadow-brand/20 transition-all"
> >
{actionLoadingId === req.userId ? ( {actionLoadingId === req.userId ? (
<Loader2 className="w-3.5 h-3.5 animate-spin" /> <Loader2 className="w-3.5 h-3.5 animate-spin" />
@ -406,7 +407,7 @@ export const MembersPage: React.FC = () => {
{activeTab === 'discover' && ( {activeTab === 'discover' && (
<div className="space-y-6"> <div className="space-y-6">
{/* Search other organizations */} {/* Search other organizations */}
<div className="p-5 rounded-2xl border border-border bg-surface shadow-xs space-y-4"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-4">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="w-8 h-8 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand"> <div className="w-8 h-8 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4" />
@ -423,19 +424,19 @@ export const MembersPage: React.FC = () => {
<form onSubmit={handleSearchOrg} className="flex gap-2.5"> <form onSubmit={handleSearchOrg} className="flex gap-2.5">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="w-4 h-4 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" /> <Search className="w-4 h-4 text-muted absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
<input <input
type="text" type="text"
value={searchOrgTerm} value={searchOrgTerm}
onChange={(e) => setSearchOrgTerm(e.target.value)} onChange={(e) => setSearchOrgTerm(e.target.value)}
placeholder="Digite o nome da organização (ex: BeeTech, Squad Core...)" placeholder="Digite o nome da organização (ex: BeeTech, Squad Core...)"
className="w-full pl-9 pr-3 py-2.5 rounded-xl border border-border bg-surface-raised text-xs text-foreground placeholder-muted/60 focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand" className="w-full pl-9 pr-3.5 py-2.5 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground placeholder-muted focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all"
/> />
</div> </div>
<button <button
type="submit" type="submit"
disabled={searching || !searchOrgTerm.trim()} disabled={searching || !searchOrgTerm.trim()}
className="px-4 py-2.5 rounded-xl bg-brand text-white text-xs font-semibold hover:bg-brand-hover shadow-xs flex items-center gap-1.5 disabled:opacity-50" className="px-4 py-2.5 rounded-xl bg-brand text-white text-xs font-semibold hover:bg-brand-hover shadow-md shadow-brand/20 flex items-center gap-1.5 disabled:opacity-50 transition-all"
> >
{searching ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />} {searching ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
<span>Buscar</span> <span>Buscar</span>
@ -444,7 +445,7 @@ export const MembersPage: React.FC = () => {
{/* Results */} {/* Results */}
{searchResults.length > 0 && ( {searchResults.length > 0 && (
<div className="space-y-2 pt-2 border-t border-border"> <div className="space-y-2 pt-2 border-t border-border-soft/60">
<p className="text-[11px] font-semibold text-muted uppercase tracking-wider"> <p className="text-[11px] font-semibold text-muted uppercase tracking-wider">
Resultados da Busca Resultados da Busca
</p> </p>
@ -456,7 +457,7 @@ export const MembersPage: React.FC = () => {
return ( return (
<div <div
key={org.id} key={org.id}
className="p-3.5 rounded-xl border border-border bg-surface-raised flex items-center justify-between gap-3" className="p-4 rounded-2xl border border-border-soft bg-surface-raised/80 flex items-center justify-between gap-3 shadow-xs"
> >
<div className="truncate"> <div className="truncate">
<p className="text-xs font-bold text-foreground truncate">{org.name}</p> <p className="text-xs font-bold text-foreground truncate">{org.name}</p>
@ -491,7 +492,7 @@ export const MembersPage: React.FC = () => {
</div> </div>
{/* Minhas solicitações enviadas */} {/* Minhas solicitações enviadas */}
<div className="p-5 rounded-2xl border border-border bg-surface shadow-xs space-y-3"> <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-3">
<h3 className="text-xs font-bold uppercase tracking-wider text-muted"> <h3 className="text-xs font-bold uppercase tracking-wider text-muted">
Minhas Solicitações de Ingresso Minhas Solicitações de Ingresso
</h3> </h3>

29
new-frontend/src/pages/OrganizationSettingsPage.tsx
View file

@ -29,11 +29,12 @@ export const OrganizationSettingsPage: React.FC = () => {
<div className="space-y-6 max-w-4xl mx-auto"> <div className="space-y-6 max-w-4xl mx-auto">
{/* Header */} {/* Header */}
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
Configurações do Workspace Configurações do Workspace
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
{activeOrg.name} {activeOrg.name}
</span> </span>
</div> </div>
@ -43,8 +44,8 @@ export const OrganizationSettingsPage: React.FC = () => {
</div> </div>
{/* Main Settings Card */} {/* Main Settings Card */}
<div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-6"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-8 shadow-panel space-y-6">
<div className="flex items-start justify-between gap-4 pb-6 border-b border-border"> <div className="flex items-start justify-between gap-4 pb-6 border-b border-border-soft/60">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand to-teal-700 flex items-center justify-center text-white font-bold text-xl shadow-md shadow-brand/20"> <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand to-teal-700 flex items-center justify-center text-white font-bold text-xl shadow-md shadow-brand/20">
{activeOrg.name.slice(0, 2).toUpperCase()} {activeOrg.name.slice(0, 2).toUpperCase()}
@ -56,7 +57,7 @@ export const OrganizationSettingsPage: React.FC = () => {
</div> </div>
<span <span
className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-xl text-xs font-bold border ${ className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold border ${
isOwner isOwner
? 'bg-amber-500/15 text-amber-300 border-amber-500/30' ? 'bg-amber-500/15 text-amber-300 border-amber-500/30'
: 'bg-teal-500/15 text-teal-300 border-teal-500/30' : 'bg-teal-500/15 text-teal-300 border-teal-500/30'
@ -69,14 +70,14 @@ export const OrganizationSettingsPage: React.FC = () => {
{/* Workspace Details List */} {/* Workspace Details List */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-4 rounded-2xl bg-surface-raised/80 border border-border-soft">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Nome da Organização Nome da Organização
</span> </span>
<span className="text-sm font-bold text-foreground">{activeOrg.name}</span> <span className="text-sm font-bold text-foreground">{activeOrg.name}</span>
</div> </div>
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-4 rounded-2xl bg-surface-raised/80 border border-border-soft">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Seu Perfil Conectado Seu Perfil Conectado
</span> </span>
@ -85,7 +86,7 @@ export const OrganizationSettingsPage: React.FC = () => {
</span> </span>
</div> </div>
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-4 rounded-2xl bg-surface-raised/80 border border-border-soft">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Permissões Ativas Permissões Ativas
</span> </span>
@ -101,7 +102,7 @@ export const OrganizationSettingsPage: React.FC = () => {
</div> </div>
</div> </div>
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-4 rounded-2xl bg-surface-raised/80 border border-border-soft">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Status da Conexão Status da Conexão
</span> </span>
@ -121,7 +122,7 @@ export const OrganizationSettingsPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => navigate('/members')} onClick={() => navigate('/members')}
className="p-3.5 rounded-xl border border-border bg-surface-raised hover:border-brand transition-colors text-left flex items-center justify-between" className="p-4 rounded-2xl border border-border-soft bg-surface-raised/80 hover:border-brand/40 hover:-translate-y-0.5 hover:shadow-md transition-all text-left flex items-center justify-between"
> >
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<Users className="w-4 h-4 text-brand" /> <Users className="w-4 h-4 text-brand" />
@ -133,7 +134,7 @@ export const OrganizationSettingsPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => navigate('/projects')} onClick={() => navigate('/projects')}
className="p-3.5 rounded-xl border border-border bg-surface-raised hover:border-brand transition-colors text-left flex items-center justify-between" className="p-4 rounded-2xl border border-border-soft bg-surface-raised/80 hover:border-brand/40 hover:-translate-y-0.5 hover:shadow-md transition-all text-left flex items-center justify-between"
> >
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<FolderKanban className="w-4 h-4 text-brand" /> <FolderKanban className="w-4 h-4 text-brand" />
@ -145,7 +146,7 @@ export const OrganizationSettingsPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => navigate('/organizations')} onClick={() => navigate('/organizations')}
className="p-3.5 rounded-xl border border-border bg-surface-raised hover:border-brand transition-colors text-left flex items-center justify-between" className="p-4 rounded-2xl border border-border-soft bg-surface-raised/80 hover:border-brand/40 hover:-translate-y-0.5 hover:shadow-md transition-all text-left flex items-center justify-between"
> >
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<Building2 className="w-4 h-4 text-brand" /> <Building2 className="w-4 h-4 text-brand" />
@ -157,7 +158,7 @@ export const OrganizationSettingsPage: React.FC = () => {
</div> </div>
{/* Security Note */} {/* Security Note */}
<div className="p-4 rounded-xl bg-surface-sunken/60 border border-border flex items-start gap-3 text-xs text-muted"> <div className="p-4 rounded-2xl bg-surface-sunken/60 border border-border-soft flex items-start gap-3 text-xs text-muted">
<Info className="w-4 h-4 text-brand shrink-0 mt-0.5" /> <Info className="w-4 h-4 text-brand shrink-0 mt-0.5" />
<p> <p>
As alterações nos dados cadastrais da organização respeitam a política de isolamento multi-tenant do BeeTask. Apenas os usuários autenticados e aprovados têm acesso aos dados deste workspace. As alterações nos dados cadastrais da organização respeitam a política de isolamento multi-tenant do BeeTask. Apenas os usuários autenticados e aprovados têm acesso aos dados deste workspace.

30
new-frontend/src/pages/ProfilePage.tsx
View file

@ -50,7 +50,7 @@ export const ProfilePage: React.FC = () => {
<div className="space-y-6 max-w-4xl mx-auto"> <div className="space-y-6 max-w-4xl mx-auto">
{/* Header */} {/* Header */}
<div> <div>
<h1 className="text-2xl font-bold tracking-tight text-foreground mb-1"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent mb-1">
Meu Perfil & Conta Meu Perfil & Conta
</h1> </h1>
<p className="text-xs text-muted"> <p className="text-xs text-muted">
@ -59,8 +59,8 @@ export const ProfilePage: React.FC = () => {
</div> </div>
{/* Main Profile Info Card */} {/* Main Profile Info Card */}
<div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-6"> <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-8 shadow-panel space-y-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-border-soft/60">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-full overflow-hidden border-2 border-brand/40 bg-gradient-to-br from-brand to-teal-700 flex items-center justify-center text-white font-extrabold text-2xl shadow-lg shadow-brand/20 shrink-0"> <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-brand/40 bg-gradient-to-br from-brand to-teal-700 flex items-center justify-center text-white font-extrabold text-2xl shadow-lg shadow-brand/20 shrink-0">
{user.photo ? ( {user.photo ? (
@ -87,7 +87,7 @@ export const ProfilePage: React.FC = () => {
<button <button
type="button" type="button"
onClick={handleLogout} onClick={handleLogout}
className="self-start sm:self-auto flex items-center gap-2 px-4 py-2 rounded-xl border border-rose-500/30 text-rose-300 hover:bg-rose-500/10 text-xs font-semibold transition-colors" className="self-start sm:self-auto flex items-center gap-2 px-4 py-2.5 rounded-xl border border-rose-500/30 text-rose-300 hover:bg-rose-500/10 text-xs font-semibold transition-all hover:shadow-xs"
> >
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" />
<span>Encerrar Sessão</span> <span>Encerrar Sessão</span>
@ -100,13 +100,13 @@ export const ProfilePage: React.FC = () => {
Meu Desempenho no Workspace Atual ({activeOrg?.name}) Meu Desempenho no Workspace Atual ({activeOrg?.name})
</h3> </h3>
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-8 text-muted gap-2 text-xs rounded-xl bg-surface-raised border border-border"> <div className="flex items-center justify-center py-8 text-muted gap-2 text-xs rounded-2xl bg-surface-raised/80 border border-border-soft">
<Loader2 className="w-4 h-4 animate-spin text-brand" /> <Loader2 className="w-4 h-4 animate-spin text-brand" />
<span>Carregando estatísticas pessoais...</span> <span>Carregando estatísticas pessoais...</span>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-5 rounded-2xl bg-surface-raised/80 border border-border-soft shadow-xs">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Tempo Registrado Tempo Registrado
</span> </span>
@ -118,7 +118,7 @@ export const ProfilePage: React.FC = () => {
</span> </span>
</div> </div>
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-5 rounded-2xl bg-surface-raised/80 border border-border-soft shadow-xs">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Tarefas Concluídas Tarefas Concluídas
</span> </span>
@ -130,7 +130,7 @@ export const ProfilePage: React.FC = () => {
</span> </span>
</div> </div>
<div className="p-4 rounded-xl bg-surface-raised border border-border"> <div className="p-5 rounded-2xl bg-surface-raised/80 border border-border-soft shadow-xs">
<span className="text-[11px] font-semibold text-muted block mb-1"> <span className="text-[11px] font-semibold text-muted block mb-1">
Workspace Ativo Workspace Ativo
</span> </span>
@ -168,18 +168,18 @@ export const ProfilePage: React.FC = () => {
<div <div
key={org.id} key={org.id}
onClick={() => setActiveOrg(org.id)} onClick={() => setActiveOrg(org.id)}
className={`p-3.5 rounded-xl border cursor-pointer transition-all flex items-center justify-between gap-3 ${ className={`p-4 rounded-2xl border cursor-pointer transition-all flex items-center justify-between gap-3 ${
isCurrent isCurrent
? 'border-brand bg-brand/5 ring-1 ring-brand/30' ? 'border-brand bg-brand/10 ring-1 ring-brand/40 shadow-xs'
: 'border-border bg-surface-raised hover:border-zinc-700' : 'border-border-soft bg-surface-raised/80 hover:border-brand/40 hover:-translate-y-0.5'
}`} }`}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div <div
className={`w-9 h-9 rounded-lg flex items-center justify-center font-bold text-xs ${ className={`w-9 h-9 rounded-xl flex items-center justify-center font-bold text-xs ${
isCurrent isCurrent
? 'bg-brand text-white' ? 'bg-brand text-white shadow-xs'
: 'bg-surface-sunken text-muted border border-border' : 'bg-surface-sunken text-muted border border-border-soft'
}`} }`}
> >
{org.name.slice(0, 2).toUpperCase()} {org.name.slice(0, 2).toUpperCase()}
@ -191,7 +191,7 @@ export const ProfilePage: React.FC = () => {
</div> </div>
{isCurrent && ( {isCurrent && (
<span className="px-2 py-0.5 rounded-md bg-brand/20 text-brand text-[10px] font-bold"> <span className="px-2 py-0.5 rounded-full bg-brand/20 text-brand text-[10px] font-bold">
Ativo Ativo
</span> </span>
)} )}

33
new-frontend/src/pages/ProjectsPage.tsx
View file

@ -138,11 +138,12 @@ export const ProjectsPage: React.FC = () => {
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
Projetos Projetos
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
{activeOrg?.name || 'Workspace'} {activeOrg?.name || 'Workspace'}
</span> </span>
</div> </div>
@ -157,7 +158,7 @@ export const ProjectsPage: React.FC = () => {
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar projetos" title="Recarregar projetos"
className="p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
</button> </button>
@ -165,7 +166,7 @@ export const ProjectsPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand text-white font-semibold text-xs hover:bg-brand-hover shadow-md shadow-brand/20 transition-all" className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-brand text-white font-semibold text-xs hover:bg-brand-hover shadow-md shadow-brand/25 transition-all hover:-translate-y-0.5 active:translate-y-0"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Novo Projeto</span> <span>Novo Projeto</span>
@ -174,7 +175,7 @@ export const ProjectsPage: React.FC = () => {
</div> </div>
{error && ( {error && (
<div className="flex items-center justify-between p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs"> <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs shadow-panel backdrop-blur-md">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-rose-400" /> <AlertCircle className="w-4 h-4 text-rose-400" />
<span>{error}</span> <span>{error}</span>
@ -190,15 +191,15 @@ export const ProjectsPage: React.FC = () => {
)} )}
{/* Search Bar */} {/* Search Bar */}
<div className="p-3.5 rounded-2xl border border-border bg-surface flex items-center justify-between gap-3 shadow-xs"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center justify-between gap-3 shadow-panel">
<div className="relative w-full sm:w-80"> <div className="relative w-full sm:w-80">
<Search className="w-4 h-4 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" /> <Search className="w-4 h-4 text-muted absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Buscar projeto por nome..." placeholder="Buscar projeto por nome..."
className="w-full pl-9 pr-3 py-2 rounded-xl border border-border bg-surface-raised text-xs text-foreground placeholder-muted/60 focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all" className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground placeholder-muted focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all"
/> />
</div> </div>
<div className="text-xs text-muted font-medium"> <div className="text-xs text-muted font-medium">
@ -208,11 +209,11 @@ export const ProjectsPage: React.FC = () => {
{/* Grid of Projects */} {/* Grid of Projects */}
{loading ? ( {loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div <div
key={i} key={i}
className="h-48 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-5 space-y-4" className="h-52 rounded-3xl border border-border-soft bg-surface-sunken/40 animate-pulse p-6 space-y-4"
> >
<div className="h-5 bg-surface-raised rounded-md w-1/2" /> <div className="h-5 bg-surface-raised rounded-md w-1/2" />
<div className="h-3 bg-surface-raised rounded-md w-3/4" /> <div className="h-3 bg-surface-raised rounded-md w-3/4" />
@ -221,7 +222,7 @@ export const ProjectsPage: React.FC = () => {
))} ))}
</div> </div>
) : filteredProjects.length === 0 ? ( ) : filteredProjects.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 px-4 text-center rounded-2xl border border-dashed border-border bg-surface/50"> <div className="flex flex-col items-center justify-center py-20 px-4 text-center rounded-3xl border border-dashed border-border-soft bg-surface/60 backdrop-blur-md shadow-panel">
<div className="w-14 h-14 rounded-2xl bg-brand/10 border border-brand/20 flex items-center justify-center text-brand mb-4"> <div className="w-14 h-14 rounded-2xl bg-brand/10 border border-brand/20 flex items-center justify-center text-brand mb-4">
<FolderKanban className="w-7 h-7" /> <FolderKanban className="w-7 h-7" />
</div> </div>
@ -236,7 +237,7 @@ export const ProjectsPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand text-white text-xs font-semibold hover:bg-brand-hover shadow-md shadow-brand/20 transition-all" className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand text-white text-xs font-semibold hover:bg-brand-hover shadow-md shadow-brand/25 transition-all hover:-translate-y-0.5"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Criar Primeiro Projeto</span> <span>Criar Primeiro Projeto</span>
@ -258,7 +259,7 @@ export const ProjectsPage: React.FC = () => {
return ( return (
<div <div
key={project.id} key={project.id}
className="group rounded-2xl border border-border bg-surface p-5 hover:border-zinc-700 hover:shadow-lg transition-all duration-200 flex flex-col justify-between" className="group rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-6 hover:border-brand/40 shadow-panel hover:shadow-xl hover:-translate-y-1 transition-all duration-200 flex flex-col justify-between"
> >
<div> <div>
{/* Top Bar with Icon & Color badge */} {/* Top Bar with Icon & Color badge */}
@ -286,7 +287,7 @@ export const ProjectsPage: React.FC = () => {
</div> </div>
{/* Metrics Bar */} {/* Metrics Bar */}
<div className="grid grid-cols-2 gap-2 p-3 rounded-xl bg-surface-sunken/60 border border-border/60 mb-4"> <div className="grid grid-cols-2 gap-2 p-3.5 rounded-2xl bg-surface-sunken/60 border border-border-soft mb-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ListTodo className="w-3.5 h-3.5 text-muted" /> <ListTodo className="w-3.5 h-3.5 text-muted" />
<div> <div>
@ -326,7 +327,7 @@ export const ProjectsPage: React.FC = () => {
</div> </div>
{/* Footer Link */} {/* Footer Link */}
<div className="pt-3 border-t border-border/80 flex items-center justify-between"> <div className="pt-3 border-t border-border-soft/60 flex items-center justify-between">
<span className="text-[11px] text-muted flex items-center gap-1"> <span className="text-[11px] text-muted flex items-center gap-1">
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" /> <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
{stats.completedTasks} entregues {stats.completedTasks} entregues

75
new-frontend/src/pages/TasksPage.tsx
View file

@ -199,11 +199,12 @@ export const TasksPage: React.FC = () => {
{/* Page Header */} {/* Page Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1.5 flex-wrap">
<h1 className="text-2xl font-bold tracking-tight text-foreground"> <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
Quadro de Tarefas Quadro de Tarefas
</h1> </h1>
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25"> <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
{activeOrg?.name || 'Workspace'} {activeOrg?.name || 'Workspace'}
</span> </span>
</div> </div>
@ -220,19 +221,19 @@ export const TasksPage: React.FC = () => {
onClick={loadData} onClick={loadData}
disabled={refreshing} disabled={refreshing}
title="Recarregar tarefas" title="Recarregar tarefas"
className="p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50" className="p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
> >
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} /> <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
</button> </button>
{/* Kanban / List Toggle */} {/* Kanban / List Toggle */}
<div className="flex items-center p-1 rounded-xl border border-border bg-surface"> <div className="flex items-center p-1 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel">
<button <button
type="button" type="button"
onClick={() => setViewMode('kanban')} onClick={() => setViewMode('kanban')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${ className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all ${
viewMode === 'kanban' viewMode === 'kanban'
? 'bg-brand text-white shadow-xs' ? 'bg-brand text-white shadow-md shadow-brand/20'
: 'text-muted hover:text-foreground' : 'text-muted hover:text-foreground'
}`} }`}
> >
@ -242,9 +243,9 @@ export const TasksPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setViewMode('list')} onClick={() => setViewMode('list')}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${ className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all ${
viewMode === 'list' viewMode === 'list'
? 'bg-brand text-white shadow-xs' ? 'bg-brand text-white shadow-md shadow-brand/20'
: 'text-muted hover:text-foreground' : 'text-muted hover:text-foreground'
}`} }`}
> >
@ -257,7 +258,7 @@ export const TasksPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => handleOpenCreateModal('NOT_STARTED')} onClick={() => handleOpenCreateModal('NOT_STARTED')}
className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-brand text-white font-semibold text-xs hover:bg-brand-hover shadow-md shadow-brand/20 transition-all" className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-brand text-white font-semibold text-xs hover:bg-brand-hover shadow-md shadow-brand/25 transition-all hover:-translate-y-0.5 active:translate-y-0"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
<span>Nova Tarefa</span> <span>Nova Tarefa</span>
@ -267,7 +268,7 @@ export const TasksPage: React.FC = () => {
{/* Error alert if any */} {/* Error alert if any */}
{actionError && ( {actionError && (
<div className="flex items-center justify-between p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-300 text-xs"> <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs shadow-panel backdrop-blur-md">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<AlertCircle className="w-4 h-4 text-rose-400" /> <AlertCircle className="w-4 h-4 text-rose-400" />
<span>{actionError}</span> <span>{actionError}</span>
@ -283,65 +284,65 @@ export const TasksPage: React.FC = () => {
)} )}
{/* Quick KPI Bar */} {/* Quick KPI Bar */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5">
<div className="p-3.5 rounded-xl border border-border bg-surface flex items-center gap-3"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center gap-3.5 shadow-panel hover:-translate-y-0.5 transition-all">
<div className="w-8 h-8 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center text-zinc-300"> <div className="w-10 h-10 rounded-xl bg-surface-sunken border border-border-soft flex items-center justify-center text-muted">
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
</div> </div>
<div> <div>
<p className="text-[11px] text-muted">Total de Tarefas</p> <p className="text-[11px] text-muted font-medium">Total de Tarefas</p>
<p className="text-base font-bold text-foreground">{tasks.length}</p> <p className="text-lg font-bold text-foreground">{tasks.length}</p>
</div> </div>
</div> </div>
<div className="p-3.5 rounded-xl border border-border bg-surface flex items-center gap-3"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center gap-3.5 shadow-panel hover:-translate-y-0.5 transition-all">
<div className="w-8 h-8 rounded-lg bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400"> <div className="w-10 h-10 rounded-xl bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-400">
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
</div> </div>
<div> <div>
<p className="text-[11px] text-muted">Em Andamento</p> <p className="text-[11px] text-muted font-medium">Em Andamento</p>
<p className="text-base font-bold text-teal-400">{inProgressCount}</p> <p className="text-lg font-bold text-teal-400">{inProgressCount}</p>
</div> </div>
</div> </div>
<div className="p-3.5 rounded-xl border border-border bg-surface flex items-center gap-3"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center gap-3.5 shadow-panel hover:-translate-y-0.5 transition-all">
<div className="w-8 h-8 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center text-muted"> <div className="w-10 h-10 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4" />
</div> </div>
<div> <div>
<p className="text-[11px] text-muted">A Fazer</p> <p className="text-[11px] text-muted font-medium">A Fazer</p>
<p className="text-base font-bold text-foreground">{notStartedCount}</p> <p className="text-lg font-bold text-foreground">{notStartedCount}</p>
</div> </div>
</div> </div>
<div className="p-3.5 rounded-xl border border-border bg-surface flex items-center gap-3"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex items-center gap-3.5 shadow-panel hover:-translate-y-0.5 transition-all">
<div className="w-8 h-8 rounded-lg bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400"> <div className="w-10 h-10 rounded-xl bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
<CheckCircle2 className="w-4 h-4" /> <CheckCircle2 className="w-4 h-4" />
</div> </div>
<div> <div>
<p className="text-[11px] text-muted">Concluídas</p> <p className="text-[11px] text-muted font-medium">Concluídas</p>
<p className="text-base font-bold text-emerald-400">{completedCount}</p> <p className="text-lg font-bold text-emerald-400">{completedCount}</p>
</div> </div>
</div> </div>
</div> </div>
{/* Filter and Search Bar */} {/* Filter and Search Bar */}
<div className="p-3.5 rounded-2xl border border-border bg-surface flex flex-col md:flex-row items-center justify-between gap-3 shadow-xs"> <div className="p-4 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col md:flex-row items-center justify-between gap-3 shadow-panel">
{/* Search Input */} {/* Search Input */}
<div className="relative w-full md:w-80"> <div className="relative w-full md:w-80">
<Search className="w-4 h-4 text-muted absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" /> <Search className="w-4 h-4 text-muted absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Buscar por título, projeto, categoria..." placeholder="Buscar por título, projeto, categoria..."
className="w-full pl-9 pr-3 py-2 rounded-xl border border-border bg-surface-raised text-xs text-foreground placeholder-muted/60 focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all" className="w-full pl-9 pr-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground placeholder-muted focus:outline-none focus:ring-2 focus:ring-brand/40 focus:border-brand transition-all"
/> />
{searchQuery && ( {searchQuery && (
<button <button
type="button" type="button"
onClick={() => setSearchQuery('')} onClick={() => setSearchQuery('')}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted hover:text-foreground text-xs" className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-foreground text-xs"
> >
× ×
</button> </button>
@ -354,10 +355,10 @@ export const TasksPage: React.FC = () => {
<button <button
type="button" type="button"
onClick={() => setOnlyMyTasks(!onlyMyTasks)} onClick={() => setOnlyMyTasks(!onlyMyTasks)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium border transition-colors ${ className={`flex items-center gap-1.5 px-3.5 py-2 rounded-xl text-xs font-medium border transition-all ${
onlyMyTasks onlyMyTasks
? 'bg-brand/15 text-brand border-brand/40 font-semibold' ? 'bg-brand/15 text-brand border-brand/40 font-semibold shadow-xs'
: 'bg-surface-raised border-border text-muted hover:text-foreground' : 'bg-surface-raised/80 border-border-soft text-muted hover:text-foreground'
}`} }`}
> >
{onlyMyTasks ? <UserCheck className="w-3.5 h-3.5" /> : <Users className="w-3.5 h-3.5" />} {onlyMyTasks ? <UserCheck className="w-3.5 h-3.5" /> : <Users className="w-3.5 h-3.5" />}
@ -374,7 +375,7 @@ export const TasksPage: React.FC = () => {
e.target.value === 'ALL' ? 'ALL' : Number(e.target.value) e.target.value === 'ALL' ? 'ALL' : Number(e.target.value)
) )
} }
className="pl-7 pr-3 py-1.5 rounded-xl border border-border bg-surface-raised text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-brand" className="pl-7 pr-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-brand cursor-pointer"
> >
<option value="ALL">Todos os Projetos</option> <option value="ALL">Todos os Projetos</option>
{projects.map((p) => ( {projects.map((p) => (
@ -391,7 +392,7 @@ export const TasksPage: React.FC = () => {
<select <select
value={selectedStatus} value={selectedStatus}
onChange={(e) => setSelectedStatus(e.target.value as TaskStatus | 'ALL')} onChange={(e) => setSelectedStatus(e.target.value as TaskStatus | 'ALL')}
className="px-3 py-1.5 rounded-xl border border-border bg-surface-raised text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-brand" className="px-3.5 py-2 rounded-xl border border-border-soft bg-surface-raised/80 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-brand cursor-pointer"
> >
<option value="ALL">Todos os Status</option> <option value="ALL">Todos os Status</option>
<option value="NOT_STARTED">A Fazer</option> <option value="NOT_STARTED">A Fazer</option>