From 5c1ae6858a063f4cf4ad026c522d5ee344983e9d Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Fri, 10 Apr 2026 14:40:10 +0000
Subject: [PATCH] =?UTF-8?q?Task=20card=20right=20sidebar:=202-col=20layout?=
 =?UTF-8?q?=20=E2=80=94=20data=20col=20(due/status/level)=20+=20icon=20col?=
 =?UTF-8?q?=20(complete/NA/edit)=20+=20full-width=20notes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/(dashboard)/tasks/page-client.tsx | 105 +++++++++---------
 1 file changed, 51 insertions(+), 54 deletions(-)

diff --git a/ondeck/src/app/(dashboard)/tasks/page-client.tsx b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
index 18b3844..14486ec 100644
--- a/ondeck/src/app/(dashboard)/tasks/page-client.tsx
+++ b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
@@ -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>