AI Newsletter Digest improvements: fixed QP soft line break decoding, URL extraction, and content cleaning

nextstep-features/care-coordination/api/care-tasks/[taskId]/complete/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db/prisma'
+import { getCurrentUser } from '@/lib/auth'
+import { canAccessWorkspace } from '@/lib/db/workspace-access'
+
+// POST /api/workspaces/[id]/care-tasks/[taskId]/complete
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string; taskId: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id: workspaceId, taskId } = params
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access || access.role === 'VIEWER') {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const task = await prisma.careTask.update({
+      where: { id: taskId },
+      data: {
+        completedAt: new Date(),
+        completedById: user.id
+      },
+      include: {
+        completedBy: { select: { id: true, name: true } }
+      }
+    })
+
+    // Log audit
+    await prisma.auditLog.create({
+      data: {
+        workspaceId,
+        userId: user.id,
+        action: 'COMPLETE_TASK',
+        entityType: 'CARE_TASK',
+        entityId: task.id,
+        details: { title: task.title }
+      }
+    })
+
+    return NextResponse.json({ task })
+  } catch (error) {
+    console.error('Failed to complete task:', error)
+    return NextResponse.json(
+      { error: 'Failed to complete task' },
+      { status: 500 }
+    )
+  }
+}

nextstep-features/care-coordination/api/care-tasks/route.ts

@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db/prisma'
+import { getCurrentUser } from '@/lib/auth'
+import { canAccessWorkspace } from '@/lib/db/workspace-access'
+
+// GET /api/workspaces/[id]/care-tasks
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const workspaceId = params.id
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const tasks = await prisma.careTask.findMany({
+      where: { workspaceId },
+      orderBy: [
+        { completedAt: 'asc' },
+        { priority: 'desc' },
+        { createdAt: 'desc' }
+      ],
+      include: {
+        assignedTo: { select: { id: true, name: true } },
+        completedBy: { select: { id: true, name: true } },
+        createdBy: { select: { id: true, name: true } }
+      }
+    })
+
+    return NextResponse.json({ tasks })
+  } catch (error) {
+    console.error('Failed to fetch care tasks:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch care tasks' },
+      { status: 500 }
+    )
+  }
+}
+
+// POST /api/workspaces/[id]/care-tasks
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const workspaceId = params.id
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access || access.role === 'VIEWER') {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const body = await request.json()
+    const { title, description, priority, category, dueAt, assignedToId } = body
+
+    const task = await prisma.careTask.create({
+      data: {
+        workspaceId,
+        title,
+        description,
+        priority: priority || 'MEDIUM',
+        category: category || 'GENERAL',
+        dueAt: dueAt ? new Date(dueAt) : null,
+        assignedToId: assignedToId || null,
+        createdById: user.id,
+      },
+      include: {
+        assignedTo: { select: { id: true, name: true } },
+        createdBy: { select: { id: true, name: true } }
+      }
+    })
+
+    // Log audit
+    await prisma.auditLog.create({
+      data: {
+        workspaceId,
+        userId: user.id,
+        action: 'CREATE',
+        entityType: 'CARE_TASK',
+        entityId: task.id,
+        details: { title, priority, category }
+      }
+    })
+
+    return NextResponse.json({ task })
+  } catch (error) {
+    console.error('Failed to create care task:', error)
+    return NextResponse.json(
+      { error: 'Failed to create care task' },
+      { status: 500 }
+    )
+  }
+}

nextstep-features/care-coordination/api/handoff-notes/[noteId]/acknowledge/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db/prisma'
+import { getCurrentUser } from '@/lib/auth'
+import { canAccessWorkspace } from '@/lib/db/workspace-access'
+
+// POST /api/workspaces/[id]/handoff-notes/[noteId]/acknowledge
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string; noteId: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { id: workspaceId, noteId } = params
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Get current note
+    const note = await prisma.handoffNote.findUnique({
+      where: { id: noteId }
+    })
+
+    if (!note) {
+      return NextResponse.json({ error: 'Note not found' }, { status: 404 })
+    }
+
+    // Add user to acknowledged list if not already there
+    const acknowledgedBy = note.acknowledgedBy || []
+    if (!acknowledgedBy.includes(user.id)) {
+      acknowledgedBy.push(user.id)
+      
+      await prisma.handoffNote.update({
+        where: { id: noteId },
+        data: { acknowledgedBy }
+      })
+    }
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Failed to acknowledge note:', error)
+    return NextResponse.json(
+      { error: 'Failed to acknowledge note' },
+      { status: 500 }
+    )
+  }
+}

nextstep-features/care-coordination/api/handoff-notes/route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/db/prisma'
+import { getCurrentUser } from '@/lib/auth'
+import { canAccessWorkspace } from '@/lib/db/workspace-access'
+
+// GET /api/workspaces/[id]/handoff-notes
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const workspaceId = params.id
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    // Get notes that haven't expired
+    const notes = await prisma.handoffNote.findMany({
+      where: {
+        workspaceId,
+        expiresAt: { gte: new Date() }
+      },
+      orderBy: { createdAt: 'desc' },
+      include: {
+        createdBy: { select: { id: true, name: true } }
+      }
+    })
+
+    return NextResponse.json({ notes })
+  } catch (error) {
+    console.error('Failed to fetch handoff notes:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch handoff notes' },
+      { status: 500 }
+    )
+  }
+}
+
+// POST /api/workspaces/[id]/handoff-notes
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const workspaceId = params.id
+    const access = await canAccessWorkspace(user.id, workspaceId)
+    if (!access || access.role === 'VIEWER') {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const body = await request.json()
+    const { content, category, priority, expiresAt } = body
+
+    const note = await prisma.handoffNote.create({
+      data: {
+        workspaceId,
+        content,
+        category: category || 'GENERAL',
+        priority: priority || 'NORMAL',
+        expiresAt: new Date(expiresAt),
+        createdById: user.id,
+        acknowledgedBy: []
+      },
+      include: {
+        createdBy: { select: { id: true, name: true } }
+      }
+    })
+
+    // Log audit
+    await prisma.auditLog.create({
+      data: {
+        workspaceId,
+        userId: user.id,
+        action: 'CREATE',
+        entityType: 'HANDOFF_NOTE',
+        entityId: note.id,
+        details: { category, priority }
+      }
+    })
+
+    return NextResponse.json({ note })
+  } catch (error) {
+    console.error('Failed to create handoff note:', error)
+    return NextResponse.json(
+      { error: 'Failed to create handoff note' },
+      { status: 500 }
+    )
+  }
+}

nextstep-features/care-coordination/app/new-note/page.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { ChevronLeft, MessageSquare, AlertCircle, Users } from 'lucide-react'
+import { addHours } from 'date-fns'
+
+import { Card, Button, showToast } from '@/components/ui'
+import { Header, PageContainer } from '@/components/layout/header'
+import { useApp } from '../../provider'
+
+const CATEGORIES = [
+  { value: 'GENERAL', label: 'General Update', emoji: '📝', color: 'bg-blue-100 border-blue-200' },
+  { value: 'SYMPTOM', label: 'Symptom Observation', emoji: '😷', color: 'bg-red-50 border-red-200' },
+  { value: 'MEDICATION', label: 'Medication Note', emoji: '💊', color: 'bg-green-50 border-green-200' },
+  { value: 'MOOD', label: 'Mood/Energy', emoji: '💭', color: 'bg-purple-50 border-purple-200' },
+]
+
+const PRIORITIES = [
+  { value: 'LOW', label: 'FYI Only' },
+  { value: 'NORMAL', label: 'Normal' },
+  { value: 'HIGH', label: 'Important - Please Read', color: 'text-red-600' },
+]
+
+export default function NewHandoffNotePage() {
+  const router = useRouter()
+  const { currentWorkspace } = useApp()
+  const [content, setContent] = useState('')
+  const [category, setCategory] = useState('GENERAL')
+  const [priority, setPriority] = useState('NORMAL')
+  const [expiresIn, setExpiresIn] = useState('12')
+  const [saving, setSaving] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!content.trim()) {
+      showToast('Please write a note', 'error')
+      return
+    }
+
+    setSaving(true)
+    try {
+      const expiresAt = addHours(new Date(), parseInt(expiresIn))
+      
+      const response = await fetch(`/api/workspaces/${currentWorkspace.id}/handoff-notes`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: content.trim(),
+          category,
+          priority,
+          expiresAt: expiresAt.toISOString(),
+        }),
+      })
+
+      if (!response.ok) throw new Error('Failed to create note')
+
+      showToast('Handoff note added!', 'success')
+      router.push('/care')
+    } catch {
+      showToast('Failed to add note', 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <>
+      <Header 
+        title="Handoff Note"
+        leftAction={{
+          icon: <ChevronLeft className="w-6 h-6" />,
+          label: 'Back',
+          onClick: () => router.push('/care')
+        }}
+      />
+      <PageContainer className="pt-4">
+        {/* Info Card */}
+        <Card className="bg-amber-50 border-amber-200 mb-4">
+          <div className="flex items-start gap-3">
+            <Users className="w-5 h-5 text-amber-600 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-amber-900">What are handoff notes?</h3>
+              <p className="text-sm text-amber-700 mt-1">
+                Use these to communicate with other caregivers. They expire after a set time and can be marked as read.
+              </p>
+            </div>
+          </div>
+        </Card>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Category */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              What type of note?
+            </label>
+            <div className="space-y-2">
+              {CATEGORIES.map((cat) => (
+                <button
+                  key={cat.value}
+                  type="button"
+                  onClick={() => setCategory(cat.value)}
+                  className={`w-full p-3 rounded-lg border-2 text-left transition-all flex items-center gap-3 ${
+                    category === cat.value
+                      ? cat.color + ' border-current'
+                      : 'border-border hover:border-secondary-300'
+                  }`}
+                >
+                  <span className="text-2xl">{cat.emoji}</span>
+                  <span className="font-medium text-secondary-900">{cat.label}</span>
+                </button>
+              ))}
+            </div>
+          </Card>
+
+          {/* Priority */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <AlertCircle className="w-4 h-4 inline mr-1" />
+              Priority
+            </label>
+            <select
+              value={priority}
+              onChange={(e) => setPriority(e.target.value)}
+              className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-500"
+            >
+              {PRIORITIES.map((p) => (
+                <option key={p.value} value={p.value} className={p.color}>
+                  {p.label}
+                </option>
+              ))}
+            </select>
+          </Card>
+
+          {/* Content */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <MessageSquare className="w-4 h-4 inline mr-1" />
+              Your Note
+            </label>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="What should other caregivers know? For example:\n• Patient seemed more tired than usual today\n• New medication started, watching for side effects\n• Appointment went well, next one scheduled for..."
+              rows={5}
+              className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-500 resize-none"
+              required
+            />
+          </Card>
+
+          {/* Expires In */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              Note expires in
+            </label>
+            <div className="flex gap-2">
+              {['4', '12', '24', '48'].map((hours) => (
+                <button
+                  key={hours}
+                  type="button"
+                  onClick={() => setExpiresIn(hours)}
+                  className={`flex-1 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
+                    expiresIn === hours
+                      ? 'border-primary-500 bg-primary-50 text-primary-700'
+                      : 'border-border hover:border-secondary-300 text-secondary-600'
+                  }`}
+                >
+                  {hours}h
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-secondary-500 mt-2">
+              Notes expire automatically to keep information fresh
+            </p>
+          </Card>
+
+          {/* Submit */}
+          <div className="flex gap-3">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => router.push('/care')}
+              fullWidth
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              loading={saving}
+              fullWidth
+            >
+              Add Note
+            </Button>
+          </div>
+        </form>
+      </PageContainer>
+    </>
+  )
+}

nextstep-features/care-coordination/app/new-task/page.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { ChevronLeft, ClipboardList, Clock, User, AlertCircle } from 'lucide-react'
+
+import { Card, Button, showToast } from '@/components/ui'
+import { Header, PageContainer } from '@/components/layout/header'
+import { useApp } from '../../provider'
+
+const PRIORITIES = [
+  { value: 'LOW', label: 'Low', color: 'bg-blue-100 text-blue-700' },
+  { value: 'MEDIUM', label: 'Medium', color: 'bg-yellow-100 text-yellow-700' },
+  { value: 'HIGH', label: 'High', color: 'bg-orange-100 text-orange-700' },
+  { value: 'URGENT', label: 'Urgent', color: 'bg-red-100 text-red-700' },
+]
+
+const CATEGORIES = [
+  { value: 'GENERAL', label: 'General', emoji: '📝' },
+  { value: 'MEDICATION', label: 'Medication', emoji: '💊' },
+  { value: 'APPOINTMENT', label: 'Appointment', emoji: '📅' },
+  { value: 'SYMPTOM', label: 'Symptom', emoji: '😷' },
+]
+
+export default function NewCareTaskPage() {
+  const router = useRouter()
+  const { currentWorkspace } = useApp()
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [priority, setPriority] = useState('MEDIUM')
+  const [category, setCategory] = useState('GENERAL')
+  const [dueDate, setDueDate] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!title.trim()) {
+      showToast('Please enter a task title', 'error')
+      return
+    }
+
+    setSaving(true)
+    try {
+      const response = await fetch(`/api/workspaces/${currentWorkspace.id}/care-tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || null,
+          priority,
+          category,
+          dueAt: dueDate ? new Date(dueDate).toISOString() : null,
+        }),
+      })
+
+      if (!response.ok) throw new Error('Failed to create task')
+
+      showToast('Task created!', 'success')
+      router.push('/care')
+    } catch {
+      showToast('Failed to create task', 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <>
+      <Header 
+        title="New Care Task"
+        leftAction={{
+          icon: <ChevronLeft className="w-6 h-6" />,
+          label: 'Back',
+          onClick: () => router.push('/care')
+        }}
+      />
+      <PageContainer className="pt-4">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Title */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <ClipboardList className="w-4 h-4 inline mr-1" />
+              Task Title
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g., Pick up prescription"
+              className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-500"
+              required
+            />
+          </Card>
+
+          {/* Category */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              Category
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {CATEGORIES.map((cat) => (
+                <button
+                  key={cat.value}
+                  type="button"
+                  onClick={() => setCategory(cat.value)}
+                  className={`p-3 rounded-lg border-2 text-left transition-all ${
+                    category === cat.value
+                      ? 'border-primary-500 bg-primary-50'
+                      : 'border-border hover:border-secondary-300'
+                  }`}
+                >
+                  <span className="text-xl mr-2">{cat.emoji}</span>
+                  <span className="font-medium text-secondary-900">{cat.label}</span>
+                </button>
+              ))}
+            </div>
+          </Card>
+
+          {/* Priority */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <AlertCircle className="w-4 h-4 inline mr-1" />
+              Priority
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {PRIORITIES.map((p) => (
+                <button
+                  key={p.value}
+                  type="button"
+                  onClick={() => setPriority(p.value)}
+                  className={`px-4 py-2 rounded-full font-medium transition-all ${
+                    priority === p.value
+                      ? p.color + ' ring-2 ring-offset-2 ring-secondary-300'
+                      : 'bg-secondary-100 text-secondary-600 hover:bg-secondary-200'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+          </Card>
+
+          {/* Due Date */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <Clock className="w-4 h-4 inline mr-1" />
+              Due Date (optional)
+            </label>
+            <input
+              type="datetime-local"
+              value={dueDate}
+              onChange={(e) => setDueDate(e.target.value)}
+              className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-500"
+            />
+          </Card>
+
+          {/* Description */}
+          <Card>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              Description (optional)
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Any additional details..."
+              rows={3}
+              className="w-full px-3 py-2 border border-border rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-500 resize-none"
+            />
+          </Card>
+
+          {/* Submit */}
+          <div className="flex gap-3">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => router.push('/care')}
+              fullWidth
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              loading={saving}
+              fullWidth
+            >
+              Create Task
+            </Button>
+          </div>
+        </form>
+      </PageContainer>
+    </>
+  )
+}

nextstep-features/care-coordination/app/page.tsx

@@ -0,0 +1,421 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { 
+  ClipboardList, Plus, CheckCircle2, Circle, 
+  Users, Clock, AlertCircle, ChevronRight 
+} from 'lucide-react'
+
+import { Card, Button, showToast } from '@/components/ui'
+import { Header, PageContainer } from '@/components/layout/header'
+import { useApp } from '../provider'
+
+interface CareTask {
+  id: string
+  title: string
+  description?: string
+  assignedTo?: { id: string; name: string }
+  dueAt?: string
+  completedAt?: string
+  completedBy?: { id: string; name: string }
+  priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'
+  category: 'MEDICATION' | 'APPOINTMENT' | 'SYMPTOM' | 'GENERAL'
+  createdAt: string
+  createdBy: { id: string; name: string }
+}
+
+interface HandoffNote {
+  id: string
+  content: string
+  category: 'GENERAL' | 'SYMPTOM' | 'MEDICATION' | 'MOOD'
+  priority: 'LOW' | 'NORMAL' | 'HIGH'
+  createdAt: string
+  createdBy: { id: string; name: string }
+  expiresAt: string
+  acknowledgedBy: string[]
+}
+
+const PRIORITY_COLORS = {
+  LOW: 'bg-blue-100 text-blue-700',
+  MEDIUM: 'bg-yellow-100 text-yellow-700',
+  HIGH: 'bg-orange-100 text-orange-700',
+  URGENT: 'bg-red-100 text-red-700',
+}
+
+const CATEGORY_ICONS = {
+  MEDICATION: '💊',
+  APPOINTMENT: '📅',
+  SYMPTOM: '😷',
+  GENERAL: '📝',
+}
+
+export default function CareCoordinationPage() {
+  const router = useRouter()
+  const { currentWorkspace } = useApp()
+  const [tasks, setTasks] = useState<CareTask[]>([])
+  const [handoffNotes, setHandoffNotes] = useState<HandoffNote[]>([])
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState<'tasks' | 'notes'>('tasks')
+
+  const fetchData = useCallback(async () => {
+    try {
+      const [tasksRes, notesRes] = await Promise.all([
+        fetch(`/api/workspaces/${currentWorkspace.id}/care-tasks`),
+        fetch(`/api/workspaces/${currentWorkspace.id}/handoff-notes`)
+      ])
+
+      if (tasksRes.ok) {
+        const tasksData = await tasksRes.json()
+        setTasks(tasksData.tasks)
+      }
+      if (notesRes.ok) {
+        const notesData = await notesRes.json()
+        setHandoffNotes(notesData.notes)
+      }
+    } catch (err) {
+      console.error('Failed to fetch care data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [currentWorkspace.id])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const handleCompleteTask = async (taskId: string) => {
+    try {
+      const response = await fetch(
+        `/api/workspaces/${currentWorkspace.id}/care-tasks/${taskId}/complete`,
+        { method: 'POST' }
+      )
+      if (!response.ok) throw new Error('Failed to complete task')
+      
+      showToast('Task completed!', 'success')
+      fetchData()
+    } catch {
+      showToast('Failed to complete task', 'error')
+    }
+  }
+
+  const handleAcknowledgeNote = async (noteId: string) => {
+    try {
+      await fetch(
+        `/api/workspaces/${currentWorkspace.id}/handoff-notes/${noteId}/acknowledge`,
+        { method: 'POST' }
+      )
+      fetchData()
+    } catch {
+      console.error('Failed to acknowledge note')
+    }
+  }
+
+  // Separate active and completed tasks
+  const activeTasks = tasks.filter(t => !t.completedAt)
+  const completedTasks = tasks.filter(t => t.completedAt).slice(0, 5)
+
+  // Filter unacknowledged notes
+  const unacknowledgedNotes = handoffNotes.filter(
+    n => !n.acknowledgedBy.includes(currentWorkspace.userId || '')
+  )
+
+  if (loading) {
+    return (
+      <>
+        <Header title="Care Coordination" />
+        <PageContainer>
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full" />
+          </div>
+        </PageContainer>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Header 
+        title="Care Coordination"
+        rightAction={{
+          icon: <Plus className="w-6 h-6 text-secondary-700" />,
+          label: 'Add',
+          onClick: () => router.push('/care/new-task')
+        }}
+      />
+      <PageContainer className="pt-4 space-y-6">
+        {/* Tab Switcher */}
+        <div className="flex bg-secondary-100 rounded-lg p-1">
+          <button
+            onClick={() => setActiveTab('tasks')}
+            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
+              activeTab === 'tasks'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            <ClipboardList className="w-4 h-4" />
+            Tasks ({activeTasks.length})
+          </button>
+          <button
+            onClick={() => setActiveTab('notes')}
+            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md text-sm font-medium transition-all ${
+              activeTab === 'notes'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            <Users className="w-4 h-4" />
+            Handoff
+            {unacknowledgedNotes.length > 0 && (
+              <span className="w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
+                {unacknowledgedNotes.length}
+              </span>
+            )}
+          </button>
+        </div>
+
+        {/* Tasks View */}
+        {activeTab === 'tasks' && (
+          <>
+            {/* Active Tasks */}
+            <section>
+              <h2 className="text-lg font-semibold text-secondary-900 mb-3">
+                Active Tasks
+              </h2>
+              {activeTasks.length === 0 ? (
+                <Card variant="outline" className="text-center py-8">
+                  <ClipboardList className="w-12 h-12 text-secondary-300 mx-auto mb-3" />
+                  <p className="text-secondary-500">No active tasks</p>
+                  <p className="text-sm text-secondary-400 mt-1">
+                    Add tasks to coordinate care
+                  </p>
+                  {currentWorkspace.role !== 'VIEWER' && (
+                    <Button 
+                      href="/care/new-task" 
+                      variant="secondary"
+                      className="mt-4"
+                    >
+                      <Plus className="w-4 h-4 mr-1" />
+                      Add Task
+                    </Button>
+                  )}
+                </Card>
+              ) : (
+                <div className="space-y-3">
+                  {activeTasks.map(task => (
+                    <TaskCard
+                      key={task.id}
+                      task={task}
+                      onComplete={() => handleCompleteTask(task.id)}
+                      canComplete={currentWorkspace.role !== 'VIEWER'}
+                    />
+                  ))}
+                </div>
+              )}
+            </section>
+
+            {/* Recently Completed */}
+            {completedTasks.length > 0 && (
+              <section>
+                <h2 className="text-lg font-semibold text-secondary-900 mb-3">
+                  Recently Completed
+                </h2>
+                <div className="space-y-2">
+                  {completedTasks.map(task => (
+                    <div 
+                      key={task.id}
+                      className="p-3 bg-secondary-50 rounded-lg opacity-60"
+                    >
+                      <div className="flex items-center gap-3">
+                        <CheckCircle2 className="w-5 h-5 text-green-500" />
+                        <span className="flex-1 line-through text-secondary-500">
+                          {task.title}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
+          </>
+        )}
+
+        {/* Handoff Notes View */}
+        {activeTab === 'notes' && (
+          <>
+            {/* Quick Add Note */}
+            {currentWorkspace.role !== 'VIEWER' && (
+              <Card className="bg-amber-50 border-amber-200">
+                <h3 className="font-medium text-amber-900 mb-2">Quick Handoff Note</h3>
+                <p className="text-sm text-amber-700 mb-3">
+                  Leave a note for other caregivers about symptoms, observations, or important updates.
+                </p>
+                <Button 
+                  href="/care/new-note"
+                  variant="secondary"
+                  fullWidth
+                >
+                  Write Note
+                </Button>
+              </Card>
+            )}
+
+            {/* Unacknowledged Notes */}
+            {unacknowledgedNotes.length > 0 && (
+              <section>
+                <h2 className="text-lg font-semibold text-secondary-900 mb-3 flex items-center">
+                  <AlertCircle className="w-5 h-5 mr-2 text-amber-500" />
+                  New for You
+                </h2>
+                <div className="space-y-3">
+                  {unacknowledgedNotes.map(note => (
+                    <HandoffNoteCard
+                      key={note.id}
+                      note={note}
+                      isNew={true}
+                      onAcknowledge={() => handleAcknowledgeNote(note.id)}
+                    />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            {/* All Notes */}
+            <section>
+              <h2 className="text-lg font-semibold text-secondary-900 mb-3">
+                Recent Notes
+              </h2>
+              {handoffNotes.length === 0 ? (
+                <Card variant="outline" className="text-center py-8">
+                  <Users className="w-12 h-12 text-secondary-300 mx-auto mb-3" />
+                  <p className="text-secondary-500">No handoff notes</p>
+                  <p className="text-sm text-secondary-400 mt-1">
+                    Notes help coordinate care between family members
+                  </p>
+                </Card>
+              ) : (
+                <div className="space-y-3">
+                  {handoffNotes.slice(0, 10).map(note => (
+                    <HandoffNoteCard
+                      key={note.id}
+                      note={note}
+                      isNew={false}
+                    />
+                  ))}
+                </div>
+              )}
+            </section>
+          </>
+        )}
+      </PageContainer>
+    </>
+  )
+}
+
+interface TaskCardProps {
+  task: CareTask
+  onComplete: () => void
+  canComplete: boolean
+}
+
+function TaskCard({ task, onComplete, canComplete }: TaskCardProps) {
+  const isOverdue = task.dueAt && new Date(task.dueAt) < new Date() && !task.completedAt
+
+  return (
+    <Card className={isOverdue ? 'border-red-300' : ''}>
+      <div className="flex items-start gap-3">
+        {canComplete ? (
+          <button
+            onClick={onComplete}
+            className="mt-0.5 w-6 h-6 rounded-full border-2 border-primary-500 flex items-center justify-center hover:bg-primary-50"
+          >
+            <Circle className="w-4 h-4 text-primary-500" />
+          </button>
+        ) : (
+          <Circle className="w-6 h-6 text-secondary-300 mt-0.5" />
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-lg">{CATEGORY_ICONS[task.category]}</span>
+            <h3 className={`font-medium ${task.completedAt ? 'line-through text-secondary-500' : 'text-secondary-900'}`}>
+              {task.title}
+            </h3>
+            <span className={`text-xs px-2 py-0.5 rounded-full ${PRIORITY_COLORS[task.priority]}`}>
+              {task.priority}
+            </span>
+          </div>
+          {task.description && (
+            <p className="text-sm text-secondary-600 mt-1">{task.description}</p>
+          )}
+          <div className="flex items-center gap-4 mt-2 text-xs text-secondary-500">
+            {task.assignedTo && (
+              <span className="flex items-center gap-1">
+                <Users className="w-3 h-3" />
+                {task.assignedTo.name}
+              </span>
+            )}
+            {task.dueAt && (
+              <span className={`flex items-center gap-1 ${isOverdue ? 'text-red-600 font-medium' : ''}`}>
+                <Clock className="w-3 h-3" />
+                {isOverdue ? 'Overdue: ' : 'Due: '}
+                {new Date(task.dueAt).toLocaleDateString()}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+interface HandoffNoteCardProps {
+  note: HandoffNote
+  isNew: boolean
+  onAcknowledge?: () => void
+}
+
+function HandoffNoteCard({ note, isNew, onAcknowledge }: HandoffNoteCardProps) {
+  const CATEGORY_COLORS = {
+    GENERAL: 'bg-blue-50 border-blue-200',
+    SYMPTOM: 'bg-red-50 border-red-200',
+    MEDICATION: 'bg-green-50 border-green-200',
+    MOOD: 'bg-purple-50 border-purple-200',
+  }
+
+  const PRIORITY_BADGES = {
+    LOW: '',
+    NORMAL: '',
+    HIGH: '🔴 High Priority',
+  }
+
+  return (
+    <Card className={`${CATEGORY_COLORS[note.category]} ${isNew ? 'ring-2 ring-amber-400' : ''}`}>
+      <div className="flex items-start gap-3">
+        <div className="flex-1">
+          {note.priority === 'HIGH' && (
+            <span className="text-xs font-medium text-red-600 mb-1 block">
+              {PRIORITY_BADGES[note.priority]}
+            </span>
+          )}
+          <p className="text-secondary-900 whitespace-pre-wrap">{note.content}</p>
+          <div className="flex items-center justify-between mt-3">
+            <span className="text-xs text-secondary-500">
+              {note.createdBy.name} • {new Date(note.createdAt).toLocaleDateString()}
+            </span>
+            {isNew && onAcknowledge && (
+              <Button 
+                size="sm" 
+                variant="secondary"
+                onClick={onAcknowledge}
+              >
+                <CheckCircle2 className="w-4 h-4 mr-1" />
+                Got it
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}