Consistent task cards: client detail now uses shared TaskCard
- Extract TaskCard into components/tasks/task-card.tsx (full-featured) - Client tasks API now includes policy, policyGroup, taskNotes - client-detail replaces inline render with shared TaskCard - Features now consistent: status dropdown, complete/NA/edit actions, inline notes panel, carrier info, policy group popover, due date urgency colors, priority dot
This commit is contained in:
parent
b3da81a5d8
commit
07945ec1d9
3 changed files with 537 additions and 107 deletions
|
|
@ -54,6 +54,23 @@ export async function GET(
|
|||
user: { select: { id: true, displayName: true, email: true } },
|
||||
},
|
||||
},
|
||||
policy: {
|
||||
select: {
|
||||
id: true,
|
||||
policyNumber: true,
|
||||
policyType: true,
|
||||
expirationDate: true,
|
||||
carrierName: true,
|
||||
writingCompanyName: true,
|
||||
},
|
||||
},
|
||||
policyGroup: {
|
||||
select: { id: true, name: true, renewalDate: true },
|
||||
},
|
||||
taskNotes: {
|
||||
include: { user: { select: { id: true, displayName: true, email: true } } },
|
||||
orderBy: { createdAt: 'asc' },
|
||||
},
|
||||
},
|
||||
orderBy: { dueDate: 'asc' },
|
||||
})
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ import { Combobox, type ComboboxGroup } from '@/components/ui/combobox'
|
|||
import { formatDate, formatRenewalDate } from '@/lib/utils'
|
||||
import { PolicyGroupManager } from '@/components/clients/policy-group-manager'
|
||||
import { AdditionalServiceModal } from '@/components/tasks/additional-service-modal'
|
||||
import { TaskEditModal, type EditableTask } from '@/components/tasks/task-edit-modal'
|
||||
import { TaskCard } from '@/components/tasks/task-card'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface SimpleUser {
|
||||
|
|
@ -79,7 +79,6 @@ export function ClientDetail({ client, designations, policyGroups = [], allPolic
|
|||
const [showCompleted, setShowCompleted] = useState(false)
|
||||
const [notesExpanded, setNotesExpanded] = useState(!!(client.notes))
|
||||
const [additionalServiceOpen, setAdditionalServiceOpen] = useState(false)
|
||||
const [editingTaskId, setEditingTaskId] = useState<string | null>(null)
|
||||
const [sessionUserId, setSessionUserId] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -667,114 +666,16 @@ export function ClientDetail({ client, designations, policyGroups = [], allPolic
|
|||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
sorted.map((task: any) => {
|
||||
const completed = isTerminal(task.status)
|
||||
const overdue = new Date(task.dueDate) < new Date() && !completed
|
||||
return (
|
||||
<Card
|
||||
sorted.map((task: any) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
className={completed ? 'opacity-60' : overdue ? 'border-red-500/40 bg-red-500/5' : ''}
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-1">
|
||||
<h3 className={`font-semibold ${completed ? 'line-through text-muted-foreground' : ''}`}>
|
||||
{task.title}
|
||||
</h3>
|
||||
<Badge
|
||||
variant={
|
||||
task.status === 'COMPLETED' ? 'default' :
|
||||
task.status === 'IN_PROGRESS' ? 'secondary' :
|
||||
task.status === 'NA' || task.status === 'CANCELLED' ? 'outline' :
|
||||
'secondary'
|
||||
}
|
||||
>
|
||||
{task.status.replace('_', ' ')}
|
||||
</Badge>
|
||||
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
task.priority === 'HIGH' ? 'bg-red-500/15 text-red-700 dark:text-red-400' :
|
||||
task.priority === 'MEDIUM' ? 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400' :
|
||||
'bg-muted text-muted-foreground'
|
||||
}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded px-1 py-0.5 transition-colors"
|
||||
title="View notes"
|
||||
>
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
{(task.taskNotes?.length || 0) > 0 ? task.taskNotes.length : '+'}
|
||||
</button>
|
||||
</div>
|
||||
{/* Always show Policy #, Type, Renewal Date */}
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-sm mt-1">
|
||||
<span>
|
||||
<span className="text-muted-foreground">Policy #:</span>{' '}
|
||||
<span className="font-medium">{task.policy?.policyNumber || '—'}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span className="text-muted-foreground">Type:</span>{' '}
|
||||
<span className="font-medium">{task.policy?.policyType || '—'}</span>
|
||||
</span>
|
||||
<span>
|
||||
<span className="text-muted-foreground">Renewal:</span>{' '}
|
||||
<span className="font-medium" suppressHydrationWarning>
|
||||
{task.policy?.expirationDate ? formatRenewalDate(task.policy.expirationDate) : '—'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{task.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mt-1">{task.description}</p>
|
||||
)}
|
||||
{task.assignments?.length > 0 && (
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Assigned to: {task.assignments.map((a: any) => a.user.displayName || a.user.email).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1 shrink-0 ml-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingTaskId(task.id)}
|
||||
className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded px-1.5 py-0.5 transition-colors"
|
||||
title="Edit task"
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</button>
|
||||
<p className={`text-sm font-medium ${overdue ? 'text-red-500' : ''}`} suppressHydrationWarning>
|
||||
Due: {formatDate(task.dueDate)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
task={task}
|
||||
onUpdated={() => refreshTasks()}
|
||||
/>
|
||||
))
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Task edit modal */}
|
||||
{editingTaskId && (() => {
|
||||
const editTask = tasks.find((t: any) => t.id === editingTaskId)
|
||||
if (!editTask) return null
|
||||
return (
|
||||
<TaskEditModal
|
||||
open={!!editingTaskId}
|
||||
onOpenChange={(open) => { if (!open) setEditingTaskId(null) }}
|
||||
task={{
|
||||
...editTask,
|
||||
clientId: client.id,
|
||||
client: { id: client.id, name: client.name },
|
||||
} as EditableTask}
|
||||
onUpdated={() => {
|
||||
setEditingTaskId(null)
|
||||
refreshTasks()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
</TabsContent>
|
||||
|
||||
<AdditionalServiceModal
|
||||
|
|
|
|||
512
ondeck/src/components/tasks/task-card.tsx
Normal file
512
ondeck/src/components/tasks/task-card.tsx
Normal file
|
|
@ -0,0 +1,512 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useRef } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { MessageSquare, CheckCircle2, RotateCcw, Ban, Pencil, ChevronDown, X } from 'lucide-react'
|
||||
import { formatDate, formatRenewalDate } from '@/lib/utils'
|
||||
import Link from 'next/link'
|
||||
import { TaskEditModal, type EditableTask } from '@/components/tasks/task-edit-modal'
|
||||
|
||||
export interface TaskCardTask {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
status: string
|
||||
priority: string
|
||||
department: string
|
||||
dueDate: string | Date
|
||||
notes?: string | null
|
||||
client?: { id: string; name: string } | null
|
||||
policy?: { id: string; policyNumber: string | null; policyType: string | null; expirationDate: string | Date; carrierName: string | null; writingCompanyName: string | null } | null
|
||||
policyGroup?: { id: string; name: string | null; renewalDate: string | Date | null } | null
|
||||
assignments: { id: string; user: { displayName: string | null; email: string } }[]
|
||||
taskNotes?: { id: string; content: string; createdAt: string; user: { id: string; displayName: string | null; email: string } }[]
|
||||
isAdHoc?: boolean
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const map: Record<string, string> = {
|
||||
COMPLETED: 'bg-green-500/15 text-green-700 dark:text-green-400',
|
||||
IN_PROGRESS: 'bg-blue-500/15 text-blue-700 dark:text-blue-400',
|
||||
NOT_STARTED: 'bg-muted text-muted-foreground',
|
||||
BLOCKED: 'bg-red-500/15 text-red-700 dark:text-red-400',
|
||||
NA: 'bg-muted text-muted-foreground',
|
||||
CANCELLED: 'bg-muted text-muted-foreground line-through',
|
||||
}
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${map[status] ?? 'bg-muted text-muted-foreground'}`}>
|
||||
{status.replace('_', ' ')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function PriorityDot({ priority }: { priority: string }) {
|
||||
const map: Record<string, string> = {
|
||||
HIGH: 'text-red-500',
|
||||
MEDIUM: 'text-yellow-500',
|
||||
LOW: 'text-green-500',
|
||||
}
|
||||
return (
|
||||
<span className={`text-xs font-medium ${map[priority] ?? 'text-muted-foreground'}`}>
|
||||
{priority}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
interface TaskCardProps {
|
||||
task: TaskCardTask
|
||||
onUpdated?: (updated: Partial<TaskCardTask>) => void
|
||||
showClient?: boolean
|
||||
}
|
||||
|
||||
export function TaskCard({ task: initial, onUpdated, showClient = false }: TaskCardProps) {
|
||||
const [task, setTask] = useState(initial)
|
||||
const [notes, setNotes] = useState(initial.taskNotes ?? [])
|
||||
const [noteOpen, setNoteOpen] = useState(false)
|
||||
const [newNote, setNewNote] = useState('')
|
||||
const [noteStatus, setNoteStatus] = useState(initial.status)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [toggling, setToggling] = useState(false)
|
||||
const [naDialogOpen, setNaDialogOpen] = useState(false)
|
||||
const [naReason, setNaReason] = useState('')
|
||||
const [naSubmitting, setNaSubmitting] = useState(false)
|
||||
const [editOpen, setEditOpen] = useState(false)
|
||||
const [statusUpdating, setStatusUpdating] = useState(false)
|
||||
const [groupPoliciesOpen, setGroupPoliciesOpen] = useState(false)
|
||||
const [groupPolicies, setGroupPolicies] = useState<any[]>([])
|
||||
const [groupPoliciesLoading, setGroupPoliciesLoading] = useState(false)
|
||||
const groupPopoverRef = useRef<HTMLDivElement>(null)
|
||||
const [completeDialogOpen, setCompleteDialogOpen] = useState(false)
|
||||
const [imageRightFiled, setImageRightFiled] = useState<boolean | null>(null)
|
||||
const [reminderDate, setReminderDate] = useState('')
|
||||
const [completeSubmitting, setCompleteSubmitting] = useState(false)
|
||||
|
||||
const now = new Date()
|
||||
const isOverdue = new Date(task.dueDate) < now && task.status !== 'COMPLETED'
|
||||
const isCompleted = task.status === 'COMPLETED'
|
||||
|
||||
const update = (patch: Partial<TaskCardTask>) => {
|
||||
setTask((t) => ({ ...t, ...patch }))
|
||||
onUpdated?.(patch)
|
||||
}
|
||||
|
||||
const handleToggleStatus = async () => {
|
||||
if (!isCompleted) {
|
||||
setImageRightFiled(null)
|
||||
setReminderDate('')
|
||||
setCompleteDialogOpen(true)
|
||||
return
|
||||
}
|
||||
setToggling(true)
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'NOT_STARTED' }),
|
||||
})
|
||||
if (!res.ok) throw new Error((await res.json()).error)
|
||||
update({ status: 'NOT_STARTED' })
|
||||
setNoteStatus('NOT_STARTED')
|
||||
toast.success('Task reopened')
|
||||
} catch (err: any) {
|
||||
toast.error(err.message)
|
||||
} finally {
|
||||
setToggling(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmComplete = async () => {
|
||||
setCompleteSubmitting(true)
|
||||
try {
|
||||
const body: any = { status: 'COMPLETED' }
|
||||
if (imageRightFiled !== null) body.imageRightFiled = imageRightFiled
|
||||
if (reminderDate) body.reminderDate = reminderDate
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!res.ok) throw new Error((await res.json()).error)
|
||||
update({ status: 'COMPLETED' })
|
||||
setNoteStatus('COMPLETED')
|
||||
setCompleteDialogOpen(false)
|
||||
toast.success('Task marked complete')
|
||||
} catch (err: any) {
|
||||
toast.error(err.message)
|
||||
} finally {
|
||||
setCompleteSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMarkNA = async () => {
|
||||
if (!naReason.trim()) return
|
||||
setNaSubmitting(true)
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'NA', naReason: naReason.trim() }),
|
||||
})
|
||||
if (!res.ok) throw new Error((await res.json()).error)
|
||||
update({ status: 'NA' })
|
||||
setNoteStatus('NA')
|
||||
setNaDialogOpen(false)
|
||||
setNaReason('')
|
||||
toast.success('Task marked N/A')
|
||||
} catch (err: any) {
|
||||
toast.error(err.message)
|
||||
} finally {
|
||||
setNaSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddNote = async () => {
|
||||
if (!newNote.trim()) return
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}/notes`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: newNote.trim(), status: noteStatus !== task.status ? noteStatus : undefined }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error)
|
||||
setNotes((prev) => [...prev, data])
|
||||
if (noteStatus !== task.status) update({ status: noteStatus })
|
||||
setNewNote('')
|
||||
toast.success('Note added')
|
||||
} catch (err: any) {
|
||||
toast.error(err.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuickStatus = async (newStatus: string) => {
|
||||
if (newStatus === task.status) return
|
||||
if (newStatus === 'NA') { setNaDialogOpen(true); return }
|
||||
if (newStatus === 'COMPLETED') { handleToggleStatus(); return }
|
||||
setStatusUpdating(true)
|
||||
try {
|
||||
const res = await fetch(`/api/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
if (!res.ok) throw new Error((await res.json()).error)
|
||||
update({ status: newStatus })
|
||||
toast.success(`Status → ${newStatus.replace('_', ' ')}`)
|
||||
} catch (err: any) {
|
||||
toast.error(err.message)
|
||||
} finally {
|
||||
setStatusUpdating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGroupClick = async () => {
|
||||
if (groupPoliciesOpen) { setGroupPoliciesOpen(false); return }
|
||||
if (groupPolicies.length === 0 && task.policyGroup?.id) {
|
||||
setGroupPoliciesLoading(true)
|
||||
try {
|
||||
const res = await fetch(`/api/policy-groups/${task.policyGroup.id}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setGroupPolicies(data.policies || [])
|
||||
}
|
||||
} catch {}
|
||||
finally { setGroupPoliciesLoading(false) }
|
||||
}
|
||||
setGroupPoliciesOpen(true)
|
||||
}
|
||||
|
||||
const dueMs = new Date(task.dueDate).getTime()
|
||||
const nowMs = now.getTime()
|
||||
const daysUntilDue = Math.ceil((dueMs - nowMs) / 86400000)
|
||||
const dueBg = isCompleted
|
||||
? 'bg-muted/50'
|
||||
: daysUntilDue < 0
|
||||
? 'bg-red-100 dark:bg-red-900'
|
||||
: daysUntilDue <= 7
|
||||
? 'bg-red-50 dark:bg-red-950'
|
||||
: daysUntilDue <= 14
|
||||
? 'bg-orange-50 dark:bg-orange-950'
|
||||
: 'bg-muted/40'
|
||||
|
||||
const levelLabel = task.policyGroup ? 'Group' : task.policy ? 'Policy' : 'Client'
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-lg border transition-shadow hover:shadow-md ${
|
||||
isCompleted
|
||||
? 'border-border/50 opacity-75'
|
||||
: isOverdue
|
||||
? 'border-red-500/40 bg-red-500/5 dark:bg-red-500/10'
|
||||
: 'border-border'
|
||||
}`}
|
||||
>
|
||||
<div className="flex">
|
||||
{/* Left: main content */}
|
||||
<div className="flex-1 min-w-0 px-4 py-3 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<PriorityDot priority={task.priority} />
|
||||
<h3 className={`font-semibold truncate ${isCompleted ? 'line-through text-muted-foreground' : ''}`}>
|
||||
{task.title}
|
||||
</h3>
|
||||
{task.isAdHoc && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/15 text-purple-700 dark:text-purple-400 font-medium shrink-0">Ad hoc</span>
|
||||
)}
|
||||
</div>
|
||||
{showClient && task.client && (
|
||||
<Link
|
||||
href={`/clients/${task.client.id}`}
|
||||
target="_blank"
|
||||
className="text-[13px] font-medium text-foreground hover:underline"
|
||||
>
|
||||
{task.client.name}
|
||||
</Link>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-0.5 text-[13px]">
|
||||
<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.policyGroup?.renewalDate ? formatDate(task.policyGroup.renewalDate) : task.policy?.expirationDate ? formatRenewalDate(task.policy.expirationDate) : '—'}</span></span>
|
||||
</div>
|
||||
{task.policyGroup && (
|
||||
<div className="relative" ref={groupPopoverRef}>
|
||||
<button
|
||||
onClick={handleGroupClick}
|
||||
className="flex items-center gap-1 text-[13px] font-medium text-foreground hover:underline"
|
||||
>
|
||||
<span className="text-muted-foreground">Group</span> {task.policyGroup.name || 'Unnamed Group'}
|
||||
<ChevronDown className={`h-3 w-3 text-muted-foreground transition-transform ${groupPoliciesOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{groupPoliciesOpen && (
|
||||
<div className="absolute z-50 left-0 top-full mt-1 w-80 rounded-md border bg-popover shadow-md text-xs">
|
||||
<div className="px-3 py-2 border-b font-semibold text-sm flex items-center justify-between">
|
||||
<span>Policies in group</span>
|
||||
<button onClick={() => setGroupPoliciesOpen(false)} className="text-muted-foreground hover:text-foreground"><X className="h-3.5 w-3.5" /></button>
|
||||
</div>
|
||||
{groupPoliciesLoading ? (
|
||||
<div className="px-3 py-3 text-muted-foreground">Loading...</div>
|
||||
) : groupPolicies.length === 0 ? (
|
||||
<div className="px-3 py-3 text-muted-foreground">No policies in this group.</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{groupPolicies.map((p: any) => (
|
||||
<div key={p.id} className="px-3 py-2 space-y-0.5">
|
||||
<div className="font-medium">{p.policyNumber || '—'} <span className="text-muted-foreground font-normal">· {p.policyType || '—'}</span></div>
|
||||
<div className="text-muted-foreground">
|
||||
{p.carrierName || 'Unknown carrier'}
|
||||
{p.expirationDate && <span suppressHydrationWarning> · Renews {formatRenewalDate(p.expirationDate)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{(task.policy?.carrierName || task.policy?.writingCompanyName) && (
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-0.5 text-[13px]">
|
||||
{task.policy?.carrierName && (
|
||||
<span><span className="text-muted-foreground">Carrier</span> <span className="text-foreground font-medium">{task.policy.carrierName}</span></span>
|
||||
)}
|
||||
{task.policy?.writingCompanyName && (
|
||||
<span><span className="text-muted-foreground">Writing Co</span> <span className="text-foreground font-medium">{task.policy.writingCompanyName}</span></span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{task.assignments.length > 0 && (
|
||||
<p className="text-[12px] text-muted-foreground">
|
||||
Assigned to {task.assignments.map((a) => a.user.displayName || a.user.email).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right sidebar: grid actions */}
|
||||
<div className="shrink-0 border-l border-border grid grid-cols-[auto_40px] text-xs">
|
||||
{/* Row 1: Due date | Complete */}
|
||||
<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>
|
||||
<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}>
|
||||
<SelectTrigger className="h-auto !border-0 p-0 !shadow-none !bg-transparent dark:!bg-transparent text-xs font-medium hover:underline focus:ring-0 focus-visible:ring-0 w-auto gap-1 rounded-none">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="NOT_STARTED">Not Started</SelectItem>
|
||||
<SelectItem value="IN_PROGRESS">In Progress</SelectItem>
|
||||
<SelectItem value="BLOCKED">Blocked</SelectItem>
|
||||
<SelectItem value="COMPLETED">Completed</SelectItem>
|
||||
<SelectItem value="NA">N/A</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' ? (
|
||||
<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" />
|
||||
)}
|
||||
{/* Row 3: Level | Edit */}
|
||||
<div className="px-3 py-1.5 border-b border-border flex items-center text-muted-foreground">
|
||||
{levelLabel}
|
||||
</div>
|
||||
<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 */}
|
||||
<button
|
||||
onClick={() => setNoteOpen((o) => !o)}
|
||||
className={`col-span-2 flex items-center justify-center gap-1.5 py-1.5 text-[11px] font-medium transition-colors ${
|
||||
noteOpen ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
{notes.length > 0 ? `Notes (${notes.length})` : 'Notes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Complete Dialog */}
|
||||
<Dialog open={completeDialogOpen} onOpenChange={setCompleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Complete Task</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">Did you file in ImageRight?</p>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant={imageRightFiled === true ? 'default' : 'outline'} onClick={() => setImageRightFiled(true)}>Yes</Button>
|
||||
<Button size="sm" variant={imageRightFiled === false ? 'default' : 'outline'} onClick={() => setImageRightFiled(false)}>No</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">Set a reminder? <span className="text-muted-foreground font-normal">(optional)</span></p>
|
||||
<Input type="date" value={reminderDate} onChange={(e) => setReminderDate(e.target.value)} min={new Date().toISOString().split('T')[0]} className="w-48" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setCompleteDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleConfirmComplete} disabled={imageRightFiled === null || completeSubmitting}>
|
||||
{completeSubmitting ? 'Saving...' : 'Mark Complete'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* N/A Dialog */}
|
||||
<Dialog open={naDialogOpen} onOpenChange={setNaDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Mark as N/A</DialogTitle></DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">Please provide a reason why this task is not applicable.</p>
|
||||
<Textarea value={naReason} onChange={(e) => setNaReason(e.target.value)} placeholder="Enter reason (required)..." rows={3} className="mt-2" />
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => { setNaDialogOpen(false); setNaReason('') }}>Cancel</Button>
|
||||
<Button onClick={handleMarkNA} disabled={!naReason.trim() || naSubmitting}>
|
||||
{naSubmitting ? 'Saving...' : 'Confirm N/A'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Edit modal */}
|
||||
<TaskEditModal
|
||||
open={editOpen}
|
||||
onOpenChange={setEditOpen}
|
||||
task={task as unknown as EditableTask}
|
||||
onUpdated={(updated) => update(updated as Partial<TaskCardTask>)}
|
||||
/>
|
||||
|
||||
{/* Notes panel */}
|
||||
{noteOpen && (
|
||||
<div className="mx-4 mb-3 pt-3 border-t border-border space-y-3">
|
||||
{notes.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{notes.map((n) => (
|
||||
<div key={n.id} className="rounded-md bg-muted/40 px-3 py-2 text-sm">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="font-medium text-xs">{n.user.displayName || n.user.email}</span>
|
||||
<span className="text-xs text-muted-foreground" suppressHydrationWarning>{new Date(n.createdAt).toLocaleString()}</span>
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap text-foreground/90">{n.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm italic text-muted-foreground">No notes yet</p>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Textarea value={newNote} onChange={(e) => setNewNote(e.target.value)} placeholder="Add a note..." rows={2} className="text-sm" />
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Select value={noteStatus} onValueChange={setNoteStatus}>
|
||||
<SelectTrigger className="w-[160px] h-8 text-sm"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="NOT_STARTED">Not Started</SelectItem>
|
||||
<SelectItem value="COMPLETED">Completed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button size="sm" onClick={handleAddNote} disabled={saving || !newNote.trim()}>
|
||||
{saving ? 'Adding...' : 'Add Note'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue