Fix task and shift self-assignment features

frontend/src/app/(protected)/tasks/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { use } from 'react';
 import Link from 'next/link';
-import { useTask, useUpdateTask } from '@/hooks/useTasks';
+import { useTask, useUpdateTask, useAssignTask, useUnassignTask } from '@/hooks/useTasks';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -26,9 +26,13 @@ const statusColors: Record<string, string> = {
 export default function TaskDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const resolvedParams = use(params);
   const { data: task, isLoading, error } = useTask(resolvedParams.id);
-  const { mutate: updateTask, isPending } = useUpdateTask();
+  const { mutate: updateTask, isPending: isUpdating } = useUpdateTask();
+  const { mutate: assignTask, isPending: isAssigning } = useAssignTask();
+  const { mutate: unassignTask, isPending: isUnassigning } = useUnassignTask();
   const { data: session } = useSession();
 
+  const isPending = isUpdating || isAssigning || isUnassigning;
+
   if (isLoading) return <div className="p-8">Loading task...</div>;
   if (error || !task) return <div className="p-8 text-red-500">Failed to load task.</div>;
 
@@ -39,9 +43,11 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
   };
 
   const handleAssignToMe = () => {
-    if (session?.user?.id) {
-      updateTask({ id: task.id, data: { assigneeId: session.user.id } });
-    }
+    assignTask(task.id);
+  };
+
+  const handleUnassign = () => {
+    unassignTask(task.id);
   };
 
   const getTransitionLabel = (status: string, newStatus: string) => {
@@ -107,7 +113,16 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
                     disabled={isPending}
                     variant="outline"
                   >
-                    {isPending ? 'Assigning...' : 'Assign to Me'}
+                    {isAssigning ? 'Assigning...' : 'Assign to Me'}
+                  </Button>
+                )}
+                {task.isAssignedToMe && (
+                  <Button
+                    onClick={handleUnassign}
+                    disabled={isPending}
+                    variant="outline"
+                  >
+                    {isUnassigning ? 'Unassigning...' : 'Unassign'}
                   </Button>
                 )}
                 {validTransitions.map((nextStatus) => (