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

Task card right sidebar: 2-col layout — data col (due/status/level) + icon col (complete/NA/edit) + full-width notes

Browse source
This commit is contained in:
lorentz 2026-04-10 14:40:10 +00:00
parent f2192cb70b
commit 5c1ae6858a
1 changed files with 51 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -224,10 +224,10 @@ function TaskCard({ task: initial }: { task: Task }) {
{task.title}
</h3>
</div>
{task.client && (
<p className="text-[13px] font-medium text-foreground">{task.client.name}</p>
)}
<div className="flex flex-wrap gap-x-5 gap-y-0.5 text-[13px]">
{task.client && (
<span><span className="text-muted-foreground">Client</span> <span className="text-foreground font-medium">{task.client.name}</span></span>
)}
<span><span className="text-muted-foreground">Policy #</span> <span className="text-foreground font-medium">{task.policy?.policyNumber || '—'}</span></span>
<span><span className="text-muted-foreground">Type</span> <span className="text-foreground font-medium">{task.policy?.policyType || '—'}</span></span>
<span><span className="text-muted-foreground">Renewal</span> <span className="text-foreground font-medium" suppressHydrationWarning>{task.policy?.expirationDate ? formatRenewalDate(task.policy.expirationDate) : '—'}</span></span>
@ -239,63 +239,60 @@ function TaskCard({ task: initial }: { task: Task }) {
)}
</div>
{/* Right sidebar */}
<div className="shrink-0 w-[160px] border-l border-border flex flex-col">
{/* Info: Due / Status / Level */}
<div className="px-3 py-2.5 space-y-1 text-[12px]">
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Due</span>
<span className={`font-medium ${isOverdue ? 'text-red-500' : 'text-foreground'}`} suppressHydrationWarning>{formatDate(task.dueDate)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Status</span>
{/* Right sidebar: 2-col grid */}
<div className="shrink-0 w-[120px] border-l border-border flex flex-col text-[12px]">
<div className="flex-1 grid grid-cols-2">
{/* Left col: Due / Status / Level (data only) */}
<div className="flex flex-col justify-center gap-1.5 px-2.5 py-2.5">
<span className={`font-medium ${isOverdue ? 'text-red-500' : 'text-foreground'}`} suppressHydrationWarning>
{formatDate(task.dueDate)}
</span>
<StatusBadge status={task.status} />
<span className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium w-fit ${levelColor}`}>
{levelLabel}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Level</span>
<span className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${levelColor}`}>{levelLabel}</span>
</div>
</div>
{/* Actions: 2×2 grid */}
<div className="border-t border-border grid grid-cols-2 divide-x divide-border">
<button
onClick={handleToggleStatus}
disabled={toggling}
className="flex items-center justify-center gap-1 py-2 text-[11px] font-medium hover:bg-muted transition-colors disabled:opacity-50"
>
{isCompleted
? <><RotateCcw className="h-3 w-3" /> Reopen</>
: <><CheckCircle2 className="h-3 w-3" /> Complete</>
}
</button>
<button
onClick={() => setEditOpen(true)}
className="flex items-center justify-center gap-1 py-2 text-[11px] font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
>
<Pencil className="h-3 w-3" /> Edit
</button>
</div>
<div className="border-t border-border grid grid-cols-2 divide-x divide-border">
{task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' ? (
{/* Right col: Complete / N/A / Edit (icons) */}
<div className="flex flex-col items-center justify-center gap-0.5 border-l border-border">
<button
onClick={() => setNaDialogOpen(true)}
className="flex items-center justify-center gap-1 py-2 text-[11px] font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
onClick={handleToggleStatus}
disabled={toggling}
className="p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-50"
title={isCompleted ? 'Reopen' : 'Complete'}
>
<Ban className="h-3 w-3" /> N/A
{isCompleted
? <RotateCcw className="h-3.5 w-3.5" />
: <CheckCircle2 className="h-3.5 w-3.5" />
}
</button>
) : (
<span />
)}
<button
onClick={() => setNoteOpen((o) => !o)}
className={`flex items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors ${
noteOpen ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
}`}
>
<MessageSquare className="h-3 w-3" />
{notes.length > 0 ? `Notes (${notes.length})` : 'Notes'}
</button>
{task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' && (
<button
onClick={() => setNaDialogOpen(true)}
className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Mark as N/A"
>
<Ban className="h-3.5 w-3.5" />
</button>
)}
<button
onClick={() => setEditOpen(true)}
className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Edit task"
>
<Pencil className="h-3.5 w-3.5" />
</button>
</div>
</div>
{/* Notes: full width bottom */}
<button
onClick={() => setNoteOpen((o) => !o)}
className={`flex items-center justify-center gap-1 py-1.5 border-t border-border text-[11px] font-medium transition-colors ${
noteOpen ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
}`}
>
<MessageSquare className="h-3 w-3" />
{notes.length > 0 ? `Notes (${notes.length})` : 'Notes'}
</button>
</div>
</div>