lorentz/seubert-claims
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Task card: proper tooltips on all icons, brighter red due date bg (40% opacity in dark)

Browse source
This commit is contained in:
lorentz 2026-04-10 14:55:15 +00:00
parent 5ed6605460
commit 22089d24b3
1 changed files with 47 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

75
ondeck/src/app/(dashboard)/tasks/page-client.tsx
View file

@ -22,6 +22,7 @@ import {
} from '@/components/ui/select'
import { UserSelectContent } from '@/components/ui/user-select-content'
import { CheckSquare, Clock, AlertCircle, MessageSquare, CheckCircle2, RotateCcw, Eye, CalendarRange, ArrowRightLeft, Search, X, Building2, Plus, Ban, ArrowUpDown, ArrowUp, ArrowDown, Filter, Pencil } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Input } from '@/components/ui/input'
import { formatDate, formatRenewalDate } from '@/lib/utils'
import { AdditionalServiceModal } from '@/components/tasks/additional-service-modal'
@ -229,11 +230,11 @@ function TaskCard({ task: initial }: { task: Task }) {
const dueBg = isCompleted
? 'bg-muted/50'
: daysUntilDue < 0
? 'bg-red-600/25 dark:bg-red-500/30'
? 'bg-red-500/30 dark:bg-red-500/40'
: daysUntilDue <= 7
? 'bg-red-500/20 dark:bg-red-500/25'
? 'bg-red-500/25 dark:bg-red-500/35'
: daysUntilDue <= 14
? 'bg-orange-500/20 dark:bg-orange-400/25'
? 'bg-orange-400/25 dark:bg-orange-400/35'
: 'bg-muted/40'
return (
@ -276,17 +277,23 @@ function TaskCard({ task: initial }: { task: Task }) {
<div className={`px-3 py-1.5 border-b border-border flex items-center whitespace-nowrap ${dueBg}`}>
<span className="font-bold" suppressHydrationWarning>{formatDate(task.dueDate)}</span>
</div>
<button
onClick={handleToggleStatus}
disabled={toggling}
className="border-b border-l border-border flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-50"
title={isCompleted ? 'Reopen' : 'Complete'}
>
{isCompleted
? <RotateCcw className="h-5 w-5" />
: <CheckCircle2 className="h-5 w-5" />
}
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={handleToggleStatus}
disabled={toggling}
className="border-b border-l border-border flex items-center justify-center hover:bg-muted transition-colors disabled:opacity-50"
>
{isCompleted
? <RotateCcw className="h-5 w-5" />
: <CheckCircle2 className="h-5 w-5" />
}
</button>
</TooltipTrigger>
<TooltipContent side="left"><p>{isCompleted ? 'Reopen task' : 'Mark complete'}</p></TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Row 2: Status | N/A */}
<div className="px-3 py-1.5 border-b border-border flex items-center">
<Select value={task.status} onValueChange={handleQuickStatus} disabled={statusUpdating}>
@ -303,13 +310,19 @@ function TaskCard({ task: initial }: { task: Task }) {
</Select>
</div>
{task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' ? (
<button
onClick={() => setNaDialogOpen(true)}
className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Mark as N/A"
>
<Ban className="h-5 w-5" />
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setNaDialogOpen(true)}
className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
>
<Ban className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent side="left"><p>Mark as N/A</p></TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<div className="border-b border-l border-border" />
)}
@ -317,13 +330,19 @@ function TaskCard({ task: initial }: { task: Task }) {
<div className="px-3 py-1.5 border-b border-border flex items-center text-muted-foreground">
{levelLabel}
</div>
<button
onClick={() => setEditOpen(true)}
className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Edit task"
>
<Pencil className="h-5 w-5" />
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setEditOpen(true)}
className="border-b border-l border-border flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
>
<Pencil className="h-5 w-5" />
</button>
</TooltipTrigger>
<TooltipContent side="left"><p>Edit task</p></TooltipContent>
</Tooltip>
</TooltipProvider>
{/* Row 4: Notes spanning both cols */}
<button
onClick={() => setNoteOpen((o) => !o)}