From 909c22dc45c826eadba904ce31eefa87340419c1 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sat, 24 Jan 2026 03:33:48 +0530
Subject: [PATCH] fix

---
 .gitignore                                    |   1 +
 firebase-debug.log                            |  14 +
 src/app/dashboard/agent-types/page.tsx        | 433 +++++++++
 .../dashboard/profile-sections/[id]/page.tsx  | 890 ++++++++++++++++++
 src/app/dashboard/profile-sections/page.tsx   | 491 ++++++++++
 src/app/globals.css                           |   7 -
 src/components/Sidebar.tsx                    |  28 +
 src/services/agent-types.service.ts           |  66 ++
 src/services/index.ts                         |  32 +
 src/services/profile-fields.service.ts        | 166 ++++
 src/services/profile-sections.service.ts      | 125 +++
 11 files changed, 2246 insertions(+), 7 deletions(-)
 create mode 100644 firebase-debug.log
 create mode 100644 src/app/dashboard/agent-types/page.tsx
 create mode 100644 src/app/dashboard/profile-sections/[id]/page.tsx
 create mode 100644 src/app/dashboard/profile-sections/page.tsx
 create mode 100644 src/services/agent-types.service.ts
 create mode 100644 src/services/profile-fields.service.ts
 create mode 100644 src/services/profile-sections.service.ts

diff --git a/.gitignore b/.gitignore
index 5ef6a52..00a54a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+CLAUDE.md
diff --git a/firebase-debug.log b/firebase-debug.log
new file mode 100644
index 0000000..d446700
--- /dev/null
+++ b/firebase-debug.log
@@ -0,0 +1,14 @@
+[debug] [2026-01-23T19:18:31.890Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:31.892Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:31.892Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:31.892Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:31.901Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:31.902Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:32.021Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:32.021Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:32.022Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:32.022Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:32.057Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:32.057Z] > authorizing via signed-in user (ppradeepd@gmail.com)
+[debug] [2026-01-23T19:18:32.058Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
+[debug] [2026-01-23T19:18:32.058Z] > authorizing via signed-in user (ppradeepd@gmail.com)
diff --git a/src/app/dashboard/agent-types/page.tsx b/src/app/dashboard/agent-types/page.tsx
new file mode 100644
index 0000000..05207e5
--- /dev/null
+++ b/src/app/dashboard/agent-types/page.tsx
@@ -0,0 +1,433 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { agentTypesService, AgentType, CreateAgentTypeDto, UpdateAgentTypeDto, getErrorMessage } from '@/services';
+
+type ModalType = 'create' | 'edit' | 'delete' | null;
+
+export default function AgentTypesPage() {
+  const router = useRouter();
+  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [showInactive, setShowInactive] = useState(true);
+
+  // Modal state
+  const [modalType, setModalType] = useState<ModalType>(null);
+  const [selectedType, setSelectedType] = useState<AgentType | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [modalError, setModalError] = useState('');
+
+  // Form state
+  const [formData, setFormData] = useState<CreateAgentTypeDto>({
+    name: '',
+    description: '',
+    icon: '',
+    isActive: true,
+    sortOrder: 0,
+  });
+
+  useEffect(() => {
+    fetchAgentTypes();
+  }, [showInactive]);
+
+  const fetchAgentTypes = async () => {
+    setIsLoading(true);
+    setError('');
+    try {
+      const data = await agentTypesService.getAll(showInactive);
+      setAgentTypes(data);
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      if (errorMessage.includes('Unauthorized')) {
+        router.push('/login');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const openCreateModal = () => {
+    setFormData({
+      name: '',
+      description: '',
+      icon: '',
+      isActive: true,
+      sortOrder: 0,
+    });
+    setModalError('');
+    setModalType('create');
+  };
+
+  const openEditModal = (agentType: AgentType) => {
+    setSelectedType(agentType);
+    setFormData({
+      name: agentType.name,
+      description: agentType.description || '',
+      icon: agentType.icon || '',
+      isActive: agentType.isActive,
+      sortOrder: agentType.sortOrder,
+    });
+    setModalError('');
+    setModalType('edit');
+  };
+
+  const openDeleteModal = (agentType: AgentType) => {
+    setSelectedType(agentType);
+    setModalError('');
+    setModalType('delete');
+  };
+
+  const closeModal = () => {
+    setModalType(null);
+    setSelectedType(null);
+    setModalError('');
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await agentTypesService.create(formData);
+      closeModal();
+      fetchAgentTypes();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedType) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await agentTypesService.update(selectedType.id, formData as UpdateAgentTypeDto);
+      closeModal();
+      fetchAgentTypes();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedType) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await agentTypesService.delete(selectedType.id);
+      closeModal();
+      fetchAgentTypes();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const toggleStatus = async (agentType: AgentType) => {
+    try {
+      await agentTypesService.update(agentType.id, { isActive: !agentType.isActive });
+      fetchAgentTypes();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  };
+
+  return (
+    <div>
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Agent Types</h1>
+        <p className="text-gray-500">Manage agent categories and types</p>
+      </div>
+
+      {/* Agent Types Table */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-4">
+              <label className="flex items-center space-x-2 text-sm text-gray-600">
+                <input
+                  type="checkbox"
+                  checked={showInactive}
+                  onChange={(e) => setShowInactive(e.target.checked)}
+                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span>Show Inactive</span>
+              </label>
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={fetchAgentTypes}
+                className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors flex items-center"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                Refresh
+              </button>
+              <button
+                onClick={openCreateModal}
+                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                Add Agent Type
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="px-6 py-4 bg-red-50 border-b border-red-200">
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        )}
+
+        <div className="overflow-x-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            </div>
+          ) : agentTypes.length === 0 ? (
+            <div className="text-center py-12">
+              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+              </svg>
+              <p className="mt-2 text-gray-500">No agent types found</p>
+              <button
+                onClick={openCreateModal}
+                className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+              >
+                Create First Agent Type
+              </button>
+            </div>
+          ) : (
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Name
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Description
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Icon
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Sort Order
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Agents
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {agentTypes.map((agentType) => (
+                  <tr key={agentType.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm font-medium text-gray-900">{agentType.name}</div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="text-sm text-gray-500 max-w-xs truncate">
+                        {agentType.description || '-'}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-500">{agentType.icon || '-'}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-500">{agentType.sortOrder}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <button
+                        onClick={() => toggleStatus(agentType)}
+                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full cursor-pointer transition-colors ${
+                          agentType.isActive
+                            ? 'bg-green-100 text-green-800 hover:bg-green-200'
+                            : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+                        }`}
+                      >
+                        {agentType.isActive ? 'Active' : 'Inactive'}
+                      </button>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-500">{agentType._count?.agents || 0}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        onClick={() => openEditModal(agentType)}
+                        className="text-blue-600 hover:text-blue-900 mr-4"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => openDeleteModal(agentType)}
+                        className="text-red-600 hover:text-red-900"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      {/* Create/Edit Modal */}
+      {(modalType === 'create' || modalType === 'edit') && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {modalType === 'create' ? 'Create Agent Type' : 'Edit Agent Type'}
+              </h3>
+            </div>
+            <form onSubmit={modalType === 'create' ? handleCreate : handleUpdate}>
+              <div className="px-6 py-4 space-y-4">
+                {modalError && (
+                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-red-700 text-sm">{modalError}</p>
+                  </div>
+                )}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    rows={3}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Icon (emoji or icon name)
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.icon}
+                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="e.g. house, building, key"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Sort Order
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.sortOrder}
+                    onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                  />
+                </div>
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="isActive"
+                    checked={formData.isActive}
+                    onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  />
+                  <label htmlFor="isActive" className="ml-2 text-sm text-gray-700">
+                    Active
+                  </label>
+                </div>
+              </div>
+              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                >
+                  {isSubmitting ? 'Saving...' : modalType === 'create' ? 'Create' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {modalType === 'delete' && selectedType && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Delete Agent Type</h3>
+            </div>
+            <div className="px-6 py-4">
+              {modalError && (
+                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                  <p className="text-red-700 text-sm">{modalError}</p>
+                </div>
+              )}
+              <p className="text-gray-600">
+                Are you sure you want to delete <span className="font-semibold">{selectedType.name}</span>?
+                {selectedType._count?.agents && selectedType._count.agents > 0 && (
+                  <span className="block mt-2 text-red-600 text-sm">
+                    Warning: This agent type has {selectedType._count.agents} agent(s) assigned to it.
+                  </span>
+                )}
+              </p>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+              <button
+                onClick={closeModal}
+                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={isSubmitting}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+              >
+                {isSubmitting ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/dashboard/profile-sections/[id]/page.tsx b/src/app/dashboard/profile-sections/[id]/page.tsx
new file mode 100644
index 0000000..2355edf
--- /dev/null
+++ b/src/app/dashboard/profile-sections/[id]/page.tsx
@@ -0,0 +1,890 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  profileSectionsService,
+  profileFieldsService,
+  agentTypesService,
+  ProfileSection,
+  ProfileField,
+  AgentType,
+  CreateFieldDto,
+  UpdateFieldDto,
+  FieldType,
+  FieldOption,
+  RangeConfig,
+  FIELD_TYPES,
+  getErrorMessage,
+} from '@/services';
+
+type FieldModalType = 'create' | 'edit' | 'delete' | null;
+type AssignModalType = 'assign' | null;
+
+const REQUIRES_OPTIONS: FieldType[] = ['SELECT', 'RADIO', 'MULTI_SELECT', 'CHECKBOX_GROUP'];
+
+export default function SectionDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const sectionId = params.id as string;
+
+  const [section, setSection] = useState<ProfileSection | null>(null);
+  const [fields, setFields] = useState<ProfileField[]>([]);
+  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // Field Modal state
+  const [fieldModalType, setFieldModalType] = useState<FieldModalType>(null);
+  const [selectedField, setSelectedField] = useState<ProfileField | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [modalError, setModalError] = useState('');
+
+  // Assign Modal state
+  const [assignModalType, setAssignModalType] = useState<AssignModalType>(null);
+
+  // Field Form state
+  const [fieldForm, setFieldForm] = useState<CreateFieldDto>({
+    sectionId: '',
+    name: '',
+    fieldType: 'TEXT',
+    description: '',
+    placeholder: '',
+    defaultValue: '',
+    sortOrder: 0,
+    isActive: true,
+    isRequired: false,
+    options: [],
+    rangeConfig: undefined,
+  });
+
+  // Options editor state
+  const [optionInput, setOptionInput] = useState({ value: '', label: '' });
+
+  // Assignment form state
+  const [assignForm, setAssignForm] = useState({
+    agentTypeId: '',
+    sortOrder: 0,
+    isRequired: false,
+  });
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError('');
+    try {
+      const [sectionData, fieldsData, agentTypesData] = await Promise.all([
+        profileSectionsService.getById(sectionId),
+        profileFieldsService.getAll(sectionId, true),
+        agentTypesService.getAll(true),
+      ]);
+      setSection(sectionData);
+      setFields(fieldsData);
+      setAgentTypes(agentTypesData);
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      if (errorMessage.includes('Unauthorized')) {
+        router.push('/login');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sectionId, router]);
+
+  useEffect(() => {
+    if (sectionId) {
+      fetchData();
+    }
+  }, [sectionId, fetchData]);
+
+  // Field Modal handlers
+  const openCreateFieldModal = () => {
+    setFieldForm({
+      sectionId,
+      name: '',
+      fieldType: 'TEXT',
+      description: '',
+      placeholder: '',
+      defaultValue: '',
+      sortOrder: fields.length,
+      isActive: true,
+      isRequired: false,
+      options: [],
+      rangeConfig: undefined,
+    });
+    setOptionInput({ value: '', label: '' });
+    setModalError('');
+    setFieldModalType('create');
+  };
+
+  const openEditFieldModal = (field: ProfileField) => {
+    setSelectedField(field);
+    setFieldForm({
+      sectionId,
+      name: field.name,
+      fieldType: field.fieldType,
+      description: field.description || '',
+      placeholder: field.placeholder || '',
+      defaultValue: field.defaultValue || '',
+      sortOrder: field.sortOrder,
+      isActive: field.isActive,
+      isRequired: field.isRequired,
+      options: field.options || [],
+      rangeConfig: field.rangeConfig || undefined,
+    });
+    setOptionInput({ value: '', label: '' });
+    setModalError('');
+    setFieldModalType('edit');
+  };
+
+  const openDeleteFieldModal = (field: ProfileField) => {
+    setSelectedField(field);
+    setModalError('');
+    setFieldModalType('delete');
+  };
+
+  const closeFieldModal = () => {
+    setFieldModalType(null);
+    setSelectedField(null);
+    setModalError('');
+  };
+
+  const handleCreateField = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileFieldsService.create(fieldForm);
+      closeFieldModal();
+      fetchData();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdateField = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedField) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      const { sectionId: _, ...updateData } = fieldForm;
+      await profileFieldsService.update(selectedField.id, updateData as UpdateFieldDto);
+      closeFieldModal();
+      fetchData();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteField = async () => {
+    if (!selectedField) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileFieldsService.delete(selectedField.id);
+      closeFieldModal();
+      fetchData();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Options management
+  const addOption = () => {
+    if (!optionInput.value.trim() || !optionInput.label.trim()) return;
+    setFieldForm({
+      ...fieldForm,
+      options: [...(fieldForm.options || []), { ...optionInput }],
+    });
+    setOptionInput({ value: '', label: '' });
+  };
+
+  const removeOption = (index: number) => {
+    setFieldForm({
+      ...fieldForm,
+      options: (fieldForm.options || []).filter((_, i) => i !== index),
+    });
+  };
+
+  // Range config management
+  const updateRangeConfig = (key: keyof RangeConfig, value: number | string) => {
+    setFieldForm({
+      ...fieldForm,
+      rangeConfig: {
+        min: fieldForm.rangeConfig?.min || 0,
+        max: fieldForm.rangeConfig?.max || 100,
+        step: fieldForm.rangeConfig?.step,
+        unit: fieldForm.rangeConfig?.unit,
+        [key]: typeof value === 'string' ? value : Number(value),
+      },
+    });
+  };
+
+  // Toggle field status
+  const toggleFieldStatus = async (field: ProfileField) => {
+    try {
+      await profileFieldsService.update(field.id, { isActive: !field.isActive });
+      fetchData();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  };
+
+  // Assignment handlers
+  const openAssignModal = () => {
+    setAssignForm({
+      agentTypeId: '',
+      sortOrder: 0,
+      isRequired: false,
+    });
+    setModalError('');
+    setAssignModalType('assign');
+  };
+
+  const closeAssignModal = () => {
+    setAssignModalType(null);
+    setModalError('');
+  };
+
+  const handleAssign = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileSectionsService.assignToAgentType(sectionId, assignForm);
+      closeAssignModal();
+      fetchData();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRemoveAssignment = async (agentTypeId: string) => {
+    if (!confirm('Remove this section from the agent type?')) return;
+    try {
+      await profileSectionsService.removeFromAgentType(sectionId, agentTypeId);
+      fetchData();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  };
+
+  const getFieldTypeLabel = (type: FieldType) => {
+    const found = FIELD_TYPES.find((ft) => ft.value === type);
+    return found?.label || type;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  if (!section) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500">Section not found</p>
+        <Link href="/dashboard/profile-sections" className="mt-4 text-blue-600 hover:underline">
+          Back to sections
+        </Link>
+      </div>
+    );
+  }
+
+  // Get assigned agent types
+  const assignedAgentTypeIds = section.agentTypeSections?.map((ats) => ats.agentTypeId) || [];
+  const availableAgentTypes = agentTypes.filter((at) => !assignedAgentTypeIds.includes(at.id));
+
+  return (
+    <div>
+      {/* Breadcrumb */}
+      <div className="mb-4">
+        <Link href="/dashboard/profile-sections" className="text-blue-600 hover:underline text-sm">
+          &larr; Back to Profile Sections
+        </Link>
+      </div>
+
+      {/* Page Header */}
+      <div className="mb-6 flex justify-between items-start">
+        <div>
+          <div className="flex items-center">
+            {section.icon && <span className="text-2xl mr-2">{section.icon}</span>}
+            <h1 className="text-2xl font-bold text-gray-900">{section.name}</h1>
+            {section.isGlobal && (
+              <span className="ml-3 px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
+                Global
+              </span>
+            )}
+          </div>
+          <p className="text-gray-500 mt-1">{section.description || 'No description'}</p>
+        </div>
+        <div className="flex space-x-3">
+          <button
+            onClick={fetchData}
+            className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-6 px-4 py-3 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-700 text-sm">{error}</p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Fields Section */}
+        <div className="lg:col-span-2">
+          <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">Fields ({fields.length})</h2>
+              <button
+                onClick={openCreateFieldModal}
+                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                Add Field
+              </button>
+            </div>
+
+            <div className="divide-y divide-gray-200">
+              {fields.length === 0 ? (
+                <div className="text-center py-12">
+                  <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                  <p className="mt-2 text-gray-500">No fields defined yet</p>
+                  <button
+                    onClick={openCreateFieldModal}
+                    className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+                  >
+                    Add First Field
+                  </button>
+                </div>
+              ) : (
+                fields.map((field, index) => (
+                  <div key={field.id} className="px-6 py-4 hover:bg-gray-50">
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1">
+                        <div className="flex items-center">
+                          <span className="text-gray-400 mr-3 text-sm">#{index + 1}</span>
+                          <span className="font-medium text-gray-900">{field.name}</span>
+                          {field.isRequired && (
+                            <span className="ml-2 text-red-500 text-xs">*required</span>
+                          )}
+                        </div>
+                        <div className="mt-1 flex items-center space-x-3 text-sm">
+                          <span className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">
+                            {getFieldTypeLabel(field.fieldType)}
+                          </span>
+                          <span className="text-gray-400">{field.slug}</span>
+                          {field.placeholder && (
+                            <span className="text-gray-400 truncate max-w-xs">
+                              placeholder: {field.placeholder}
+                            </span>
+                          )}
+                        </div>
+                        {field.options && field.options.length > 0 && (
+                          <div className="mt-2 flex flex-wrap gap-1">
+                            {(field.options as FieldOption[]).slice(0, 5).map((opt, i) => (
+                              <span key={i} className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded">
+                                {opt.label}
+                              </span>
+                            ))}
+                            {field.options.length > 5 && (
+                              <span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">
+                                +{field.options.length - 5} more
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => toggleFieldStatus(field)}
+                          className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                            field.isActive
+                              ? 'bg-green-100 text-green-800'
+                              : 'bg-gray-100 text-gray-800'
+                          }`}
+                        >
+                          {field.isActive ? 'Active' : 'Inactive'}
+                        </button>
+                        <button
+                          onClick={() => openEditFieldModal(field)}
+                          className="p-1 text-gray-400 hover:text-blue-600"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                          </svg>
+                        </button>
+                        <button
+                          onClick={() => openDeleteFieldModal(field)}
+                          className="p-1 text-gray-400 hover:text-red-600"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Agent Type Assignments */}
+        <div className="lg:col-span-1">
+          <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 && (
+                <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"
+                >
+                  Assign
+                </button>
+              )}
+            </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.
+                  </p>
+                </div>
+              ) : section.agentTypeSections && section.agentTypeSections.length > 0 ? (
+                <div className="space-y-3">
+                  {section.agentTypeSections.map((ats) => {
+                    const agentType = agentTypes.find((at) => at.id === ats.agentTypeId);
+                    return (
+                      <div
+                        key={ats.id}
+                        className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+                      >
+                        <div>
+                          <p className="font-medium text-gray-900">{agentType?.name || 'Unknown'}</p>
+                          <p className="text-xs text-gray-500">
+                            {ats.isRequired ? 'Required' : 'Optional'} &bull; Order: {ats.sortOrder}
+                          </p>
+                        </div>
+                        <button
+                          onClick={() => handleRemoveAssignment(ats.agentTypeId)}
+                          className="p-1 text-gray-400 hover:text-red-600"
+                          title="Remove assignment"
+                        >
+                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="text-center py-4">
+                  <p className="text-gray-500 text-sm">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
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Field Create/Edit Modal */}
+      {(fieldModalType === 'create' || fieldModalType === 'edit') && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
+          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {fieldModalType === 'create' ? 'Create Field' : 'Edit Field'}
+              </h3>
+            </div>
+            <form onSubmit={fieldModalType === 'create' ? handleCreateField : handleUpdateField}>
+              <div className="px-6 py-4 space-y-4 max-h-[60vh] overflow-y-auto">
+                {modalError && (
+                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-red-700 text-sm">{modalError}</p>
+                  </div>
+                )}
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={fieldForm.name}
+                      onChange={(e) => setFieldForm({ ...fieldForm, name: e.target.value })}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                      required
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Field Type <span className="text-red-500">*</span>
+                    </label>
+                    <select
+                      value={fieldForm.fieldType}
+                      onChange={(e) => setFieldForm({ ...fieldForm, fieldType: e.target.value as FieldType })}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    >
+                      {FIELD_TYPES.map((ft) => (
+                        <option key={ft.value} value={ft.value}>
+                          {ft.label} - {ft.description}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Description
+                  </label>
+                  <input
+                    type="text"
+                    value={fieldForm.description}
+                    onChange={(e) => setFieldForm({ ...fieldForm, description: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="Help text for this field"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Placeholder
+                    </label>
+                    <input
+                      type="text"
+                      value={fieldForm.placeholder}
+                      onChange={(e) => setFieldForm({ ...fieldForm, placeholder: e.target.value })}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Default Value
+                    </label>
+                    <input
+                      type="text"
+                      value={fieldForm.defaultValue}
+                      onChange={(e) => setFieldForm({ ...fieldForm, defaultValue: e.target.value })}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Sort Order
+                    </label>
+                    <input
+                      type="number"
+                      value={fieldForm.sortOrder}
+                      onChange={(e) => setFieldForm({ ...fieldForm, sortOrder: parseInt(e.target.value) || 0 })}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    />
+                  </div>
+                  <div className="flex items-center space-x-6 pt-6">
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        id="fieldIsActive"
+                        checked={fieldForm.isActive}
+                        onChange={(e) => setFieldForm({ ...fieldForm, isActive: e.target.checked })}
+                        className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                      />
+                      <label htmlFor="fieldIsActive" className="ml-2 text-sm text-gray-700">
+                        Active
+                      </label>
+                    </div>
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        id="fieldIsRequired"
+                        checked={fieldForm.isRequired}
+                        onChange={(e) => setFieldForm({ ...fieldForm, isRequired: e.target.checked })}
+                        className="rounded border-gray-300 text-red-600 focus:ring-red-500"
+                      />
+                      <label htmlFor="fieldIsRequired" className="ml-2 text-sm text-gray-700">
+                        Required
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Options Editor for SELECT, RADIO, MULTI_SELECT, CHECKBOX_GROUP */}
+                {REQUIRES_OPTIONS.includes(fieldForm.fieldType) && (
+                  <div className="border border-gray-200 rounded-lg p-4">
+                    <label className="block text-sm font-medium text-gray-700 mb-3">
+                      Options
+                    </label>
+                    <div className="flex space-x-2 mb-3">
+                      <input
+                        type="text"
+                        value={optionInput.value}
+                        onChange={(e) => setOptionInput({ ...optionInput, value: e.target.value })}
+                        placeholder="Value"
+                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
+                      />
+                      <input
+                        type="text"
+                        value={optionInput.label}
+                        onChange={(e) => setOptionInput({ ...optionInput, label: e.target.value })}
+                        placeholder="Label"
+                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
+                      />
+                      <button
+                        type="button"
+                        onClick={addOption}
+                        className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors"
+                      >
+                        Add
+                      </button>
+                    </div>
+                    {fieldForm.options && fieldForm.options.length > 0 && (
+                      <div className="space-y-2">
+                        {fieldForm.options.map((opt, index) => (
+                          <div
+                            key={index}
+                            className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded"
+                          >
+                            <span className="text-sm">
+                              <span className="text-gray-500">{opt.value}</span>
+                              <span className="mx-2">→</span>
+                              <span className="font-medium">{opt.label}</span>
+                            </span>
+                            <button
+                              type="button"
+                              onClick={() => removeOption(index)}
+                              className="text-red-500 hover:text-red-700"
+                            >
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                              </svg>
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Range Config for RANGE type */}
+                {fieldForm.fieldType === 'RANGE' && (
+                  <div className="border border-gray-200 rounded-lg p-4">
+                    <label className="block text-sm font-medium text-gray-700 mb-3">
+                      Range Configuration
+                    </label>
+                    <div className="grid grid-cols-4 gap-3">
+                      <div>
+                        <label className="block text-xs text-gray-500 mb-1">Min</label>
+                        <input
+                          type="number"
+                          value={fieldForm.rangeConfig?.min || 0}
+                          onChange={(e) => updateRangeConfig('min', e.target.value)}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-gray-500 mb-1">Max</label>
+                        <input
+                          type="number"
+                          value={fieldForm.rangeConfig?.max || 100}
+                          onChange={(e) => updateRangeConfig('max', e.target.value)}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-gray-500 mb-1">Step</label>
+                        <input
+                          type="number"
+                          value={fieldForm.rangeConfig?.step || 1}
+                          onChange={(e) => updateRangeConfig('step', e.target.value)}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-gray-500 mb-1">Unit</label>
+                        <input
+                          type="text"
+                          value={fieldForm.rangeConfig?.unit || ''}
+                          onChange={(e) => updateRangeConfig('unit', e.target.value)}
+                          placeholder="e.g., years"
+                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={closeFieldModal}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                >
+                  {isSubmitting ? 'Saving...' : fieldModalType === 'create' ? 'Create Field' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Field Delete Modal */}
+      {fieldModalType === 'delete' && selectedField && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Delete Field</h3>
+            </div>
+            <div className="px-6 py-4">
+              {modalError && (
+                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                  <p className="text-red-700 text-sm">{modalError}</p>
+                </div>
+              )}
+              <p className="text-gray-600">
+                Are you sure you want to delete the field <span className="font-semibold">{selectedField.name}</span>?
+              </p>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+              <button
+                onClick={closeFieldModal}
+                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDeleteField}
+                disabled={isSubmitting}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+              >
+                {isSubmitting ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Assign to Agent Type Modal */}
+      {assignModalType === 'assign' && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Assign to Agent Type</h3>
+            </div>
+            <form onSubmit={handleAssign}>
+              <div className="px-6 py-4 space-y-4">
+                {modalError && (
+                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-red-700 text-sm">{modalError}</p>
+                  </div>
+                )}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Agent Type <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    value={assignForm.agentTypeId}
+                    onChange={(e) => setAssignForm({ ...assignForm, agentTypeId: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    required
+                  >
+                    <option value="">Select agent type...</option>
+                    {availableAgentTypes.map((at) => (
+                      <option key={at.id} value={at.id}>
+                        {at.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Sort Order
+                  </label>
+                  <input
+                    type="number"
+                    value={assignForm.sortOrder}
+                    onChange={(e) => setAssignForm({ ...assignForm, sortOrder: parseInt(e.target.value) || 0 })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                  />
+                </div>
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="assignIsRequired"
+                    checked={assignForm.isRequired}
+                    onChange={(e) => setAssignForm({ ...assignForm, isRequired: e.target.checked })}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  />
+                  <label htmlFor="assignIsRequired" className="ml-2 text-sm text-gray-700">
+                    Required section for this agent type
+                  </label>
+                </div>
+              </div>
+              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={closeAssignModal}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting || !assignForm.agentTypeId}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                >
+                  {isSubmitting ? 'Assigning...' : 'Assign'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/dashboard/profile-sections/page.tsx b/src/app/dashboard/profile-sections/page.tsx
new file mode 100644
index 0000000..8d4b342
--- /dev/null
+++ b/src/app/dashboard/profile-sections/page.tsx
@@ -0,0 +1,491 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+  profileSectionsService,
+  ProfileSection,
+  CreateSectionDto,
+  UpdateSectionDto,
+  getErrorMessage,
+} from '@/services';
+
+type ModalType = 'create' | 'edit' | 'delete' | null;
+
+export default function ProfileSectionsPage() {
+  const router = useRouter();
+  const [sections, setSections] = useState<ProfileSection[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [showInactive, setShowInactive] = useState(true);
+
+  // Modal state
+  const [modalType, setModalType] = useState<ModalType>(null);
+  const [selectedSection, setSelectedSection] = useState<ProfileSection | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [modalError, setModalError] = useState('');
+
+  // Form state
+  const [formData, setFormData] = useState<CreateSectionDto>({
+    name: '',
+    description: '',
+    icon: '',
+    isActive: true,
+    isGlobal: false,
+    sortOrder: 0,
+  });
+
+  useEffect(() => {
+    fetchSections();
+  }, [showInactive]);
+
+  const fetchSections = async () => {
+    setIsLoading(true);
+    setError('');
+    try {
+      const data = await profileSectionsService.getAll(showInactive);
+      setSections(data);
+    } catch (err) {
+      const errorMessage = getErrorMessage(err);
+      setError(errorMessage);
+      if (errorMessage.includes('Unauthorized')) {
+        router.push('/login');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const openCreateModal = () => {
+    setFormData({
+      name: '',
+      description: '',
+      icon: '',
+      isActive: true,
+      isGlobal: false,
+      sortOrder: 0,
+    });
+    setModalError('');
+    setModalType('create');
+  };
+
+  const openEditModal = (section: ProfileSection) => {
+    setSelectedSection(section);
+    setFormData({
+      name: section.name,
+      description: section.description || '',
+      icon: section.icon || '',
+      isActive: section.isActive,
+      isGlobal: section.isGlobal,
+      sortOrder: section.sortOrder,
+    });
+    setModalError('');
+    setModalType('edit');
+  };
+
+  const openDeleteModal = (section: ProfileSection) => {
+    setSelectedSection(section);
+    setModalError('');
+    setModalType('delete');
+  };
+
+  const closeModal = () => {
+    setModalType(null);
+    setSelectedSection(null);
+    setModalError('');
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileSectionsService.create(formData);
+      closeModal();
+      fetchSections();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedSection) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileSectionsService.update(selectedSection.id, formData as UpdateSectionDto);
+      closeModal();
+      fetchSections();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedSection) return;
+    setIsSubmitting(true);
+    setModalError('');
+    try {
+      await profileSectionsService.delete(selectedSection.id);
+      closeModal();
+      fetchSections();
+    } catch (err) {
+      setModalError(getErrorMessage(err));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const toggleStatus = async (section: ProfileSection) => {
+    try {
+      await profileSectionsService.update(section.id, { isActive: !section.isActive });
+      fetchSections();
+    } catch (err) {
+      setError(getErrorMessage(err));
+    }
+  };
+
+  return (
+    <div>
+      {/* Page Title */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Profile Sections</h1>
+        <p className="text-gray-500">Manage profile sections and their fields for agent types</p>
+      </div>
+
+      {/* Sections Table */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-4">
+              <label className="flex items-center space-x-2 text-sm text-gray-600">
+                <input
+                  type="checkbox"
+                  checked={showInactive}
+                  onChange={(e) => setShowInactive(e.target.checked)}
+                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span>Show Inactive</span>
+              </label>
+            </div>
+            <div className="flex space-x-3">
+              <button
+                onClick={fetchSections}
+                className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors flex items-center"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                Refresh
+              </button>
+              <button
+                onClick={openCreateModal}
+                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center"
+              >
+                <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                Add Section
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="px-6 py-4 bg-red-50 border-b border-red-200">
+            <p className="text-red-700 text-sm">{error}</p>
+          </div>
+        )}
+
+        <div className="overflow-x-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            </div>
+          ) : sections.length === 0 ? (
+            <div className="text-center py-12">
+              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+              </svg>
+              <p className="mt-2 text-gray-500">No profile sections found</p>
+              <button
+                onClick={openCreateModal}
+                className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+              >
+                Create First Section
+              </button>
+            </div>
+          ) : (
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Section
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Description
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Fields
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Agent Types
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Global
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {sections.map((section) => (
+                  <tr key={section.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        {section.icon && (
+                          <span className="mr-2 text-lg">{section.icon}</span>
+                        )}
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">{section.name}</div>
+                          <div className="text-xs text-gray-500">{section.slug}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="text-sm text-gray-500 max-w-xs truncate">
+                        {section.description || '-'}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <Link
+                        href={`/dashboard/profile-sections/${section.id}`}
+                        className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200"
+                      >
+                        {section._count?.fields || 0} fields
+                        <svg className="ml-1 w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                      </Link>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-500">
+                        {section._count?.agentTypeSections || 0} assigned
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span
+                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
+                          section.isGlobal
+                            ? 'bg-purple-100 text-purple-800'
+                            : 'bg-gray-100 text-gray-600'
+                        }`}
+                      >
+                        {section.isGlobal ? 'Global' : 'Specific'}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <button
+                        onClick={() => toggleStatus(section)}
+                        className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full cursor-pointer transition-colors ${
+                          section.isActive
+                            ? 'bg-green-100 text-green-800 hover:bg-green-200'
+                            : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+                        }`}
+                      >
+                        {section.isActive ? 'Active' : 'Inactive'}
+                      </button>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <Link
+                        href={`/dashboard/profile-sections/${section.id}`}
+                        className="text-blue-600 hover:text-blue-900 mr-4"
+                      >
+                        Manage
+                      </Link>
+                      <button
+                        onClick={() => openEditModal(section)}
+                        className="text-gray-600 hover:text-gray-900 mr-4"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => openDeleteModal(section)}
+                        className="text-red-600 hover:text-red-900"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+
+      {/* Create/Edit Modal */}
+      {(modalType === 'create' || modalType === 'edit') && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">
+                {modalType === 'create' ? 'Create Profile Section' : 'Edit Profile Section'}
+              </h3>
+            </div>
+            <form onSubmit={modalType === 'create' ? handleCreate : handleUpdate}>
+              <div className="px-6 py-4 space-y-4">
+                {modalError && (
+                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                    <p className="text-red-700 text-sm">{modalError}</p>
+                  </div>
+                )}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Name <span className="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="e.g., Location, Experience, Education"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Description
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                    rows={3}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="Brief description of this section"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Icon (emoji)
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.icon}
+                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
+                    placeholder="e.g., location_on"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Sort Order
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.sortOrder}
+                    onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                  />
+                </div>
+                <div className="flex items-center space-x-6">
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      id="isActive"
+                      checked={formData.isActive}
+                      onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    />
+                    <label htmlFor="isActive" className="ml-2 text-sm text-gray-700">
+                      Active
+                    </label>
+                  </div>
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      id="isGlobal"
+                      checked={formData.isGlobal}
+                      onChange={(e) => setFormData({ ...formData, isGlobal: e.target.checked })}
+                      className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                    />
+                    <label htmlFor="isGlobal" className="ml-2 text-sm text-gray-700">
+                      Global (all agent types)
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+                >
+                  {isSubmitting ? 'Saving...' : modalType === 'create' ? 'Create' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {modalType === 'delete' && selectedSection && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Delete Profile Section</h3>
+            </div>
+            <div className="px-6 py-4">
+              {modalError && (
+                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                  <p className="text-red-700 text-sm">{modalError}</p>
+                </div>
+              )}
+              <p className="text-gray-600">
+                Are you sure you want to delete <span className="font-semibold">{selectedSection.name}</span>?
+              </p>
+              {(selectedSection._count?.fields && selectedSection._count.fields > 0) && (
+                <p className="mt-2 text-amber-600 text-sm">
+                  Warning: This section has {selectedSection._count.fields} field(s). They will also be deleted.
+                </p>
+              )}
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
+              <button
+                onClick={closeModal}
+                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={isSubmitting}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+              >
+                {isSubmitting ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..2a89a48 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,13 +12,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8e56a62..02883b0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -32,6 +32,34 @@ const menuItems = [
       </svg>
     ),
   },
+  {
+    name: 'Agent Types',
+    href: '/dashboard/agent-types',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: 'Profile Sections',
+    href: '/dashboard/profile-sections',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 10h16M4 14h16M4 18h16"
+        />
+      </svg>
+    ),
+  },
 ];
 
 export default function Sidebar() {
diff --git a/src/services/agent-types.service.ts b/src/services/agent-types.service.ts
new file mode 100644
index 0000000..3a3c703
--- /dev/null
+++ b/src/services/agent-types.service.ts
@@ -0,0 +1,66 @@
+import api, { ApiResponse } from './api';
+
+// Types
+export interface AgentType {
+  id: string;
+  name: string;
+  description: string | null;
+  icon: string | null;
+  isActive: boolean;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+  _count?: {
+    agents: number;
+  };
+}
+
+export interface CreateAgentTypeDto {
+  name: string;
+  description?: string;
+  icon?: string;
+  isActive?: boolean;
+  sortOrder?: number;
+}
+
+export interface UpdateAgentTypeDto {
+  name?: string;
+  description?: string;
+  icon?: string;
+  isActive?: boolean;
+  sortOrder?: number;
+}
+
+// Agent Types Service
+class AgentTypesService {
+  private basePath = '/agent-types';
+
+  async getAll(includeInactive = false): Promise<AgentType[]> {
+    const url = includeInactive
+      ? `${this.basePath}?includeInactive=true`
+      : this.basePath;
+    const response = await api.get<ApiResponse<AgentType[]>>(url);
+    return response.data.data;
+  }
+
+  async getById(id: string): Promise<AgentType> {
+    const response = await api.get<ApiResponse<AgentType>>(`${this.basePath}/${id}`);
+    return response.data.data;
+  }
+
+  async create(data: CreateAgentTypeDto): Promise<AgentType> {
+    const response = await api.post<ApiResponse<AgentType>>(this.basePath, data);
+    return response.data.data;
+  }
+
+  async update(id: string, data: UpdateAgentTypeDto): Promise<AgentType> {
+    const response = await api.patch<ApiResponse<AgentType>>(`${this.basePath}/${id}`, data);
+    return response.data.data;
+  }
+
+  async delete(id: string): Promise<void> {
+    await api.delete(`${this.basePath}/${id}`);
+  }
+}
+
+export const agentTypesService = new AgentTypesService();
diff --git a/src/services/index.ts b/src/services/index.ts
index d26a3c0..41d4d33 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -19,3 +19,35 @@ export type {
   UsersListResponse,
   UserFilters,
 } from './users.service';
+
+// Agent Types Service
+export { agentTypesService } from './agent-types.service';
+export type {
+  AgentType,
+  CreateAgentTypeDto,
+  UpdateAgentTypeDto,
+} from './agent-types.service';
+
+// Profile Sections Service
+export { profileSectionsService } from './profile-sections.service';
+export type {
+  ProfileSection,
+  AgentTypeSection,
+  CreateSectionDto,
+  UpdateSectionDto,
+  AssignSectionDto,
+  UpdateAssignmentDto,
+} from './profile-sections.service';
+
+// Profile Fields Service
+export { profileFieldsService, FIELD_TYPES } from './profile-fields.service';
+export type {
+  ProfileField,
+  FieldType,
+  FieldOption,
+  RangeConfig,
+  FieldValidation,
+  FieldUiConfig,
+  CreateFieldDto,
+  UpdateFieldDto,
+} from './profile-fields.service';
diff --git a/src/services/profile-fields.service.ts b/src/services/profile-fields.service.ts
new file mode 100644
index 0000000..fb1247d
--- /dev/null
+++ b/src/services/profile-fields.service.ts
@@ -0,0 +1,166 @@
+import api, { ApiResponse } from './api';
+
+// Field Types - matching backend enum
+export type FieldType =
+  | 'TEXT'
+  | 'TEXTAREA'
+  | 'CHECKBOX'
+  | 'CHECKBOX_GROUP'
+  | 'RADIO'
+  | 'SELECT'
+  | 'MULTI_SELECT'
+  | 'RANGE'
+  | 'NUMBER'
+  | 'DATE'
+  | 'TAG_INPUT';
+
+export const FIELD_TYPES: { value: FieldType; label: string; description: string }[] = [
+  { value: 'TEXT', label: 'Text', description: 'Single line text input' },
+  { value: 'TEXTAREA', label: 'Textarea', description: 'Multi-line text input' },
+  { value: 'NUMBER', label: 'Number', description: 'Numeric input' },
+  { value: 'DATE', label: 'Date', description: 'Date picker' },
+  { value: 'CHECKBOX', label: 'Checkbox', description: 'Single Yes/No checkbox' },
+  { value: 'CHECKBOX_GROUP', label: 'Checkbox Group', description: 'Multiple checkboxes in grid' },
+  { value: 'RADIO', label: 'Radio', description: 'Single choice radio buttons' },
+  { value: 'SELECT', label: 'Select', description: 'Dropdown (select one)' },
+  { value: 'MULTI_SELECT', label: 'Multi Select', description: 'Dropdown (select multiple)' },
+  { value: 'RANGE', label: 'Range', description: 'Range slider (min/max values)' },
+  { value: 'TAG_INPUT', label: 'Tag Input', description: 'Multiple free-form tags' },
+];
+
+// Types
+export interface FieldOption {
+  value: string;
+  label: string;
+}
+
+export interface RangeConfig {
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+}
+
+export interface FieldValidation {
+  min?: number;
+  max?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+}
+
+export interface FieldUiConfig {
+  columns?: number;
+  showInPreview?: boolean;
+  helpText?: string;
+}
+
+export interface ProfileField {
+  id: string;
+  sectionId: string;
+  name: string;
+  slug: string;
+  fieldType: FieldType;
+  description: string | null;
+  placeholder: string | null;
+  defaultValue: string | null;
+  sortOrder: number;
+  isActive: boolean;
+  isRequired: boolean;
+  validation: FieldValidation | null;
+  options: FieldOption[] | null;
+  rangeConfig: RangeConfig | null;
+  uiConfig: FieldUiConfig | null;
+  createdAt: string;
+  updatedAt: string;
+  section?: {
+    id: string;
+    name: string;
+    slug: string;
+  };
+}
+
+export interface CreateFieldDto {
+  sectionId: string;
+  name: string;
+  fieldType: FieldType;
+  description?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  sortOrder?: number;
+  isActive?: boolean;
+  isRequired?: boolean;
+  validation?: FieldValidation;
+  options?: FieldOption[];
+  rangeConfig?: RangeConfig;
+  uiConfig?: FieldUiConfig;
+}
+
+export interface UpdateFieldDto {
+  name?: string;
+  fieldType?: FieldType;
+  description?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  sortOrder?: number;
+  isActive?: boolean;
+  isRequired?: boolean;
+  validation?: FieldValidation;
+  options?: FieldOption[];
+  rangeConfig?: RangeConfig;
+  uiConfig?: FieldUiConfig;
+}
+
+// Profile Fields Service
+class ProfileFieldsService {
+  private basePath = '/profile-fields';
+
+  async getAll(sectionId?: string, includeInactive = false): Promise<ProfileField[]> {
+    const params = new URLSearchParams();
+    if (sectionId) params.append('sectionId', sectionId);
+    if (includeInactive) params.append('includeInactive', 'true');
+
+    const url = params.toString()
+      ? `${this.basePath}?${params.toString()}`
+      : this.basePath;
+    const response = await api.get<ApiResponse<ProfileField[]>>(url);
+    return response.data.data;
+  }
+
+  async getById(id: string): Promise<ProfileField> {
+    const response = await api.get<ApiResponse<ProfileField>>(`${this.basePath}/${id}`);
+    return response.data.data;
+  }
+
+  async create(data: CreateFieldDto): Promise<ProfileField> {
+    const response = await api.post<ApiResponse<ProfileField>>(this.basePath, data);
+    return response.data.data;
+  }
+
+  async update(id: string, data: UpdateFieldDto): Promise<ProfileField> {
+    const response = await api.patch<ApiResponse<ProfileField>>(`${this.basePath}/${id}`, data);
+    return response.data.data;
+  }
+
+  async delete(id: string): Promise<void> {
+    await api.delete(`${this.basePath}/${id}`);
+  }
+
+  async reorderFields(sectionId: string, fieldIds: string[]): Promise<ProfileField[]> {
+    const response = await api.patch<ApiResponse<ProfileField[]>>(
+      `${this.basePath}/section/${sectionId}/reorder`,
+      { fieldIds }
+    );
+    return response.data.data;
+  }
+
+  async bulkUpdateOrder(updates: { id: string; sortOrder: number }[]): Promise<{ success: boolean; updated: number }> {
+    const response = await api.patch<ApiResponse<{ success: boolean; updated: number }>>(
+      `${this.basePath}/bulk/order`,
+      { updates }
+    );
+    return response.data.data;
+  }
+}
+
+export const profileFieldsService = new ProfileFieldsService();
diff --git a/src/services/profile-sections.service.ts b/src/services/profile-sections.service.ts
new file mode 100644
index 0000000..5e1170a
--- /dev/null
+++ b/src/services/profile-sections.service.ts
@@ -0,0 +1,125 @@
+import api, { ApiResponse } from './api';
+import { ProfileField } from './profile-fields.service';
+
+// Types
+export interface ProfileSection {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  icon: string | null;
+  sortOrder: number;
+  isActive: boolean;
+  isGlobal: boolean;
+  createdAt: string;
+  updatedAt: string;
+  fields?: ProfileField[];
+  agentTypeSections?: AgentTypeSection[];
+  _count?: {
+    fields: number;
+    agentTypeSections: number;
+  };
+}
+
+export interface AgentTypeSection {
+  id: string;
+  agentTypeId: string;
+  sectionId: string;
+  sortOrder: number;
+  isRequired: boolean;
+  createdAt: string;
+  updatedAt: string;
+  agentType?: {
+    id: string;
+    name: string;
+  };
+  section?: ProfileSection;
+}
+
+export interface CreateSectionDto {
+  name: string;
+  description?: string;
+  icon?: string;
+  sortOrder?: number;
+  isActive?: boolean;
+  isGlobal?: boolean;
+}
+
+export interface UpdateSectionDto {
+  name?: string;
+  description?: string;
+  icon?: string;
+  sortOrder?: number;
+  isActive?: boolean;
+  isGlobal?: boolean;
+}
+
+export interface AssignSectionDto {
+  agentTypeId: string;
+  sortOrder?: number;
+  isRequired?: boolean;
+}
+
+export interface UpdateAssignmentDto {
+  sortOrder?: number;
+  isRequired?: boolean;
+}
+
+// Profile Sections Service
+class ProfileSectionsService {
+  private basePath = '/profile-sections';
+
+  async getAll(includeInactive = false): Promise<ProfileSection[]> {
+    const url = includeInactive
+      ? `${this.basePath}?includeInactive=true`
+      : this.basePath;
+    const response = await api.get<ApiResponse<ProfileSection[]>>(url);
+    return response.data.data;
+  }
+
+  async getById(id: string): Promise<ProfileSection> {
+    const response = await api.get<ApiResponse<ProfileSection>>(`${this.basePath}/${id}`);
+    return response.data.data;
+  }
+
+  async create(data: CreateSectionDto): Promise<ProfileSection> {
+    const response = await api.post<ApiResponse<ProfileSection>>(this.basePath, data);
+    return response.data.data;
+  }
+
+  async update(id: string, data: UpdateSectionDto): Promise<ProfileSection> {
+    const response = await api.patch<ApiResponse<ProfileSection>>(`${this.basePath}/${id}`, data);
+    return response.data.data;
+  }
+
+  async delete(id: string): Promise<void> {
+    await api.delete(`${this.basePath}/${id}`);
+  }
+
+  // Assignment methods
+  async assignToAgentType(sectionId: string, data: AssignSectionDto): Promise<AgentTypeSection> {
+    const response = await api.post<ApiResponse<AgentTypeSection>>(
+      `${this.basePath}/${sectionId}/assign`,
+      data
+    );
+    return response.data.data;
+  }
+
+  async updateAssignment(
+    sectionId: string,
+    agentTypeId: string,
+    data: UpdateAssignmentDto
+  ): Promise<AgentTypeSection> {
+    const response = await api.patch<ApiResponse<AgentTypeSection>>(
+      `${this.basePath}/${sectionId}/assignment/${agentTypeId}`,
+      data
+    );
+    return response.data.data;
+  }
+
+  async removeFromAgentType(sectionId: string, agentTypeId: string): Promise<void> {
+    await api.delete(`${this.basePath}/${sectionId}/assignment/${agentTypeId}`);
+  }
+}
+
+export const profileSectionsService = new ProfileSectionsService();