add tasks button to patient details page

Author: felixevers

web/components/patients/PatientDetailView.tsx

@@ -30,7 +30,7 @@ import {
 } from '@helpwave/hightide'
 import { useTasksContext } from '@/hooks/useTasksContext'
 import { DateInput } from '@/components/ui/DateInput'
-import { CheckCircle2, ChevronDown, Circle, Clock, MapPin, XIcon } from 'lucide-react'
+import { CheckCircle2, ChevronDown, Circle, Clock, MapPin, PlusIcon, XIcon } from 'lucide-react'
 import { PatientStateChip } from '@/components/patients/PatientStateChip'
 import { PropertyList } from '@/components/PropertyList'
 import { LocationSelectionDialog } from '@/components/locations/LocationSelectionDialog'
@@ -139,6 +139,7 @@ export const PatientDetailView = ({
   const translation = useTasksTranslation()
   const { selectedLocationId } = useTasksContext()
   const [taskId, setTaskId] = useState<string | null>(null)
+  const [isCreatingTask, setIsCreatingTask] = useState(false)
   const isEditMode = !!patientId
 
   const { data: patientData, isLoading: isLoadingPatient, refetch } = useGetPatientQuery(
@@ -314,6 +315,17 @@ export const PatientDetailView = ({
         <TabView className="h-full flex-col-0">
           <Tab label={translation('tasks')} className="h-full overflow-y-auto pr-2">
             <div className="flex flex-col gap-4 pt-4">
+              {isEditMode && (
+                <div className="mb-2">
+                  <Button
+                    startIcon={<PlusIcon/>}
+                    onClick={() => setIsCreatingTask(true)}
+                    className="w-full"
+                  >
+                    {translation('addTask')}
+                  </Button>
+                </div>
+              )}
               <div>
                 <button
                   onClick={() => setOpenExpanded(!openExpanded)}
@@ -572,18 +584,24 @@ export const PatientDetailView = ({
         multiSelect={true}
       />
       <SidePanel
-        isOpen={!!taskId}
+        isOpen={!!taskId || isCreatingTask}
         onClose={() => {
           setTaskId(null)
+          setIsCreatingTask(false)
         }}
-        title={translation('editTask')}
+        title={taskId ? translation('editTask') : translation('createTask')}
       >
         <TaskDetailView
           taskId={taskId}
+          initialPatientId={isCreatingTask ? patientId : undefined}
           onSuccess={() => {
             refetch().catch(console.error)
+            setIsCreatingTask(false)
+          }}
+          onClose={() => {
+            setTaskId(null)
+            setIsCreatingTask(false)
           }}
-          onClose={() => setTaskId(null)}
         />
       </SidePanel>
     </div>

web/components/tasks/TaskDetailView.tsx

@@ -34,9 +34,10 @@ interface TaskDetailViewProps {
   taskId: string | null,
   onClose: () => void,
   onSuccess: () => void,
+  initialPatientId?: string,
 }
 
-export const TaskDetailView = ({ taskId, onClose, onSuccess }: TaskDetailViewProps) => {
+export const TaskDetailView = ({ taskId, onClose, onSuccess, initialPatientId }: TaskDetailViewProps) => {
   const translation = useTasksTranslation()
   const { selectedLocationId } = useTasksContext()
   const [isShowingPatientDialog, setIsShowingPatientDialog] = useState<boolean>(false)
@@ -78,7 +79,7 @@ export const TaskDetailView = ({ taskId, onClose, onSuccess }: TaskDetailViewPro
   const [formData, setFormData] = useState<Partial<CreateTaskInput & { done: boolean }>>({
     title: '',
     description: '',
-    patientId: '',
+    patientId: initialPatientId || '',
     assigneeId: null,
     dueDate: null,
     done: false,
@@ -94,8 +95,11 @@ export const TaskDetailView = ({ taskId, onClose, onSuccess }: TaskDetailViewPro
         dueDate: taskData.task.dueDate ? new Date(taskData.task.dueDate) : null,
         done: taskData.task.done || false
       })
+    } else if (initialPatientId && !taskId) {
+      // Set initial patient ID when creating a new task
+      setFormData(prev => ({ ...prev, patientId: initialPatientId }))
     }
-  }, [taskData])
+  }, [taskData, initialPatientId, taskId])
 
   const updateLocalState = (updates: Partial<CreateTaskInput>) => {
     setFormData(prev => ({ ...prev, ...updates }))