import { DndContext, DragEndEvent, PointerSensor, useDraggable, useDroppable, useSensor, useSensors } from '@dnd-kit/core'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { FormEvent, useState } from 'react'; import { Button, Field, Modal, PageHeader, PriorityBadge, Textarea } from '@/Components/ui'; import { PendingNotes, SendNote, type TaskNoteItem } from '@/Components/TaskNotes'; import AppLayout from '@/Layouts/AppLayout'; import { formatDate, visitFilters } from '@/lib/utils'; import { tone, type ContentSummary, type SharedProps } from '@/types'; export default function Board({ cards, filters, truncated, notes: pendingNotes, recipients }: { cards: ContentSummary[]; filters: Record; selected: unknown; truncated: boolean; notes: TaskNoteItem[]; recipients: { id: number; name: string }[] }) { const lookups = usePage().props.lookups; const permissions = usePage().props.auth.user?.permissions ?? []; const [error, setError] = useState(''); const [pending, setPending] = useState<{ id: number; status: string } | null>(null); const [notes, setNotes] = useState(''); const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } })); const statuses = lookups?.statuses ?? []; const noteQuery = (filters.q ?? '').trim().toLowerCase(); const noteCards = pendingNotes.filter((note) => noteQuery === '' || note.body.toLowerCase().includes(noteQuery) || (note.sender?.name ?? '').toLowerCase().includes(noteQuery)); const [openNote, setOpenNote] = useState(null); function move(id: number, status: string, revisionNotes?: string) { router.post(`/content/${id}/transition`, { status, notes: revisionNotes }, { preserveScroll: true, onError: (errors) => setError(errors.status || errors.notes || 'That move is not allowed.'), onSuccess: () => setError(''), }); } function onDragEnd(event: DragEndEvent) { const id = Number(String(event.active.id).replace('card-', '')); const status = String(event.over?.id ?? ''); const card = cards.find((item) => item.id === id); if (!status || !card || card.status?.slug === status) return; if (status === 'revision_required') { setPending({ id, status }); return; } move(id, status); } return ( {error &&

{error}

} {truncated &&

Showing the 200 most recently updated items. Filter to narrow the board.

}

) => { event.preventDefault(); visitFilters('/board', Object.fromEntries(new FormData(event.currentTarget).entries()) as Record); }}> Overdue

Pending notes

Pending notes also sit in the New Idea column until you mark them done.

{statuses.map((status) => ( card.status?.slug === status.slug)} notes={status.slug === 'inbox' ? noteCards : []} canDrag={permissions.includes('content.transition')} onOpenNote={setOpenNote} /> ))}

{ if (!open) setOpenNote(null); }}> {openNote && ( <>

From {openNote.sender?.name ?? 'Someone'} · {formatDate(openNote.created_at)}

{openNote.body}

{openNote.can_complete && ( )}

)} { if (!open) setPending(null); }}>

setNotes(event.target.value)} />
                </Field>
                <div className="mt-4 flex justify-end gap-2">
                    <Button variant="secondary" onClick={() => setPending(null)}>Cancel</Button>
                    <Button onClick={() => { if (pending && notes.trim()) { move(pending.id, pending.status, notes.trim()); setPending(null); setNotes(''); } }}>Request revisions</Button>
                </div>
            </Modal>
        </AppLayout>
    );
}

function NoteCard({ note, onOpen }: { note: TaskNoteItem; onOpen: (note: TaskNoteItem) => void }) {
    return (
        <article className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm shadow-sm">
            <button type="button" className="w-full text-left" onClick={() => onOpen(note)}>
                <p className="line-clamp-3 font-medium text-zinc-900">{note.body}</p>
                <p className="mt-2 text-xs text-zinc-600">Note · From {note.sender?.name ?? 'Someone'} · {formatDate(note.created_at)}</p>
            </button>
            {note.can_complete && (
                <Button type="button" variant="secondary" size="sm" className="mt-2" onClick={() => router.post(`/task-notes/${note.id}/complete`, {}, { preserveScroll: true })}>Done</Button>
            )}
        </article>
    );
}