feat: add slug field to profile section edit modal and update service DTO

src/app/dashboard/profile-sections/page.tsx

@@ -27,9 +27,10 @@ export default function ProfileSectionsPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [modalError, setModalError] = useState('');
 
-  // Form state
+  // Form state (slug is only editable in the edit modal)
-  const [formData, setFormData] = useState<CreateSectionDto>({
+  const [formData, setFormData] = useState<CreateSectionDto & { slug?: string }>({
     name: '',
+    slug: '',
     description: '',
     icon: '',
     isActive: true,
@@ -62,6 +63,7 @@ export default function ProfileSectionsPage() {
   const openCreateModal = () => {
     setFormData({
       name: '',
+      slug: '',
       description: '',
       icon: '',
       isActive: true,
@@ -77,6 +79,7 @@ export default function ProfileSectionsPage() {
     setSelectedSection(section);
     setFormData({
       name: section.name,
+      slug: section.slug,
       description: section.description || '',
       icon: section.icon || '',
       isActive: section.isActive,
@@ -105,7 +108,10 @@ export default function ProfileSectionsPage() {
     setIsSubmitting(true);
     setModalError('');
     try {
-      await profileSectionsService.create(formData);
+      // Backend auto-generates slug on create; don't send the form slug field
+      const { slug: _slug, ...createPayload } = formData;
+      void _slug;
+      await profileSectionsService.create(createPayload);
       closeModal();
       fetchSections();
     } catch (err) {
@@ -410,6 +416,26 @@ export default function ProfileSectionsPage() {
                     required
                   />
                 </div>
+                {modalType === 'edit' && (
+                  <div>
+                    <label className="block text-sm font-medium text-[#00293d] mb-1">
+                      Slug <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={formData.slug || ''}
+                      onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                      className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666] font-mono text-sm"
+                      placeholder="e.g., basic-information"
+                      pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+                      title="Lowercase letters, digits, and hyphens only (no leading/trailing/consecutive hyphens)"
+                      required
+                    />
+                    <p className="mt-1 text-xs text-[#666666]">
+                      Lowercase letters, digits, and hyphens only. Used in API keys and field references — change with care.
+                    </p>
+                  </div>
+                )}
                 <div>
                   <label className="block text-sm font-medium text-[#00293d] mb-1">
                     Description

src/services/profile-sections.service.ts

@@ -50,6 +50,7 @@ export interface CreateSectionDto {
 
 export interface UpdateSectionDto {
   name?: string;
+  slug?: string;
   description?: string;
   icon?: string;
   sortOrder?: number;