577 lines
24 KiB
TypeScript
577 lines
24 KiB
TypeScript
import React, { useState, useEffect, useCallback, useMemo } from 'react'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import {
|
|
Clock,
|
|
CheckCircle2,
|
|
FolderKanban,
|
|
Play,
|
|
Square,
|
|
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: React.FC = () => {
|
|
const { user, activeOrg } = useAuth()
|
|
const { activeTask, activeSeconds, startTimer, stopTimer, syncWithTasks } = useTimer()
|
|
const navigate = useNavigate()
|
|
|
|
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(() => {
|
|
loadData()
|
|
}, [loadData])
|
|
|
|
// 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 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])
|
|
}
|
|
|
|
// 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-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 mb-1">
|
|
<h1 className="text-2xl font-bold tracking-tight text-foreground">
|
|
Olá, {user?.name?.split(' ')[0] || 'Desenvolvedor'}! 👋
|
|
</h1>
|
|
<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-xs text-muted">
|
|
Visão geral da sua produtividade, metas e atividades recentes no workspace.
|
|
</p>
|
|
</div>
|
|
|
|
<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" />
|
|
<span>Nova Tarefa</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{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"
|
|
>
|
|
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 font-extrabold text-teal-400 tracking-tight">
|
|
{stats.inProgress}
|
|
</p>
|
|
<p className="text-[11px] text-muted mt-1">
|
|
{stats.notStarted} no backlog para iniciar
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
<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>
|
|
|
|
<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>
|
|
</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 */}
|
|
<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-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>Projetos</span>
|
|
</Link>
|
|
<Link
|
|
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"
|
|
>
|
|
<TrendingUp className="w-4 h-4 text-amber-400" />
|
|
<span>Analytics</span>
|
|
</Link>
|
|
</div>
|
|
</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-base font-bold text-foreground flex items-center gap-2">
|
|
<Sparkles className="w-4 h-4 text-accent" />
|
|
Tarefas Recentes
|
|
</h2>
|
|
<Link
|
|
to="/tasks"
|
|
className="text-xs font-bold text-brand hover:underline flex items-center gap-1"
|
|
>
|
|
<span>Ver todas</span>
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</Link>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="space-y-3">
|
|
{[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={`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-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
|
|
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">
|
|
<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'
|
|
}`}
|
|
>
|
|
<Clock className={`w-3 h-3 ${isTracking ? 'animate-pulse text-brand' : ''}`} />
|
|
<span>{formatSecondsToTimer(taskSec)}</span>
|
|
</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>
|
|
)
|
|
}
|