From 3d1818d567d379ba70a36c565f5aa13710c7b89b Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Thu, 5 Mar 2026 16:46:12 +0100
Subject: [PATCH] feat: Add Approve button for pending_approval tasks in
 TaskSlideOver

---
 .../components/execution/TaskSlideOver.tsx    | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/execution/TaskSlideOver.tsx b/apps/web/src/components/execution/TaskSlideOver.tsx
index e2df6bf..3987be0 100644
--- a/apps/web/src/components/execution/TaskSlideOver.tsx
+++ b/apps/web/src/components/execution/TaskSlideOver.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useMemo } from "react";
 import { motion, AnimatePresence } from "motion/react";
-import { X, Trash2, MessageCircle } from "lucide-react";
+import { X, Trash2, MessageCircle, CheckCircle2 } from "lucide-react";
 import type { ChatTarget } from "@/components/chat/ChatSlideOver";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -20,6 +20,7 @@ interface TaskSlideOverProps {
 export function TaskSlideOver({ onOpenChat }: TaskSlideOverProps) {
   const { selectedEntry, setSelectedTaskId } = useExecutionContext();
   const queueTaskMutation = trpc.queueTask.useMutation();
+  const approveTaskMutation = trpc.approveTask.useMutation();
   const deleteTaskMutation = trpc.deleteTask.useMutation();
   const updateTaskMutation = trpc.updateTask.useMutation();
 
@@ -229,17 +230,32 @@ export function TaskSlideOver({ onOpenChat }: TaskSlideOverProps) {
 
             {/* Footer */}
             <div className="flex items-center gap-2 border-t border-border px-5 py-3">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canQueue}
-                onClick={() => {
-                  queueTaskMutation.mutate({ taskId: task.id });
-                  close();
-                }}
-              >
-                Queue Task
-              </Button>
+              {task.status === "pending_approval" ? (
+                <Button
+                  size="sm"
+                  className="gap-1.5"
+                  disabled={approveTaskMutation.isPending}
+                  onClick={() => {
+                    approveTaskMutation.mutate({ taskId: task.id });
+                    close();
+                  }}
+                >
+                  <CheckCircle2 className="h-3.5 w-3.5" />
+                  Approve
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!canQueue}
+                  onClick={() => {
+                    queueTaskMutation.mutate({ taskId: task.id });
+                    close();
+                  }}
+                >
+                  Queue Task
+                </Button>
+              )}
               <Button
                 variant="outline"
                 size="sm"