feat: add Claim for Column with AI button to schedule page

UI-only stub — logic to be defined. Mirrors the existing Claim for
Column section with its own column checkboxes and loading state.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/Frontend/src/pages/appointments-page.tsx

@@ -165,6 +165,8 @@ export default function AppointmentsPage() {
 
   const [selectedClaimColumns, setSelectedClaimColumns] = useState<Set<number>>(new Set());
   const [isClaimingColumn, setIsClaimingColumn] = useState(false);
+  const [selectedClaimAiColumns, setSelectedClaimAiColumns] = useState<Set<number>>(new Set());
+  const [isClaimingAiColumn, setIsClaimingAiColumn] = useState(false);
   const [selectedReminderColumns, setSelectedReminderColumns] = useState<Set<number>>(new Set());
   const [isSendingReminders, setIsSendingReminders] = useState(false);
   const [reminderAiFollowUp, setReminderAiFollowUp] = useState(true);
@@ -201,6 +203,15 @@ export default function AppointmentsPage() {
     });
   };
 
+  const toggleClaimAiColumn = (staffId: number) => {
+    setSelectedClaimAiColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(staffId)) next.delete(staffId);
+      else next.add(staffId);
+      return next;
+    });
+  };
+
   const toggleRescheduleColumn = (staffId: number) => {
     setSelectedRescheduleColumns((prev) => {
       const next = new Set(prev);
@@ -1424,6 +1435,43 @@ export default function AppointmentsPage() {
               ))}
             </div>
 
+            {/* Claim for Column with AI section */}
+            <div className="flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm">
+              <Button
+                onClick={() => {/* logic TBD */}}
+                disabled={isLoading || isClaimingAiColumn || selectedClaimAiColumns.size === 0}
+                size="sm"
+              >
+                {isClaimingAiColumn ? (
+                  <>
+                    <LoaderCircleIcon className="h-4 w-4 mr-1 animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  <>
+                    <Bot className="h-4 w-4 mr-1" />
+                    Claim for Column with AI
+                  </>
+                )}
+              </Button>
+              {staffMembers.map((staff, index) => (
+                <label
+                  key={staff.id}
+                  className="flex items-center gap-1 cursor-pointer select-none"
+                >
+                  <input
+                    type="checkbox"
+                    className="w-4 h-4 rounded border-gray-400 accent-teal-600"
+                    checked={selectedClaimAiColumns.has(Number(staff.id))}
+                    onChange={() => toggleClaimAiColumn(Number(staff.id))}
+                  />
+                  <span className="text-sm font-medium">
+                    {columnLabels[String(staff.id)] ?? String.fromCharCode(65 + index)}
+                  </span>
+                </label>
+              ))}
+            </div>
+
             {/* Text Reminder for Column section */}
             <div className="flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm">
               <Button