update profile section

src/app/dashboard/profile-sections/[id]/page.tsx

@@ -282,6 +282,15 @@ export default function SectionDetailPage() {
     }
   };
 
+  const handleToggleGlobal = async (newIsGlobal: boolean) => {
+    try {
+      await profileSectionsService.update(sectionId, { isGlobal: newIsGlobal });
+      fetchData();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  };
+
   const getFieldTypeLabel = (type: FieldType) => {
     const found = FIELD_TYPES.find((ft) => ft.value === type);
     return found?.label || type;
@@ -469,7 +478,7 @@ export default function SectionDetailPage() {
           <div className="bg-white rounded-lg shadow">
             <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
               <h2 className="text-lg font-semibold text-gray-900">Agent Types</h2>
-              {!section.isGlobal && availableAgentTypes.length > 0 && (
+              {availableAgentTypes.length > 0 && (
                 <button
                   onClick={openAssignModal}
                   className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
@@ -479,17 +488,38 @@ export default function SectionDetailPage() {
               )}
             </div>
             <div className="p-6">
-              {section.isGlobal ? (
-                <div className="text-center py-4">
-                  <span className="px-3 py-1.5 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">
-                    Available to all agent types
-                  </span>
-                  <p className="mt-3 text-sm text-gray-500">
-                    This is a global section and appears for all agent types.
+              {/* Global toggle */}
+              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-4">
+                <div>
+                  <p className="font-medium text-gray-900">Available to all agent types</p>
+                  <p className="text-xs text-gray-500">
+                    {section.isGlobal
+                      ? 'This section appears for all agent types by default'
+                      : 'Only assigned agent types will see this section'}
                   </p>
                 </div>
-              ) : section.agentTypeSections && section.agentTypeSections.length > 0 ? (
+                <button
+                  onClick={() => handleToggleGlobal(!section.isGlobal)}
+                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
+                    section.isGlobal ? 'bg-purple-600' : 'bg-gray-200'
+                  }`}
+                  role="switch"
+                  aria-checked={section.isGlobal}
+                >
+                  <span
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      section.isGlobal ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* Specific agent type assignments */}
+              {section.agentTypeSections && section.agentTypeSections.length > 0 ? (
                 <div className="space-y-3">
+                  <p className="text-xs text-gray-500 font-medium uppercase tracking-wide mb-2">
+                    Specific Assignments
+                  </p>
                   {section.agentTypeSections.map((ats) => {
                     const agentType = agentTypes.find((at) => at.id === ats.agentTypeId);
                     return (
@@ -518,13 +548,17 @@ export default function SectionDetailPage() {
                 </div>
               ) : (
                 <div className="text-center py-4">
-                  <p className="text-gray-500 text-sm">Not assigned to any agent type</p>
+                  <p className="text-gray-500 text-sm">
+                    {section.isGlobal
+                      ? 'No specific agent type configurations yet'
+                      : 'Not assigned to any agent type'}
+                  </p>
                   {availableAgentTypes.length > 0 && (
                     <button
                       onClick={openAssignModal}
                       className="mt-3 text-blue-600 hover:underline text-sm"
                     >
-                      Assign to agent type
+                      {section.isGlobal ? 'Add specific configuration' : 'Assign to agent type'}
                     </button>
                   )}
                 </div>