The action item checklist splits tasks into yours and mine so neither side loses track

The ActionItemChecklist component receives an array of action items, a toggleAction server action, and a canToggle boolean. The first thing it does is filter the array into two groups using the assignedTo field — items where assignedTo is client go into myItems, items where assignedTo is james go into jamesItems. The component renders two labelled sections. The client section heading reads Your action items. The James section heading reads James's action items in muted text. The visual hierarchy tells the client which tasks are theirs before they read a single title. Each action item renders as its own form. A hidden input carries the actionItemId. The checkbox is a button styled as a square with a two-pixel border. When the item is completed, the border turns emerald and the background fills emerald with a white checkmark SVG inside. When it is incomplete, the border matches the glass border colour and the interior is empty. The button has an aria-label built from the completion state and the item title — Mark or Unmark followed by the title in quotes followed by as done. The submit is handled by useActionState so the form posts without a page navigation and the pending state disables the button during the round trip. The canToggle prop controls who can check what. Client items pass canToggle from the parent. James items always pass false. The client can tick off their own tasks. They can see James's tasks but they cannot toggle them. The cursor changes from pointer to default when toggling is disabled. The line-through class and fifty percent opacity apply to completed items regardless of who completed them. Both sides see the same state. One component, two filter calls, two sections, two permission levels, and the project checklist becomes a shared workspace where both parties track their responsibilities without stepping on each other.