feat: Implement agent availability status with a toggle for agents and display on user profiles.

src/app/(agent)/agent/dashboard/page.tsx

@@ -109,6 +109,8 @@ export default function AgentDashboard() {
   const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false);
   const [imageError, setImageError] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [isAvailable, setIsAvailable] = useState(true);
+  const [isTogglingAvailability, setIsTogglingAvailability] = useState(false);
 
   const defaultImage = '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg';
 
@@ -134,6 +136,7 @@ export default function AgentDashboard() {
 
         setAgentProfile(profile);
         setFieldValues(fieldValuesResponse.fieldValues);
+        setIsAvailable(profile.isAvailable ?? true);
 
         // Map field values to experience data structure
         const mappedExperience = mapFieldValuesToExperience(fieldValuesResponse.fieldValues);
@@ -175,6 +178,28 @@ export default function AgentDashboard() {
     fetchData();
   }, []);
 
+  // Handle availability toggle
+  const handleToggleAvailability = async () => {
+    if (isTogglingAvailability) return;
+
+    try {
+      setIsTogglingAvailability(true);
+      const newAvailability = !isAvailable;
+
+      // Update on server
+      const updatedProfile = await agentsService.updateProfile({ isAvailable: newAvailability });
+
+      // Update local state
+      setIsAvailable(newAvailability);
+      setAgentProfile(updatedProfile);
+    } catch (err) {
+      console.error('Failed to update availability:', err);
+      // Revert on error - state stays the same
+    } finally {
+      setIsTogglingAvailability(false);
+    }
+  };
+
   const handlePhotoUpload = async (file: File) => {
     // Upload avatar to S3 (uses agent ID as filename for auto-replacement)
     const uploadedFile = await uploadService.uploadAvatar(file);
@@ -300,8 +325,12 @@ export default function AgentDashboard() {
             </button>
           </div>
 
-          {/* Status Buttons */}
-          <StatusButtons />
+          {/* Status Buttons - Toggle for agent to set availability */}
+          <StatusButtons
+            isAvailable={isAvailable}
+            showToggle={true}
+            onToggleAvailability={handleToggleAvailability}
+          />
 
           {/* Contact Info */}
           <ContactInfo