Fix task and shift self-assignment features

frontend/src/components/shifts/shift-card.tsx

@@ -3,13 +3,16 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/com
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Badge } from '@/components/ui/badge';
-import { ShiftListItemDto } from '@/hooks/useShifts';
+import { ShiftListItemDto, useSignUpShift, useCancelSignUp } from '@/hooks/useShifts';
 
 interface ShiftCardProps {
   shift: ShiftListItemDto;
 }
 
 export function ShiftCard({ shift }: ShiftCardProps) {
+  const signUpMutation = useSignUpShift();
+  const cancelMutation = useCancelSignUp();
+
   const capacityPercentage = (shift.currentSignups / shift.capacity) * 100;
   const isFull = shift.currentSignups >= shift.capacity;
   const isPast = new Date(shift.startTime) < new Date();
@@ -39,8 +42,15 @@ export function ShiftCard({ shift }: ShiftCardProps) {
             <Link href={`/shifts/${shift.id}`}>
               <Button variant="outline" size="sm">View Details</Button>
             </Link>
-            {!isPast && !isFull && (
-              <Button size="sm">Sign Up</Button>
+            {!isPast && !isFull && !shift.isSignedUp && (
+              <Button size="sm" onClick={() => signUpMutation.mutate(shift.id)} disabled={signUpMutation.isPending}>
+                {signUpMutation.isPending ? 'Signing up...' : 'Sign Up'}
+              </Button>
+            )}
+            {!isPast && shift.isSignedUp && (
+              <Button variant="outline" size="sm" onClick={() => cancelMutation.mutate(shift.id)} disabled={cancelMutation.isPending}>
+                {cancelMutation.isPending ? 'Canceling...' : 'Cancel Sign-up'}
+              </Button>
             )}
           </div>
         </div>