fix(dashboard): unify styles, theme tokens, and integrate live timer with real tasks
This commit is contained in:
Gabriel Menezes
parent
61128c0a1a
commit
5c32665b55
1 changed files with 487 additions and 284 deletions
|
|
@ -1,374 +1,577 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
Button,
|
||||
Chip,
|
||||
ChipLabel,
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
} from '@heroui/react'
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
Clock,
|
||||
CheckCircle2,
|
||||
FolderKanban,
|
||||
Play,
|
||||
Square,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Plus,
|
||||
Sparkles,
|
||||
ArrowRight,
|
||||
Flame,
|
||||
RefreshCw,
|
||||
Folder,
|
||||
Tag,
|
||||
Activity,
|
||||
AlertCircle,
|
||||
} from 'lucide-react'
|
||||
import { useAuth } from '../contexts/AuthContext'
|
||||
import { useTimer } from '../contexts/TimerContext'
|
||||
import { taskService } from '../services/taskService'
|
||||
import { projectService } from '../services/projectService'
|
||||
import type { Task, Project } from '../types/task'
|
||||
import { calculateTaskTotalSeconds, formatSecondsToHuman, formatSecondsToTimer } from '../lib/timeUtils'
|
||||
import { CreateTaskModal } from '../components/tasks/CreateTaskModal'
|
||||
|
||||
export const DashboardPage = () => {
|
||||
export const DashboardPage: React.FC = () => {
|
||||
const { user, activeOrg } = useAuth()
|
||||
const { activeTask, activeSeconds, startTimer, stopTimer, syncWithTasks } = useTimer()
|
||||
const navigate = useNavigate()
|
||||
|
||||
// Simulação de cronômetro local interativo
|
||||
const [isRunning, setIsRunning] = useState(false)
|
||||
const [timerSeconds, setTimerSeconds] = useState(1450)
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Modal
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
|
||||
const activeOrgId = activeOrg?.id
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!activeOrgId) return
|
||||
try {
|
||||
setRefreshing(true)
|
||||
const [tasksRes, projsRes] = await Promise.allSettled([
|
||||
taskService.listTasks({ organizationId: activeOrgId }),
|
||||
projectService.listProjects(activeOrgId),
|
||||
])
|
||||
|
||||
const loadedTasks = tasksRes.status === 'fulfilled' ? tasksRes.value || [] : []
|
||||
setTasks(loadedTasks)
|
||||
syncWithTasks(loadedTasks)
|
||||
|
||||
if (projsRes.status === 'fulfilled') {
|
||||
setProjects(projsRes.value || [])
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
console.error(err)
|
||||
setError('Falha ao atualizar dados do dashboard.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [activeOrgId, syncWithTasks])
|
||||
|
||||
useEffect(() => {
|
||||
let interval: ReturnType<typeof setInterval>
|
||||
if (isRunning) {
|
||||
interval = setInterval(() => {
|
||||
setTimerSeconds((prev) => prev + 1)
|
||||
}, 1000)
|
||||
}
|
||||
return () => clearInterval(interval)
|
||||
}, [isRunning])
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const formatTimer = (total: number) => {
|
||||
const h = Math.floor(total / 3600)
|
||||
const m = Math.floor((total % 3600) / 60)
|
||||
const s = total % 60
|
||||
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
||||
// KPIs
|
||||
const stats = useMemo(() => {
|
||||
const inProgress = tasks.filter((t) => t.status === 'IN_PROGRESS').length
|
||||
const completed = tasks.filter((t) => t.status === 'COMPLETED').length
|
||||
const notStarted = tasks.filter((t) => t.status === 'NOT_STARTED').length
|
||||
const totalSeconds = tasks.reduce((acc, t) => acc + calculateTaskTotalSeconds(t), 0)
|
||||
|
||||
return {
|
||||
inProgress,
|
||||
completed,
|
||||
notStarted,
|
||||
totalSeconds,
|
||||
projectsCount: projects.length,
|
||||
}
|
||||
}, [tasks, projects])
|
||||
|
||||
// Recent 5 tasks
|
||||
const recentTasks = useMemo(() => {
|
||||
return [...tasks].slice(0, 5)
|
||||
}, [tasks])
|
||||
|
||||
// Toggle timer on a task
|
||||
const handleToggleTimer = async (task: Task) => {
|
||||
try {
|
||||
if (activeTask?.id === task.id) {
|
||||
const stopped = await stopTimer(task)
|
||||
if (stopped) {
|
||||
setTasks((prev) => prev.map((t) => (t.id === stopped.id ? stopped : t)))
|
||||
}
|
||||
} else {
|
||||
const started = await startTimer(task)
|
||||
setTasks((prev) => prev.map((t) => (t.id === started.id ? started : t)))
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
console.error(err)
|
||||
setError('Erro ao acionar cronômetro.')
|
||||
}
|
||||
}
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
label: 'Tarefas em Andamento',
|
||||
value: '4',
|
||||
sub: '2 com prazo hoje',
|
||||
icon: <Clock className="w-5 h-5 text-brand" />,
|
||||
bg: 'bg-brand-soft',
|
||||
},
|
||||
{
|
||||
label: 'Finalizadas nesta Semana',
|
||||
value: '18',
|
||||
sub: '+25% vs semana anterior',
|
||||
icon: <CheckCircle2 className="w-5 h-5 text-emerald-600" />,
|
||||
bg: 'bg-emerald-50',
|
||||
},
|
||||
{
|
||||
label: 'Horas Rastreadas (Você)',
|
||||
value: '26.4h',
|
||||
sub: 'Média de 6.6h / dia',
|
||||
icon: <TrendingUp className="w-5 h-5 text-accent" />,
|
||||
bg: 'bg-accent-soft',
|
||||
},
|
||||
{
|
||||
label: 'Projetos Conectados',
|
||||
value: '5',
|
||||
sub: 'No workspace ativo',
|
||||
icon: <FolderKanban className="w-5 h-5 text-brand" />,
|
||||
bg: 'bg-brand-soft',
|
||||
},
|
||||
]
|
||||
const handleModalSubmit = async (taskData: {
|
||||
title: string
|
||||
description: string
|
||||
status: 'NOT_STARTED' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELED'
|
||||
projectId?: number
|
||||
categoryId?: number
|
||||
assigneeUserId?: number
|
||||
}) => {
|
||||
if (!activeOrgId) return
|
||||
const created = await taskService.createTask({
|
||||
title: taskData.title,
|
||||
description: taskData.description,
|
||||
status: taskData.status,
|
||||
projectId: taskData.projectId,
|
||||
categoryId: taskData.categoryId,
|
||||
assigneeUserId: taskData.assigneeUserId,
|
||||
organizationId: activeOrgId,
|
||||
})
|
||||
setTasks((prev) => [created, ...prev])
|
||||
}
|
||||
|
||||
const recentTasks = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Implementação do AppShell e Sidebar retrátil',
|
||||
project: 'Frontend v3',
|
||||
category: 'Feature',
|
||||
status: 'EM ANDAMENTO',
|
||||
time: '02h 15m',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Ajuste de Headers CORS e preflight no Quarkus',
|
||||
project: 'Core Backend',
|
||||
category: 'Bugfix',
|
||||
status: 'CONCLUÍDO',
|
||||
time: '01h 05m',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Configuração de balde MinIO e expiração de URLs',
|
||||
project: 'Infra & Storage',
|
||||
category: 'DevOps',
|
||||
status: 'A FAZER',
|
||||
time: '00h 00m',
|
||||
},
|
||||
]
|
||||
// Priority task to focus on if none running
|
||||
const suggestedTask = useMemo(() => {
|
||||
return tasks.find((t) => t.status === 'IN_PROGRESS') || tasks.find((t) => t.status === 'NOT_STARTED') || tasks[0]
|
||||
}, [tasks])
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Top Welcome Banner */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-text-main">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-foreground">
|
||||
Olá, {user?.name?.split(' ')[0] || 'Desenvolvedor'}! 👋
|
||||
</h1>
|
||||
<Chip className="bg-brand-soft text-brand text-xs font-semibold px-2 py-0.5 border border-brand/20">
|
||||
<ChipLabel>{activeOrg?.name || 'Workspace'}</ChipLabel>
|
||||
</Chip>
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25">
|
||||
{activeOrg?.name || 'Workspace'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-muted mt-1">
|
||||
Aqui está o resumo da sua produtividade e das atividades da equipe hoje.
|
||||
<p className="text-xs text-muted">
|
||||
Visão geral da sua produtividade, metas e atividades recentes no workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to="/tasks">
|
||||
<Button className="bg-surface hover:bg-surface-muted text-text-main font-semibold text-xs px-4 py-2.5 rounded-xl border border-border-soft transition-colors shadow-xs">
|
||||
Ver Quadro de Tarefas
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/tasks/new">
|
||||
<Button className="bg-brand hover:bg-brand-strong text-white font-bold text-xs px-4 py-2.5 rounded-xl shadow-md shadow-brand/20 transition-all flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-2.5 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadData}
|
||||
disabled={refreshing}
|
||||
title="Recarregar dashboard"
|
||||
className="p-2 rounded-xl border border-border bg-surface text-muted hover:text-foreground hover:bg-surface-raised transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/tasks')}
|
||||
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
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Nova Tarefa
|
||||
</Button>
|
||||
</Link>
|
||||
<span>Nova Tarefa</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Stats Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
{kpis.map((kpi, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-surface border border-border-soft rounded-2xl p-5 shadow-xs hover:shadow-panel transition-all"
|
||||
{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 gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-rose-400" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setError(null)}
|
||||
className="text-rose-400 hover:text-rose-200 text-xs font-bold"
|
||||
>
|
||||
<CardContent className="p-0 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold text-text-muted">
|
||||
{kpi.label}
|
||||
</span>
|
||||
<div className={`p-2.5 rounded-xl ${kpi.bg}`}>
|
||||
{kpi.icon}
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* KPI Cards */}
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-28 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* 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="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold 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">
|
||||
<Clock className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl sm:text-3xl font-extrabold font-mono text-text-main">
|
||||
{kpi.value}
|
||||
<p className="text-2xl font-extrabold text-teal-400 tracking-tight">
|
||||
{stats.inProgress}
|
||||
</p>
|
||||
<p className="text-[11px] text-text-muted font-medium mt-0.5">
|
||||
{kpi.sub}
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
{stats.notStarted} no backlog para iniciar
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Grid: Active Task Tracker + Recent Tasks */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Active Session & Pomodoro Card (Left 5 cols) */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
<Card className="bg-surface border border-border-soft rounded-3xl p-6 shadow-panel space-y-5">
|
||||
<CardHeader className="p-0 flex items-center justify-between pb-3 border-b border-border-soft">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-2 rounded-xl bg-accent-soft text-accent">
|
||||
{/* 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="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold 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">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-emerald-400 tracking-tight">
|
||||
{stats.completed}
|
||||
</p>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
de {tasks.length} tarefas cadastradas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold 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">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-amber-400 tracking-tight font-mono">
|
||||
{formatSecondsToTimer(stats.totalSeconds)}
|
||||
</p>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
{formatSecondsToHuman(stats.totalSeconds)} acumuladas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold 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">
|
||||
<FolderKanban className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-extrabold text-foreground tracking-tight">
|
||||
{stats.projectsCount}
|
||||
</p>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
Iniciativas no workspace
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content: Focus Session (Left) + Recent Tasks (Right) */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* Focus Session Card (Left 5 cols) */}
|
||||
<div className="lg:col-span-5 space-y-5">
|
||||
<div className="rounded-2xl border border-border bg-surface p-6 shadow-xs space-y-5">
|
||||
<div className="flex items-center justify-between pb-3 border-b border-border">
|
||||
<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">
|
||||
<Flame className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-sm font-bold text-text-main">
|
||||
Sessão em Foco
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs text-text-muted">
|
||||
Time tracking em tempo real
|
||||
</CardDescription>
|
||||
<h2 className="text-sm font-bold text-foreground">Sessão em Foco</h2>
|
||||
<p className="text-xs text-muted">Cronômetro em tempo real</p>
|
||||
</div>
|
||||
</div>
|
||||
<Chip className={isRunning ? "bg-emerald-100 text-emerald-800 text-xs font-bold" : "bg-surface-muted text-text-muted text-xs font-semibold"}>
|
||||
<ChipLabel>{isRunning ? "ATIVO" : "PAUSADO"}</ChipLabel>
|
||||
</Chip>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0 space-y-4">
|
||||
<div className="p-4 rounded-2xl bg-surface-muted/60 border border-border-soft space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Chip className="bg-brand-soft text-brand text-[10px] font-bold">
|
||||
<ChipLabel>Frontend v3</ChipLabel>
|
||||
</Chip>
|
||||
<span className="text-xs font-medium text-text-muted">
|
||||
Squad Core
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-text-main">
|
||||
Refatoração do Layout Principal & Navegação com HeroUI
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Big Timer display */}
|
||||
<div className="text-center py-3 bg-surface rounded-2xl border border-border-soft">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-text-muted">
|
||||
Tempo na Tarefa
|
||||
</p>
|
||||
<p className="text-3xl sm:text-4xl font-extrabold font-mono text-text-main mt-1">
|
||||
{formatTimer(timerSeconds)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
onClick={() => setIsRunning(!isRunning)}
|
||||
className={`flex-1 font-bold text-xs py-3 rounded-xl flex items-center justify-center gap-2 transition-all ${
|
||||
isRunning
|
||||
? 'bg-danger-soft text-danger hover:bg-danger/20 border border-danger/30'
|
||||
: 'bg-brand hover:bg-brand-strong text-white shadow-md shadow-brand/20'
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
{isRunning ? (
|
||||
<>
|
||||
<Square className="w-4 h-4 fill-current" />
|
||||
Pausar Tempo
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-4 h-4 fill-current" />
|
||||
Iniciar Tempo
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="p-0 pt-3 border-t border-border-soft flex items-center justify-between text-xs text-text-muted">
|
||||
<span>Sessão vinculada ao usuário</span>
|
||||
<span className="font-mono text-[11px] font-bold text-brand">
|
||||
{user?.email}
|
||||
{activeTask ? 'ATIVO' : 'EM ESPERA'}
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Active or Suggested Task Info */}
|
||||
{activeTask ? (
|
||||
<div className="p-4 rounded-xl bg-surface-raised border border-border space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{activeTask.project && (
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-md text-[10px] font-medium border"
|
||||
style={{
|
||||
backgroundColor: activeTask.project.color ? `${activeTask.project.color}15` : 'rgba(15,118,110,0.1)',
|
||||
color: activeTask.project.color || '#0f766e',
|
||||
borderColor: activeTask.project.color ? `${activeTask.project.color}30` : 'rgba(15,118,110,0.25)',
|
||||
}}
|
||||
>
|
||||
{activeTask.project.name}
|
||||
</span>
|
||||
)}
|
||||
{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">
|
||||
{activeTask.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-foreground line-clamp-2">
|
||||
{activeTask.title}
|
||||
</h3>
|
||||
</div>
|
||||
) : suggestedTask ? (
|
||||
<div className="p-4 rounded-xl bg-surface-sunken/60 border border-border space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-semibold text-muted uppercase tracking-wider">
|
||||
Próxima da fila
|
||||
</span>
|
||||
{suggestedTask.project && (
|
||||
<span className="text-[10px] text-muted truncate max-w-[120px]">
|
||||
{suggestedTask.project.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-foreground line-clamp-2">
|
||||
{suggestedTask.title}
|
||||
</h3>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6 rounded-xl bg-surface-sunken/40 border border-dashed border-border text-center text-xs text-muted">
|
||||
Nenhuma tarefa pendente. Crie uma nova tarefa para iniciar o foco!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Big Timer Display */}
|
||||
<div className="text-center py-4 rounded-xl bg-surface-sunken border border-border">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted">
|
||||
{activeTask ? 'Tempo Decorrido na Tarefa' : 'Pronto para Cronometrar'}
|
||||
</span>
|
||||
<p className="text-3xl sm:text-4xl font-extrabold font-mono text-foreground mt-1">
|
||||
{activeTask ? formatSecondsToTimer(activeSeconds) : '00:00:00'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
{activeTask ? (
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Square className="w-4 h-4 fill-rose-300" />
|
||||
<span>Pausar Cronômetro</span>
|
||||
</button>
|
||||
) : suggestedTask ? (
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Play className="w-4 h-4 fill-white" />
|
||||
<span>Iniciar Foco Nesta Tarefa</span>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Criar Tarefa para Iniciar</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="pt-2 border-t border-border flex items-center justify-between text-[11px] text-muted">
|
||||
<span>Usuário ativo:</span>
|
||||
<span className="font-semibold text-foreground truncate max-w-[150px]">
|
||||
{user?.name || user?.email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Shortcuts */}
|
||||
<Card className="bg-surface border border-border-soft rounded-2xl p-5 shadow-xs space-y-3">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-text-muted">
|
||||
Acesso Rápido
|
||||
</h4>
|
||||
<div className="rounded-2xl border border-border bg-surface p-5 shadow-xs space-y-3">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-muted block">
|
||||
Atalhos de Gestão
|
||||
</span>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs font-semibold">
|
||||
<Link
|
||||
to="/projects"
|
||||
className="p-3 rounded-xl bg-surface-muted hover:bg-brand-soft/50 hover:text-brand transition-colors flex items-center gap-2"
|
||||
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"
|
||||
>
|
||||
<FolderKanban className="w-4 h-4 text-brand" />
|
||||
<span>Ver Projetos</span>
|
||||
<span>Projetos</span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/analytics"
|
||||
className="p-3 rounded-xl bg-surface-muted hover:bg-accent-soft/50 hover:text-accent transition-colors flex items-center gap-2"
|
||||
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"
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 text-accent" />
|
||||
<span>Métricas da Org</span>
|
||||
<TrendingUp className="w-4 h-4 text-amber-400" />
|
||||
<span>Analytics</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Tasks List (Right 7 cols) */}
|
||||
<div className="lg:col-span-7 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-bold text-text-main flex items-center gap-2">
|
||||
<h2 className="text-base font-bold text-foreground flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-accent" />
|
||||
Tarefas Recentes da Sprint
|
||||
Tarefas Recentes
|
||||
</h2>
|
||||
<Link
|
||||
to="/tasks"
|
||||
className="text-xs font-bold text-brand hover:underline flex items-center gap-1"
|
||||
>
|
||||
Ver todas
|
||||
<span>Ver todas</span>
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
{recentTasks.map((task) => (
|
||||
<Card
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-20 rounded-2xl border border-border bg-surface-sunken/40 animate-pulse p-4"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : recentTasks.length === 0 ? (
|
||||
<div className="text-center py-16 rounded-2xl border border-dashed border-border bg-surface/50">
|
||||
<Activity className="w-8 h-8 text-muted mx-auto mb-2" />
|
||||
<p className="text-xs text-muted mb-4">
|
||||
Nenhuma tarefa encontrada neste workspace.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Criar Primeira Tarefa</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{recentTasks.map((task) => {
|
||||
const isTracking = activeTask?.id === task.id
|
||||
const taskSec = isTracking ? activeSeconds : calculateTaskTotalSeconds(task)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className="bg-surface border border-border-soft rounded-2xl p-4 shadow-xs hover:shadow-panel hover:border-brand/30 transition-all 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 ${
|
||||
isTracking
|
||||
? 'border-brand/60 bg-brand/5 ring-1 ring-brand/30 shadow-md'
|
||||
: 'border-border bg-surface hover:border-zinc-700 shadow-xs'
|
||||
}`}
|
||||
>
|
||||
<div className="space-y-1.5 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Chip className="bg-surface-muted text-text-muted text-[10px] font-semibold border border-border-soft">
|
||||
<ChipLabel>{task.project}</ChipLabel>
|
||||
</Chip>
|
||||
<Chip className="bg-brand-soft text-brand text-[10px] font-bold">
|
||||
<ChipLabel>{task.category}</ChipLabel>
|
||||
</Chip>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{task.project && (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium border"
|
||||
style={{
|
||||
backgroundColor: task.project.color ? `${task.project.color}15` : 'rgba(255,255,255,0.05)',
|
||||
color: task.project.color || '#94a3b8',
|
||||
borderColor: task.project.color ? `${task.project.color}30` : 'rgba(255,255,255,0.1)',
|
||||
}}
|
||||
>
|
||||
<Folder className="w-2.5 h-2.5" />
|
||||
{task.project.name}
|
||||
</span>
|
||||
)}
|
||||
{task.category && (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium border"
|
||||
style={{
|
||||
backgroundColor: task.category.color ? `${task.category.color}15` : 'rgba(217,119,6,0.1)',
|
||||
color: task.category.color || '#d97706',
|
||||
borderColor: task.category.color ? `${task.category.color}30` : 'rgba(217,119,6,0.2)',
|
||||
}}
|
||||
>
|
||||
<Tag className="w-2.5 h-2.5" />
|
||||
{task.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-text-main truncate">
|
||||
|
||||
<h3
|
||||
onClick={() => navigate('/tasks')}
|
||||
className="text-xs font-bold text-foreground hover:text-brand cursor-pointer truncate"
|
||||
>
|
||||
{task.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 shrink-0 self-end sm:self-center">
|
||||
<span className="text-xs font-mono font-semibold text-text-muted">
|
||||
{task.time}
|
||||
</span>
|
||||
<Chip
|
||||
className={`text-[10px] font-bold ${
|
||||
task.status === 'CONCLUÍDO'
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: task.status === 'EM ANDAMENTO'
|
||||
? 'bg-amber-100 text-amber-800'
|
||||
: 'bg-surface-muted text-text-muted'
|
||||
<div
|
||||
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md font-mono text-[11px] ${
|
||||
isTracking
|
||||
? 'bg-teal-500/20 text-teal-300 font-bold'
|
||||
: 'bg-surface-sunken text-muted'
|
||||
}`}
|
||||
>
|
||||
<ChipLabel>{task.status}</ChipLabel>
|
||||
</Chip>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
<Clock className={`w-3 h-3 ${isTracking ? 'animate-pulse text-brand' : ''}`} />
|
||||
<span>{formatSecondsToTimer(taskSec)}</span>
|
||||
</div>
|
||||
|
||||
{/* Team Active Members Banner */}
|
||||
<Card className="bg-gradient-to-r from-surface to-surface-muted border border-border-soft rounded-2xl p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-brand-soft text-brand flex items-center justify-center font-bold">
|
||||
<Users className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-text-main">
|
||||
Squad Ativo no Workspace
|
||||
</p>
|
||||
<p className="text-[11px] text-text-muted">
|
||||
3 colaboradores com sessões registradas hoje
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex -space-x-2">
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-brand text-white text-[10px] font-bold">
|
||||
GB
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-accent text-white text-[10px] font-bold">
|
||||
AL
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-7 h-7 rounded-full ring-2 ring-surface">
|
||||
<AvatarFallback className="bg-brand-strong text-white text-[10px] font-bold">
|
||||
MS
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleTimer(task)}
|
||||
title={isTracking ? 'Pausar cronômetro' : 'Iniciar cronômetro'}
|
||||
className={`p-1.5 rounded-lg transition-colors ${
|
||||
isTracking
|
||||
? 'bg-rose-500/20 text-rose-300 hover:bg-rose-500/30'
|
||||
: 'bg-brand/15 text-teal-300 hover:bg-brand/25'
|
||||
}`}
|
||||
>
|
||||
{isTracking ? (
|
||||
<Square className="w-3.5 h-3.5 fill-rose-300" />
|
||||
) : (
|
||||
<Play className="w-3.5 h-3.5 fill-teal-300" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Task Creation Modal */}
|
||||
{activeOrgId && (
|
||||
<CreateTaskModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onSubmit={handleModalSubmit}
|
||||
organizationId={activeOrgId}
|
||||
initialStatus="NOT_STARTED"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue