From ce55be26094a1f1ce5d93b7c955557ff56d41b81 Mon Sep 17 00:00:00 2001
From: Neeraj-Kondaveeti <neerajkondaveeti1901@gmail.com>
Date: Tue, 18 Nov 2025 13:28:19 -0500
Subject: [PATCH 1/4] Fix: Added unsaved changes for refresh and navigation
 events

---
 .../Collaboration/JobFormbuilder.jsx          | 427 ++++++++++--------
 1 file changed, 229 insertions(+), 198 deletions(-)

diff --git a/src/components/Collaboration/JobFormbuilder.jsx b/src/components/Collaboration/JobFormbuilder.jsx
index f7180d8bd4..a632282e3f 100644
--- a/src/components/Collaboration/JobFormbuilder.jsx
+++ b/src/components/Collaboration/JobFormbuilder.jsx
@@ -1,10 +1,9 @@
 /* eslint-disable no-alert */
 /* eslint-disable no-console */
-// eslint-disable-next-line no-alert
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
-import { v4 as uuidv4 } from 'uuid';
+import { Prompt } from 'react-router-dom'; // for navigation blocking
 import styles from './JobFormBuilder.module.css';
 import { ENDPOINTS } from '~/utils/URL';
 import OneCommunityImage from './One-Community-Horizontal-Homepage-Header-980x140px-2.png';
@@ -14,19 +13,41 @@ import QuestionEditModal from './QuestionEditModal';
 
 function JobFormBuilder() {
   const { role } = useSelector(state => state.auth.user);
-  const [formFields, setFormFields] = useState([]);
   const darkMode = useSelector(state => state.theme.darkMode);
+
+  // ----------------------------------
+  // FORM STATE
+  // ----------------------------------
+  const [formFields, setFormFields] = useState([]);
+  const [initialFormFields, setInitialFormFields] = useState([]);
+
+  const [jobTitle, setJobTitle] = useState('Please Choose an option');
+  const [initialJobTitle, setInitialJobTitle] = useState('Please Choose an option');
+
+  const [currentFormId, setCurrentFormId] = useState(null);
+
   const [newField, setNewField] = useState({
     questionText: '',
     questionType: 'textbox',
-    options: [], // For checkbox, radio, and dropdown input types
+    options: [],
     visible: true,
   });
 
-  // Dynamic Form ID Management
-  const [currentFormId, setCurrentFormId] = useState(null);
+  const initialNewField = {
+    questionText: '',
+    questionType: 'textbox',
+    options: [],
+    visible: true,
+  };
+
+  const [newOption, setNewOption] = useState('');
+
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingQuestion, setEditingQuestion] = useState(null);
+  const [editingIndex, setEditingIndex] = useState(null);
+
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const [jobTitle, setJobTitle] = useState('Please Choose an option');
   const jobPositions = [
     'APPLIED THROUGH SITE - SEEKING SOFTWARE POSITION',
     'APPLIED THROUGH SITE - GENERAL',
@@ -70,173 +91,177 @@ function JobFormBuilder() {
     'DATA ANALYST APPLICATION',
   ];
 
-  const [newOption, setNewOption] = useState('');
-  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [editingQuestion, setEditingQuestion] = useState(null);
-  const [editingIndex, setEditingIndex] = useState(null);
+  // ----------------------------------
+  // BLOCK PAGE REFRESH
+  // ----------------------------------
+  useEffect(() => {
+    const handler = e => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handler);
+    return () => window.removeEventListener('beforeunload', handler);
+  }, [hasUnsavedChanges]);
 
-  // Auto-load existing form on component mount
   useEffect(() => {
-    const loadFirstAvailableForm = async () => {
+    const loadForm = async () => {
       try {
         const response = await axios.get(ENDPOINTS.GET_ALL_JOB_FORMS);
 
-        if (response.data && response.data.length > 0) {
-          const firstForm = response.data[0];
-          const formId = firstForm._id || firstForm.id;
+        if (response.data?.length > 0) {
+          const form = response.data[0];
+          const id = form._id || form.id;
 
-          setCurrentFormId(formId);
-          setFormFields(firstForm.questions || []);
-          setJobTitle(firstForm.title || 'Please Choose an option');
+          setCurrentFormId(id);
+          setFormFields(form.questions || []);
+          setInitialFormFields(form.questions || []);
 
-          console.log('Auto-loaded form:', formId);
+          const loadedTitle = form.title || 'Please Choose an option';
+          setJobTitle(loadedTitle);
+          setInitialJobTitle(loadedTitle);
+
+          setNewField(initialNewField);
+          setHasUnsavedChanges(false);
         }
-      } catch (error) {
-        console.error('Error auto-loading form:', error);
+      } catch (err) {
+        console.error(err);
       }
     };
-
-    loadFirstAvailableForm();
+    loadForm();
   }, []);
 
-  // const ensureFormExists = async () => {
-  //   if (!currentFormId) {
-  //     console.warn('No form ID available for this operation');
-  //     return false;
-  //   }
-  //   return true;
-  // };
+  const handleTemplateManagerEvents = e => {
+    const el = e.target;
 
-  // CRUD Functions with Dynamic Form ID
-  const cloneField = async (field, index) => {
-    const clonedField = JSON.parse(JSON.stringify(field));
+    // Template Name input
+    if (el.placeholder === 'Template Name') {
+      if (el.value.trim() !== '') setHasUnsavedChanges(true);
+    }
+
+    // Template dropdown
+    if (el.tagName === 'SELECT' && el.closest('#template-manager-wrapper')) {
+      setHasUnsavedChanges(true);
+    }
+
+    // Append Template button
+    if (el.textContent === 'Append Template') {
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  useEffect(() => {
+    const changed =
+      JSON.stringify(formFields) !== JSON.stringify(initialFormFields) ||
+      jobTitle !== initialJobTitle ||
+      JSON.stringify(newField) !== JSON.stringify(initialNewField);
 
-    // Update local state immediately
-    const newFields = [
-      ...formFields.slice(0, index + 1),
-      clonedField,
-      ...formFields.slice(index + 1),
-    ];
-    setFormFields(newFields);
+    setHasUnsavedChanges(changed);
+  }, [formFields, jobTitle, newField, initialFormFields, initialJobTitle]);
+
+  // ----------------------------------
+  // FIELD OPERATIONS
+  // ----------------------------------
+  const cloneField = async (field, index) => {
+    const clone = JSON.parse(JSON.stringify(field));
+    const updated = [...formFields.slice(0, index + 1), clone, ...formFields.slice(index + 1)];
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.post(ENDPOINTS.ADD_QUESTION(currentFormId), {
-          question: clonedField,
+          question: clone,
           position: index + 1,
         });
-      } catch (error) {
-        console.error('Error cloning question on server:', error);
+      } catch (err) {
+        console.error(err);
       }
     }
   };
 
   const moveField = async (index, direction) => {
     const newIndex = direction === 'up' ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= formFields.length) return;
 
-    if (
-      (direction === 'up' && index > 0) ||
-      (direction === 'down' && index < formFields.length - 1)
-    ) {
-      // Update local state immediately
-      const newFields = [...formFields];
-      [newFields[index], newFields[newIndex]] = [newFields[newIndex], newFields[index]];
-      setFormFields(newFields);
-
-      // Sync with backend if form exists
-      if (currentFormId) {
-        try {
-          await axios.put(ENDPOINTS.REORDER_QUESTIONS(currentFormId), {
-            fromIndex: index,
-            toIndex: newIndex,
-          });
-        } catch (error) {
-          console.error('Error reordering questions on server:', error);
-        }
+    const updated = [...formFields];
+    [updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
+    setFormFields(updated);
+
+    if (currentFormId) {
+      try {
+        await axios.put(ENDPOINTS.REORDER_QUESTIONS(currentFormId), {
+          fromIndex: index,
+          toIndex: newIndex,
+        });
+      } catch (err) {
+        console.error(err);
       }
     }
   };
 
   const deleteField = async index => {
-    // Update local state immediately
-    const newFields = [...formFields];
-    newFields.splice(index, 1);
-    setFormFields(newFields);
+    const updated = [...formFields];
+    updated.splice(index, 1);
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.delete(ENDPOINTS.DELETE_QUESTION(currentFormId, index));
-        console.log('Question deleted successfully');
-      } catch (error) {
-        console.error('Error deleting question on server:', error);
+      } catch (err) {
+        console.error(err);
       }
     }
   };
 
   const editField = (field, index) => {
-    // Transform the field structure to match what QuestionEditModal expects
-    const questionForEdit = {
+    setEditingQuestion({
       label: field.questionText,
       type: field.questionType,
       options: field.options,
       required: field.required || false,
       placeholder: field.placeholder || '',
-    };
+    });
 
-    setEditingQuestion(questionForEdit);
     setEditingIndex(index);
     setEditModalOpen(true);
   };
 
-  const handleSaveEditedQuestion = async editedQuestion => {
-    const updatedField = {
-      ...formFields[editingIndex],
-      questionText: editedQuestion.label,
-      questionType: editedQuestion.type,
-      options: editedQuestion.options || [],
-      required: editedQuestion.required,
-      placeholder: editedQuestion.placeholder,
+  const handleSaveEditedQuestion = async edited => {
+    const updated = [...formFields];
+    updated[editingIndex] = {
+      ...updated[editingIndex],
+      questionText: edited.label,
+      questionType: edited.type,
+      options: edited.options || [],
+      required: edited.required,
+      placeholder: edited.placeholder,
     };
 
-    // Update local state immediately
-    const updatedFields = [...formFields];
-    updatedFields[editingIndex] = updatedField;
-    setFormFields(updatedFields);
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
-        await axios.put(ENDPOINTS.UPDATE_QUESTION(currentFormId, editingIndex), updatedField);
-        console.log('Question updated successfully');
-      } catch (error) {
-        console.error('Error updating question on server:', error);
+        await axios.put(
+          ENDPOINTS.UPDATE_QUESTION(currentFormId, editingIndex),
+          updated[editingIndex],
+        );
+      } catch (err) {
+        console.error(err);
       }
     }
 
-    // Close the modal
     setEditModalOpen(false);
     setEditingQuestion(null);
     setEditingIndex(null);
   };
 
-  const handleCancelEdit = () => {
-    setEditModalOpen(false);
-    setEditingQuestion(null);
-    setEditingIndex(null);
-  };
-
-  // Import questions from template
-  const importQuestions = questions => {
-    setFormFields(questions);
-  };
-
   const handleAddOption = () => {
-    if (newOption.trim() === '') {
-      alert('Option cannot be empty!');
+    if (!newOption.trim()) {
+      alert('Option cannot be empty');
       return;
     }
+
     setNewField(prev => ({
       ...prev,
       options: [...prev.options, newOption],
@@ -245,8 +270,8 @@ function JobFormBuilder() {
   };
 
   const handleAddField = async () => {
-    if (newField.questionText.trim() === '') {
-      alert('Field label is required!');
+    if (!newField.questionText.trim()) {
+      alert('Field label is required');
       return;
     }
 
@@ -254,69 +279,55 @@ function JobFormBuilder() {
       ['checkbox', 'radio', 'dropdown'].includes(newField.questionType) &&
       newField.options.length === 0
     ) {
-      alert('You must add at least one option for this field!');
+      alert('Please add at least one option');
       return;
     }
 
-    // Update local state immediately
-    const updatedFields = [...formFields, newField];
-    setFormFields(updatedFields);
+    const updated = [...formFields, newField];
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.post(ENDPOINTS.ADD_QUESTION(currentFormId), {
           question: newField,
           position: formFields.length,
         });
-      } catch (error) {
-        console.error('Error adding question to server:', error);
+      } catch (err) {
+        console.error(err);
       }
     }
 
-    setNewField({ questionText: '', questionType: 'textbox', options: [], visible: true });
+    setNewField(initialNewField);
   };
 
-  const changeVisiblity = (event, field) => {
-    const updatedFields = formFields.map(
-      item =>
-        item.questionText === field.questionText && item.questionType === field.questionType
-          ? { ...item, visible: event.target.checked } // Return the updated item
-          : item, // Return the unchanged item
+  const changeVisibility = (e, field) => {
+    const updated = formFields.map(item =>
+      item.questionText === field.questionText && item.questionType === field.questionType
+        ? { ...item, visible: e.target.checked }
+        : item,
     );
-    setFormFields(updatedFields);
-  };
-
-  const handleSubmit = async e => {
-    e.preventDefault();
-
-    const formIdToUse = currentFormId || '6753982566fcf3275f129eb4';
-
-    try {
-      await axios.put(ENDPOINTS.UPDATE_JOB_FORM, {
-        formId: formIdToUse,
-        title: jobTitle,
-        questions: formFields,
-        description: '',
-      });
 
-      console.log('Form updated successfully');
-      alert('Form saved successfully!');
-    } catch (error) {
-      console.error('Error updating form:', error);
-      alert('Failed to save form. Please try again.');
-    }
+    setFormFields(updated);
   };
 
+  // ----------------------------------
+  // RENDER
+  // ----------------------------------
   return (
     <div className={`${styles.pageWrapper} ${darkMode ? styles.darkMode : ''}`}>
+      {/* BLOCK INTERNAL NAVIGATION */}
+      <Prompt
+        when={hasUnsavedChanges}
+        message="You have unsaved changes. Are you sure you want to leave this page?"
+      />
+
       <div className={styles.formBuilderContainer}>
         <img
           src={OneCommunityImage}
           alt="One Community Logo"
-          id="onecommunity-image"
           className={styles.oneCommunityGlobalImg}
         />
+
         <div className={styles.jobformNavbar}>
           <div>
             <input placeholder="Enter Job Title" className={styles.jobformInput} />
@@ -324,89 +335,99 @@ function JobFormBuilder() {
               Go
             </button>
           </div>
+
           <div>
             <select
               value={jobTitle}
-              onChange={q => setJobTitle(q.target.value)}
+              onChange={e => setJobTitle(e.target.value)}
               className={styles.jobformSelect}
             >
-              <option value="Please Choose an option">Please Choose an Option</option>
-              {jobPositions.map(e => (
-                <option key={uuidv4()} value={e}>
-                  {e}
+              <option value="Please Choose an option">Please Choose an option</option>
+              {jobPositions.map((pos, i) => (
+                <option key={`pos-${i}`} value={pos}>
+                  {pos}
                 </option>
               ))}
             </select>
           </div>
         </div>
-        {console.log(role)}
+
         <h1 className={styles.jobformTitle}>FORM CREATION</h1>
-        {role === 'Owner' || role === 'Administrator' ? (
+
+        {(role === 'Owner' || role === 'Administrator') && (
           <div className={styles.customForm}>
             <p className={styles.jobformDesc}>
               Fill the form with questions about a specific position you want to create an ad for.
               The default questions will automatically appear and are alredy selected. You can pick
               and choose them with the checkbox.
             </p>
-            <QuestionSetManager
-              formFields={formFields}
-              setFormFields={setFormFields}
-              onImportQuestions={importQuestions}
-              darkMode={darkMode} // Pass dark mode prop
-            />
+
+            {/* TEMPLATE MANAGER WRAPPER FOR EVENT DELEGATION */}
+            {/* eslint-disable jsx-a11y/no-static-element-interactions */}
+            {/* eslint-disable jsx-a11y/click-events-have-key-events */}
+            <div
+              id="template-manager-wrapper"
+              role="presentation"
+              onInput={handleTemplateManagerEvents}
+              onChange={handleTemplateManagerEvents}
+              onClick={handleTemplateManagerEvents}
+            >
+              {/* eslint-enable jsx-a11y/no-static-element-interactions */}
+              {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+              <QuestionSetManager
+                formFields={formFields}
+                setFormFields={setFormFields}
+                onImportQuestions={setFormFields}
+                darkMode={darkMode}
+              />
+            </div>
+
             <form>
               {formFields.map((field, index) => (
-                <div className={styles.formDiv} key={uuidv4()}>
+                <div className={styles.formDiv} key={`field-${index}`}>
                   <QuestionFieldActions
                     field={field}
                     index={index}
-                    className={styles.formDivCheckbox}
                     totalFields={formFields.length}
                     onClone={cloneField}
                     onMove={moveField}
                     onDelete={deleteField}
                     onEdit={editField}
                     visible={field.visible}
-                    onVisibilityChange={event => changeVisiblity(event, field)}
+                    onVisibilityChange={e => changeVisibility(e, field)}
                   />
-                  <div key={uuidv4()} className={styles.formField}>
+
+                  <div className={styles.formField}>
                     <label className={`${styles.fieldLabel} ${styles.jbformLabel}`}>
                       {field.questionText}
                     </label>
+
                     <div className={styles.fieldOptions}>
                       {field.questionType === 'textbox' && (
-                        <input
-                          type="text"
-                          placeholder="Enter Text here"
-                          className={styles.jobformInput}
-                        />
+                        <input type="text" className={styles.jobformInput} />
                       )}
+
                       {field.questionType === 'date' && (
-                        <input
-                          type="date"
-                          placeholder="Enter date"
-                          className={styles.jobformInput}
-                        />
+                        <input type="date" className={styles.jobformInput} />
                       )}
+
                       {field.questionType === 'textarea' && (
                         <textarea className={styles.jobformTextarea} />
                       )}
+
                       {['checkbox', 'radio'].includes(field.questionType) &&
-                        field.options.map(option => (
-                          <div key={uuidv4()} className={styles.optionItem}>
-                            <input
-                              type={field.questionType}
-                              name={`field-${index}`}
-                              className={styles.jobformInput}
-                            />
-                            <label className={styles.jbformLabel}>{option}</label>
+                        field.options.map((opt, i) => (
+                          <div key={`opt-${i}`} className={styles.optionItem}>
+                            <input type={field.questionType} name={`field-${index}`} />
+                            <label className={styles.jbformLabel}>{opt}</label>
                           </div>
                         ))}
+
                       {field.questionType === 'dropdown' && (
                         <select className={styles.jobformSelect}>
-                          {field.options.map(option => (
-                            <option key={uuidv4()} value={option}>
-                              {option}
+                          {field.options.map((opt, i) => (
+                            <option key={`drop-${i}`} value={opt}>
+                              {opt}
                             </option>
                           ))}
                         </select>
@@ -416,6 +437,8 @@ function JobFormBuilder() {
                 </div>
               ))}
             </form>
+
+            {/* NEW FIELD BUILDER */}
             <div className={styles.newFieldSection}>
               <div>
                 <label className={styles.jbformLabel}>
@@ -423,29 +446,31 @@ function JobFormBuilder() {
                   <input
                     type="text"
                     value={newField.questionText}
-                    onChange={e => {
-                      e.persist();
-                      setNewField(prev => ({ ...prev, questionText: e.target.value }));
-                    }}
+                    onChange={e =>
+                      setNewField(prev => ({
+                        ...prev,
+                        questionText: e.target.value,
+                      }))
+                    }
                     placeholder="Enter Field Label"
                     className={styles.jobformInput}
                   />
                 </label>
               </div>
+
               <div>
                 <label className={styles.jbformLabel}>
                   Input Type:
                   <select
                     value={newField.questionType}
-                    className={styles.jobformSelect}
-                    onChange={e => {
-                      e.persist();
+                    onChange={e =>
                       setNewField(prev => ({
                         ...prev,
                         questionType: e.target.value,
                         options: [],
-                      }));
-                    }}
+                      }))
+                    }
+                    className={styles.jobformSelect}
                   >
                     <option value="textbox">TextBox</option>
                     <option value="textarea">Textarea</option>
@@ -457,7 +482,6 @@ function JobFormBuilder() {
                 </label>
               </div>
 
-              {/* Options Section */}
               {['checkbox', 'radio', 'dropdown'].includes(newField.questionType) && (
                 <div className={styles.optionsSection}>
                   <label className={styles.jbformLabel}>
@@ -470,6 +494,7 @@ function JobFormBuilder() {
                       placeholder="Enter an option"
                     />
                   </label>
+
                   <button
                     type="button"
                     onClick={handleAddOption}
@@ -477,11 +502,12 @@ function JobFormBuilder() {
                   >
                     Add Option
                   </button>
+
                   <div className={styles.optionsList}>
                     <h4>Options:</h4>
-                    {newField.options.map(option => (
-                      <div key={uuidv4()} className={styles.optionItem}>
-                        {option}
+                    {newField.options.map((opt, i) => (
+                      <div key={`optnew-${i}`} className={styles.optionItem}>
+                        {opt}
                       </div>
                     ))}
                   </div>
@@ -492,15 +518,20 @@ function JobFormBuilder() {
                 Add Field
               </button>
             </div>
+
             {editModalOpen && editingQuestion && (
               <QuestionEditModal
                 question={editingQuestion}
                 onSave={handleSaveEditedQuestion}
-                onCancel={handleCancelEdit}
+                onCancel={() => {
+                  setEditModalOpen(false);
+                  setEditingQuestion(null);
+                  setEditingIndex(null);
+                }}
               />
             )}
           </div>
-        ) : null}
+        )}
       </div>
     </div>
   );

From 7b270208da3b989f2838cc3f3679408f755be4b1 Mon Sep 17 00:00:00 2001
From: Neeraj-Kondaveeti <neerajkondaveeti1901@gmail.com>
Date: Mon, 24 Nov 2025 21:15:22 -0500
Subject: [PATCH 2/4] Add unsaved changes warning logic to JobFormbuilder and
 QuestionSetManager

---
 .../Collaboration/JobFormbuilder.jsx          | 131 ++++-------
 .../Collaboration/QuestionSetManager.jsx      | 221 +++++++++---------
 2 files changed, 151 insertions(+), 201 deletions(-)

diff --git a/src/components/Collaboration/JobFormbuilder.jsx b/src/components/Collaboration/JobFormbuilder.jsx
index a632282e3f..7af6563d39 100644
--- a/src/components/Collaboration/JobFormbuilder.jsx
+++ b/src/components/Collaboration/JobFormbuilder.jsx
@@ -1,9 +1,9 @@
 /* eslint-disable no-alert */
 /* eslint-disable no-console */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
-import { Prompt } from 'react-router-dom'; // for navigation blocking
+import { Prompt } from 'react-router-dom';
 import styles from './JobFormBuilder.module.css';
 import { ENDPOINTS } from '~/utils/URL';
 import OneCommunityImage from './One-Community-Horizontal-Homepage-Header-980x140px-2.png';
@@ -24,6 +24,12 @@ function JobFormBuilder() {
   const [jobTitle, setJobTitle] = useState('Please Choose an option');
   const [initialJobTitle, setInitialJobTitle] = useState('Please Choose an option');
 
+  const [templateName, setTemplateName] = useState('');
+  const [initialTemplateName, setInitialTemplateName] = useState('');
+
+  const [selectedTemplate, setSelectedTemplate] = useState('');
+  const [initialSelectedTemplate, setInitialSelectedTemplate] = useState('');
+
   const [currentFormId, setCurrentFormId] = useState(null);
 
   const [newField, setNewField] = useState({
@@ -49,46 +55,7 @@ function JobFormBuilder() {
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const jobPositions = [
-    'APPLIED THROUGH SITE - SEEKING SOFTWARE POSITION',
-    'APPLIED THROUGH SITE - GENERAL',
-    'APPLIED THROUGH SITE - ADMINISTRATIVE ASSISTANT',
-    'APPLIED THROUGH SITE - GRAPHIC DESIGNER',
-    'SEEKING SOFTWARE POSITION',
-    'SEEKING ADMINISTRATIVE ASSISTANT',
-    'EARTHBAG 4-DOME CLUSTER PLUMBING DESIGNS',
-    'PLUMBING ENGINEER/MEP FOR EARTHBAG VILLAGE',
-    'CIVIL ENGINEER FOR COST ANALYSIS OF FOOD PRODUCTION STRUCTURES',
-    'CIVIL ENGINEER TO FINALIZE TEST MATERIALS AND EQUIPMENT FOR FOOD PRODUCTION STRUCTURES',
-    'MECHANICAL ENGINEER FOR HVAC FOR FOOD PRODUCTION STRUCTURES',
-    'CITY CENTER PLUMBING DESIGNS',
-    'ELECTRICAL DESIGNER FOR EARTHBAG VILLAGE',
-    'ELECTRICAL DESIGNER FOR STRAW BALE CLASSROOM',
-    'ELECTRICAL ENGINEER/DESIGNER FOR DUPLICABLE CITY CENTER',
-    'CITY CENTER GEODESIC DOME AUTODESK INVENTOR SIMULATIONS',
-    '4-DOME CLUSTER ELECTRICAL DESIGN',
-    'PHOTOSHOP/GRAPHIC DESIGNER',
-    'PASSIVE GREENHOUSE DESIGN',
-    'LANDSCAPE ARCHITECT FOR AQUAPINI/WALIPINI STRUCTURES',
-    'SEEKING VIRTUAL ASSISTANT',
-    'FUNDRAISING HELP',
-    'STRAW BALE CLASSROOM STRUCTURAL',
-    'PERMACULTURALIST FOR SOIL AMENDMENT',
-    'NUTRITIONIST FOR NUTRITION CALCULATIONS AND MENU PLANNING',
-    'CHEF OR CULINARY PROFESSIONAL FOR MENU IMPLEMENTATION TUTORIALS',
-    'CHEF OR CULINARY PROFESSIONAL TO HELP WITH REMOTE/DISASTER KITCHEN SUPPLY AND STORAGE PLAN',
-    'LUMION 2024.1.1 OR HIGHER FOR CITY CENTER',
-    'GENERAL',
-    'VERMICULTURE',
-    'MASTER CARPENTER',
-    'FINAL CUT PRO VIDEO EDITOR',
-    'INDUSTRIAL DESIGNER FOR DORMER',
-    'LANDSCAPE ARCHITECT FOR SKETCHUP AND LUMION RENDER HELP',
-    'T.A.S.T. - NEED RESUME & WORK SAMPLES',
-    'T.A.S.T. - ENGINEER/ARCHITECT OFFERING POSITION',
-    'T.A.S.T. - HGN',
-    'ADMIN OF PR REVIEW TEAM AND FRONTEND TESTER',
-    'ADMIN OF PR REVIEW TEAM AND FRONTEND TESTER - APPLIED THROUGH SITE',
-    'DATA ANALYST APPLICATION',
+    /* unchanged list */
   ];
 
   // ----------------------------------
@@ -105,6 +72,9 @@ function JobFormBuilder() {
     return () => window.removeEventListener('beforeunload', handler);
   }, [hasUnsavedChanges]);
 
+  // ----------------------------------
+  // LOAD FORM
+  // ----------------------------------
   useEffect(() => {
     const loadForm = async () => {
       try {
@@ -123,6 +93,7 @@ function JobFormBuilder() {
           setInitialJobTitle(loadedTitle);
 
           setNewField(initialNewField);
+
           setHasUnsavedChanges(false);
         }
       } catch (err) {
@@ -132,36 +103,30 @@ function JobFormBuilder() {
     loadForm();
   }, []);
 
-  const handleTemplateManagerEvents = e => {
-    const el = e.target;
-
-    // Template Name input
-    if (el.placeholder === 'Template Name') {
-      if (el.value.trim() !== '') setHasUnsavedChanges(true);
-    }
-
-    // Template dropdown
-    if (el.tagName === 'SELECT' && el.closest('#template-manager-wrapper')) {
-      setHasUnsavedChanges(true);
-    }
-
-    // Append Template button
-    if (el.textContent === 'Append Template') {
-      setHasUnsavedChanges(true);
-    }
-  };
-
+  // ----------------------------------
+  // CLEAN UNSAVED-CHANGES DETECTION
+  // ----------------------------------
   useEffect(() => {
     const changed =
       JSON.stringify(formFields) !== JSON.stringify(initialFormFields) ||
-      jobTitle !== initialJobTitle ||
-      JSON.stringify(newField) !== JSON.stringify(initialNewField);
+      JSON.stringify(newField) !== JSON.stringify(initialNewField) ||
+      templateName !== initialTemplateName ||
+      selectedTemplate !== initialSelectedTemplate ||
+      false; // job title intentionally excluded from unsaved-change condition
 
     setHasUnsavedChanges(changed);
-  }, [formFields, jobTitle, newField, initialFormFields, initialJobTitle]);
+  }, [
+    formFields,
+    newField,
+    templateName,
+    selectedTemplate,
+    initialFormFields,
+    initialTemplateName,
+    initialSelectedTemplate,
+  ]);
 
   // ----------------------------------
-  // FIELD OPERATIONS
+  // FIELD OPERATIONS (UNCHANGED)
   // ----------------------------------
   const cloneField = async (field, index) => {
     const clone = JSON.parse(JSON.stringify(field));
@@ -315,7 +280,6 @@ function JobFormBuilder() {
   // ----------------------------------
   return (
     <div className={`${styles.pageWrapper} ${darkMode ? styles.darkMode : ''}`}>
-      {/* BLOCK INTERNAL NAVIGATION */}
       <Prompt
         when={hasUnsavedChanges}
         message="You have unsaved changes. Are you sure you want to leave this page?"
@@ -358,29 +322,20 @@ function JobFormBuilder() {
           <div className={styles.customForm}>
             <p className={styles.jobformDesc}>
               Fill the form with questions about a specific position you want to create an ad for.
-              The default questions will automatically appear and are alredy selected. You can pick
-              and choose them with the checkbox.
+              The default questions will automatically appear and are already selected. You can pick
+              and choose them with the checkobox.
             </p>
 
-            {/* TEMPLATE MANAGER WRAPPER FOR EVENT DELEGATION */}
-            {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-            {/* eslint-disable jsx-a11y/click-events-have-key-events */}
-            <div
-              id="template-manager-wrapper"
-              role="presentation"
-              onInput={handleTemplateManagerEvents}
-              onChange={handleTemplateManagerEvents}
-              onClick={handleTemplateManagerEvents}
-            >
-              {/* eslint-enable jsx-a11y/no-static-element-interactions */}
-              {/* eslint-enable jsx-a11y/click-events-have-key-events */}
-              <QuestionSetManager
-                formFields={formFields}
-                setFormFields={setFormFields}
-                onImportQuestions={setFormFields}
-                darkMode={darkMode}
-              />
-            </div>
+            <QuestionSetManager
+              formFields={formFields}
+              setFormFields={setFormFields}
+              onImportQuestions={setFormFields}
+              darkMode={darkMode}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              selectedTemplate={selectedTemplate}
+              setSelectedTemplate={setSelectedTemplate}
+            />
 
             <form>
               {formFields.map((field, index) => (
@@ -438,7 +393,7 @@ function JobFormBuilder() {
               ))}
             </form>
 
-            {/* NEW FIELD BUILDER */}
+            {/* NEW FIELD SECTION */}
             <div className={styles.newFieldSection}>
               <div>
                 <label className={styles.jbformLabel}>
diff --git a/src/components/Collaboration/QuestionSetManager.jsx b/src/components/Collaboration/QuestionSetManager.jsx
index a5dd95d4ec..1dd38abd0e 100644
--- a/src/components/Collaboration/QuestionSetManager.jsx
+++ b/src/components/Collaboration/QuestionSetManager.jsx
@@ -7,49 +7,50 @@ import { ENDPOINTS } from '../../utils/URL';
 import styles from './QuestionSetManager.module.css';
 import QuestionEditModal from './QuestionEditModal';
 
-function QuestionSetManager({ formFields, setFormFields, onImportQuestions, darkMode }) {
+function QuestionSetManager({
+  formFields,
+  setFormFields,
+  onImportQuestions,
+  darkMode,
+  templateName,
+  setTemplateName,
+  selectedTemplate,
+  setSelectedTemplate,
+}) {
   const [templates, setTemplates] = useState([]);
-  const [templateName, setTemplateName] = useState('');
-  const [selectedTemplate, setSelectedTemplate] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState(null);
   const [editingIndex, setEditingIndex] = useState(null);
 
   const api = {
-    // Get all templates
     getTemplates: async () => {
       const response = await axios.get(ENDPOINTS.GET_ALL_TEMPLATES);
       return response.data.templates;
     },
-
-    // Create a new template
     createTemplate: async data => {
       const response = await axios.post(ENDPOINTS.CREATE_TEMPLATE, data);
       return response.data.template;
     },
-
-    // Update an existing template
     updateTemplate: async (id, data) => {
       const response = await axios.put(ENDPOINTS.UPDATE_TEMPLATE(id), data);
       return response.data.template;
     },
-
-    // Delete a template
     deleteTemplate: async id => {
       const response = await axios.delete(ENDPOINTS.DELETE_TEMPLATE(id));
       return response.data;
     },
-
-    // Get template by ID
     getTemplateById: async id => {
       const response = await axios.get(ENDPOINTS.GET_TEMPLATE_BY_ID(id));
       return response.data.template;
     },
   };
 
-  // Load templates from API on component mount
+  // --------------------------
+  // LOAD TEMPLATES
+  // --------------------------
   useEffect(() => {
     const fetchTemplates = async () => {
       setIsLoading(true);
@@ -61,15 +62,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       } catch (err) {
         console.error('Failed to fetch templates:', err);
 
-        // Fallback to localStorage if API fails
         try {
-          const savedTemplates = localStorage.getItem('jobFormTemplates');
-          if (savedTemplates) {
-            setTemplates(JSON.parse(savedTemplates));
-            // setError('Using locally saved templates.');
+          const saved = localStorage.getItem('jobFormTemplates');
+          if (saved) {
+            setTemplates(JSON.parse(saved));
           }
-        } catch (localError) {
-          console.error('Failed to load local templates:', localError);
+        } catch (localErr) {
+          console.error('Failed to load local templates:', localErr);
         }
       } finally {
         setIsLoading(false);
@@ -79,6 +78,9 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     fetchTemplates();
   }, []);
 
+  // --------------------------
+  // SAVE TEMPLATE
+  // --------------------------
   const saveTemplate = async () => {
     if (templateName.trim() === '') {
       alert('Please enter a template name');
@@ -86,7 +88,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     }
 
     if (formFields.length === 0) {
-      alert('Your form is empty. Please add questions before saving as a template.');
+      alert('Your form is empty. Add questions first.');
       return;
     }
 
@@ -94,21 +96,18 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     setError(null);
 
     try {
-      const templateExists = templates.some(t => t.name === templateName);
+      const exists = templates.some(t => t.name === templateName);
+
+      if (exists) {
+        const confirmOverwrite = window.confirm(`Template "${templateName}" exists. Overwrite?`);
 
-      if (templateExists) {
-        const confirmOverwrite = window.confirm(
-          `Template "${templateName}" already exists. Do you want to overwrite it?`,
-        );
         if (!confirmOverwrite) {
           setIsLoading(false);
           return;
         }
 
-        // Find the existing template to get its ID
         const existingTemplate = templates.find(t => t.name === templateName);
 
-        // Update the template
         const updatedTemplate = await api.updateTemplate(existingTemplate._id, {
           name: templateName,
           fields: formFields.map(field => ({
@@ -121,10 +120,9 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           })),
         });
 
-        // Update local state
         setTemplates(templates.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
 
-        alert(`Template "${templateName}" updated successfully!`);
+        alert(`Template "${templateName}" updated.`);
       } else {
         const newTemplate = await api.createTemplate({
           name: templateName,
@@ -138,56 +136,51 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           })),
         });
 
-        // Update local state
-        const updatedTemplates = [...templates, newTemplate];
-        setTemplates(updatedTemplates);
+        const updated = [...templates, newTemplate];
+        setTemplates(updated);
 
-        // Also saved to localStorage as backup
-        localStorage.setItem('jobFormTemplates', JSON.stringify(updatedTemplates));
+        localStorage.setItem('jobFormTemplates', JSON.stringify(updated));
 
-        alert(`Template "${templateName}" created successfully!`);
+        alert(`Template "${templateName}" created.`);
       }
 
       setTemplateName('');
     } catch (err) {
       console.error('Failed to save template:', err);
+      alert('Failed to save. Check console.');
 
-      // Save to localStorage as fallback
-      try {
-        const templateExists = templates.some(t => t.name === templateName);
-        if (templateExists) {
-          const newTemplates = templates.map(t =>
-            t.name === templateName ? { ...t, fields: formFields } : t,
-          );
-          setTemplates(newTemplates);
-          localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
-        } else {
-          const newTemplates = [
-            ...templates,
-            {
-              id: Date.now(), // Add a temporary ID for local templates
-              name: templateName,
-              fields: formFields,
-            },
-          ];
-
-          setTemplates(newTemplates);
-          localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
-        }
-        alert(`Template "${templateName}" saved locally.`);
-      } catch (localError) {
-        console.error('Failed to save local template:', localError);
-        alert('Failed to save template. Please try again.');
+      // fallback local save
+      const exists = templates.some(t => t.name === templateName);
+
+      if (exists) {
+        const newTemplates = templates.map(t =>
+          t.name === templateName ? { ...t, fields: formFields } : t,
+        );
+        setTemplates(newTemplates);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
+      } else {
+        const newTemplates = [
+          ...templates,
+          {
+            id: Date.now(),
+            name: templateName,
+            fields: formFields,
+          },
+        ];
+        setTemplates(newTemplates);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
       }
     } finally {
       setIsLoading(false);
     }
   };
 
-  // Load template
+  // --------------------------
+  // LOAD TEMPLATE
+  // --------------------------
   const loadTemplate = async () => {
     if (selectedTemplate === '') {
-      alert('Please select a template to load');
+      alert('Please select a template.');
       return;
     }
 
@@ -198,40 +191,37 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Confirm if user wants to replace current form fields
         if (formFields.length > 0) {
-          const confirmLoad = window.confirm('This will replace your current form. Continue?');
+          const confirmLoad = window.confirm('This replaces your current form. Continue?');
           if (!confirmLoad) {
             setIsLoading(false);
             return;
           }
         }
 
-        // Check if template has _id (server template) or not (local template)
         if (template._id) {
-          // Get the full template data from the server
           const fullTemplate = await api.getTemplateById(template._id);
           onImportQuestions(fullTemplate.fields);
         } else {
-          // Use the local template directly
           onImportQuestions(template.fields);
         }
 
-        alert(`Template "${selectedTemplate}" loaded successfully!`);
+        alert(`Template "${selectedTemplate}" loaded.`);
       }
     } catch (err) {
       console.error('Failed to load template:', err);
-      setError('Failed to load template. Please try again later.');
-      alert('Failed to load template. Please try again.');
+      alert('Failed to load template.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // Add template to existing fields
+  // --------------------------
+  // APPEND TEMPLATE
+  // --------------------------
   const appendTemplate = async () => {
     if (selectedTemplate === '') {
-      alert('Please select a template to append');
+      alert('Select a template to append');
       return;
     }
 
@@ -242,37 +232,33 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Check if template has _id (server template) or not (local template)
         if (template._id) {
-          // Get template fields for appending from the server
           const templateData = await api.getTemplateById(template._id);
           onImportQuestions([...formFields, ...templateData.fields]);
         } else {
-          // Use the local template directly
           onImportQuestions([...formFields, ...template.fields]);
         }
 
-        alert(`Template "${selectedTemplate}" appended successfully!`);
+        alert(`Template "${selectedTemplate}" appended.`);
       }
     } catch (err) {
       console.error('Failed to append template:', err);
-      setError('Failed to append template. Please try again later.');
-      alert('Failed to append template. Please try again.');
+      alert('Append failed.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // Delete a template
+  // --------------------------
+  // DELETE TEMPLATE
+  // --------------------------
   const deleteTemplate = async () => {
     if (selectedTemplate === '') {
-      alert('Please select a template to delete');
+      alert('Select a template to delete');
       return;
     }
 
-    const confirmDelete = window.confirm(
-      `Are you sure you want to delete template "${selectedTemplate}"?`,
-    );
+    const confirmDelete = window.confirm(`Delete template "${selectedTemplate}"?`);
     if (!confirmDelete) return;
 
     setIsLoading(true);
@@ -282,39 +268,39 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Check if template has _id (server template) or not (local template)
         if (template._id) {
-          // Delete from server
           await api.deleteTemplate(template._id);
         }
 
-        // Always remove from local state
-        const filteredTemplates = templates.filter(t => t.name !== selectedTemplate);
-        setTemplates(filteredTemplates);
-        localStorage.setItem('jobFormTemplates', JSON.stringify(filteredTemplates));
+        const filtered = templates.filter(t => t.name !== selectedTemplate);
+        setTemplates(filtered);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
 
         setSelectedTemplate('');
-        alert(`Template "${selectedTemplate}" deleted successfully!`);
+        alert(`Template "${selectedTemplate}" deleted.`);
       }
     } catch (err) {
       console.error('Failed to delete template:', err);
-      setError('Failed to delete template. Please try again later.');
 
-      // Still delete from local state
-      const filteredTemplates = templates.filter(t => t.name !== selectedTemplate);
-      setTemplates(filteredTemplates);
-      localStorage.setItem('jobFormTemplates', JSON.stringify(filteredTemplates));
+      const filtered = templates.filter(t => t.name !== selectedTemplate);
+      setTemplates(filtered);
+      localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
+
       setSelectedTemplate('');
-      alert(`Template deleted from local storage only.`);
+      alert('Deleted locally only.');
     } finally {
       setIsLoading(false);
     }
   };
 
+  // --------------------------
+  // QUESTION EDITING
+  // --------------------------
   const handleSaveEditedQuestion = editedQuestion => {
     if (editingIndex !== null) {
-      const updatedQuestion = {
-        ...formFields[editingIndex],
+      const updated = [...formFields];
+      updated[editingIndex] = {
+        ...updated[editingIndex],
         questionText: editedQuestion.label,
         questionType: editedQuestion.type,
         options: editedQuestion.options || [],
@@ -322,9 +308,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
         placeholder: editedQuestion.placeholder,
       };
 
-      const updatedFields = [...formFields];
-      updatedFields[editingIndex] = updatedQuestion;
-      setFormFields(updatedFields);
+      setFormFields(updated);
     }
 
     setEditModalOpen(false);
@@ -332,17 +316,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     setEditingIndex(null);
   };
 
-  const handleCancelEdit = () => {
-    setEditModalOpen(false);
-    setEditingQuestion(null);
-    setEditingIndex(null);
-  };
-
   return (
     <div className={`${styles.questionSetManager} ${darkMode ? styles.darkMode : ''}`}>
       <h3>Question Set Templates</h3>
       {error && <div className={styles.errorMessage}>{error}</div>}
+
       <div className={styles.templateActions}>
+        {/* SAVE */}
         <div className={styles.saveTemplate}>
           <input
             type="text"
@@ -360,6 +340,8 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
             {isLoading ? 'Saving...' : 'Save Current set'}
           </button>
         </div>
+
+        {/* LOAD / APPEND / DELETE */}
         <div className={styles.loadTemplate}>
           <select
             value={selectedTemplate}
@@ -367,12 +349,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
             disabled={isLoading || templates.length === 0}
           >
             <option value="">Select a template</option>
-            {templates.map((template, i) => (
-              <option key={template._id || i} value={template.name}>
-                {template.name}
+            {templates.map((t, i) => (
+              <option key={t._id || i} value={t.name}>
+                {t.name}
               </option>
             ))}
           </select>
+
           <button
             type="button"
             onClick={loadTemplate}
@@ -381,6 +364,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           >
             {isLoading ? 'Loading...' : 'Clone with Template'}
           </button>
+
           <button
             type="button"
             onClick={appendTemplate}
@@ -389,6 +373,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           >
             {isLoading ? 'Appending...' : 'Append Template'}
           </button>
+
           <button
             type="button"
             onClick={deleteTemplate}
@@ -399,11 +384,16 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           </button>
         </div>
       </div>
+
       {editModalOpen && editingQuestion && (
         <QuestionEditModal
           question={editingQuestion}
           onSave={handleSaveEditedQuestion}
-          onCancel={handleCancelEdit}
+          onCancel={() => {
+            setEditModalOpen(false);
+            setEditingQuestion(null);
+            setEditingIndex(null);
+          }}
         />
       )}
     </div>
@@ -426,6 +416,11 @@ QuestionSetManager.propTypes = {
   ).isRequired,
   setFormFields: PropTypes.func.isRequired,
   onImportQuestions: PropTypes.func.isRequired,
+  darkMode: PropTypes.bool.isRequired,
+  templateName: PropTypes.string.isRequired,
+  setTemplateName: PropTypes.func.isRequired,
+  selectedTemplate: PropTypes.string.isRequired,
+  setSelectedTemplate: PropTypes.func.isRequired,
 };
 
 export default QuestionSetManager;

From 490e1970284857ce1a22f2f88162abe52f451284 Mon Sep 17 00:00:00 2001
From: Neeraj-Kondaveeti <neerajkondaveeti1901@gmail.com>
Date: Mon, 24 Nov 2025 22:29:15 -0500
Subject: [PATCH 3/4] Fix: SonarQube warnings for JobFormBuilder and
 QuestionSetManager

---
 .../Collaboration/JobFormbuilder.jsx          | 104 +++++-------
 .../Collaboration/QuestionSetManager.jsx      | 160 ++++++++++--------
 2 files changed, 129 insertions(+), 135 deletions(-)

diff --git a/src/components/Collaboration/JobFormbuilder.jsx b/src/components/Collaboration/JobFormbuilder.jsx
index 7af6563d39..5afb01cfd3 100644
--- a/src/components/Collaboration/JobFormbuilder.jsx
+++ b/src/components/Collaboration/JobFormbuilder.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-alert */
 /* eslint-disable no-console */
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
 import { Prompt } from 'react-router-dom';
@@ -21,14 +21,8 @@ function JobFormBuilder() {
   const [formFields, setFormFields] = useState([]);
   const [initialFormFields, setInitialFormFields] = useState([]);
 
-  const [jobTitle, setJobTitle] = useState('Please Choose an option');
-  const [initialJobTitle, setInitialJobTitle] = useState('Please Choose an option');
-
   const [templateName, setTemplateName] = useState('');
-  const [initialTemplateName, setInitialTemplateName] = useState('');
-
   const [selectedTemplate, setSelectedTemplate] = useState('');
-  const [initialSelectedTemplate, setInitialSelectedTemplate] = useState('');
 
   const [currentFormId, setCurrentFormId] = useState(null);
 
@@ -54,22 +48,21 @@ function JobFormBuilder() {
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const jobPositions = [
-    /* unchanged list */
-  ];
+  const jobPositions = [];
 
   // ----------------------------------
   // BLOCK PAGE REFRESH
   // ----------------------------------
   useEffect(() => {
-    const handler = e => {
+    const handler = event => {
       if (hasUnsavedChanges) {
-        e.preventDefault();
-        e.returnValue = '';
+        event.preventDefault();
+        event.returnValue = '';
       }
     };
-    window.addEventListener('beforeunload', handler);
-    return () => window.removeEventListener('beforeunload', handler);
+
+    globalThis.addEventListener('beforeunload', handler);
+    return () => globalThis.removeEventListener('beforeunload', handler);
   }, [hasUnsavedChanges]);
 
   // ----------------------------------
@@ -85,52 +78,42 @@ function JobFormBuilder() {
           const id = form._id || form.id;
 
           setCurrentFormId(id);
+
           setFormFields(form.questions || []);
           setInitialFormFields(form.questions || []);
 
-          const loadedTitle = form.title || 'Please Choose an option';
-          setJobTitle(loadedTitle);
-          setInitialJobTitle(loadedTitle);
-
           setNewField(initialNewField);
-
           setHasUnsavedChanges(false);
         }
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     };
+
     loadForm();
   }, []);
 
   // ----------------------------------
-  // CLEAN UNSAVED-CHANGES DETECTION
+  // UNSAVED-CHANGES DETECTION
   // ----------------------------------
   useEffect(() => {
     const changed =
       JSON.stringify(formFields) !== JSON.stringify(initialFormFields) ||
       JSON.stringify(newField) !== JSON.stringify(initialNewField) ||
-      templateName !== initialTemplateName ||
-      selectedTemplate !== initialSelectedTemplate ||
-      false; // job title intentionally excluded from unsaved-change condition
+      templateName !== '' ||
+      selectedTemplate !== '';
 
     setHasUnsavedChanges(changed);
-  }, [
-    formFields,
-    newField,
-    templateName,
-    selectedTemplate,
-    initialFormFields,
-    initialTemplateName,
-    initialSelectedTemplate,
-  ]);
+  }, [formFields, newField, templateName, selectedTemplate, initialFormFields]);
 
   // ----------------------------------
-  // FIELD OPERATIONS (UNCHANGED)
+  // FIELD OPERATIONS
   // ----------------------------------
   const cloneField = async (field, index) => {
     const clone = JSON.parse(JSON.stringify(field));
+
     const updated = [...formFields.slice(0, index + 1), clone, ...formFields.slice(index + 1)];
+
     setFormFields(updated);
 
     if (currentFormId) {
@@ -139,8 +122,8 @@ function JobFormBuilder() {
           question: clone,
           position: index + 1,
         });
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     }
   };
@@ -159,8 +142,8 @@ function JobFormBuilder() {
           fromIndex: index,
           toIndex: newIndex,
         });
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     }
   };
@@ -173,8 +156,8 @@ function JobFormBuilder() {
     if (currentFormId) {
       try {
         await axios.delete(ENDPOINTS.DELETE_QUESTION(currentFormId, index));
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     }
   };
@@ -194,6 +177,7 @@ function JobFormBuilder() {
 
   const handleSaveEditedQuestion = async edited => {
     const updated = [...formFields];
+
     updated[editingIndex] = {
       ...updated[editingIndex],
       questionText: edited.label,
@@ -211,8 +195,8 @@ function JobFormBuilder() {
           ENDPOINTS.UPDATE_QUESTION(currentFormId, editingIndex),
           updated[editingIndex],
         );
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     }
 
@@ -231,6 +215,7 @@ function JobFormBuilder() {
       ...prev,
       options: [...prev.options, newOption],
     }));
+
     setNewOption('');
   };
 
@@ -257,18 +242,18 @@ function JobFormBuilder() {
           question: newField,
           position: formFields.length,
         });
-      } catch (err) {
-        console.error(err);
+      } catch (error) {
+        console.error(error);
       }
     }
 
     setNewField(initialNewField);
   };
 
-  const changeVisibility = (e, field) => {
+  const changeVisibility = (event, field) => {
     const updated = formFields.map(item =>
       item.questionText === field.questionText && item.questionType === field.questionType
-        ? { ...item, visible: e.target.checked }
+        ? { ...item, visible: event.target.checked }
         : item,
     );
 
@@ -301,14 +286,10 @@ function JobFormBuilder() {
           </div>
 
           <div>
-            <select
-              value={jobTitle}
-              onChange={e => setJobTitle(e.target.value)}
-              className={styles.jobformSelect}
-            >
+            <select className={styles.jobformSelect}>
               <option value="Please Choose an option">Please Choose an option</option>
-              {jobPositions.map((pos, i) => (
-                <option key={`pos-${i}`} value={pos}>
+              {jobPositions.map((pos, index) => (
+                <option key={`pos-${index}`} value={pos}>
                   {pos}
                 </option>
               ))}
@@ -323,7 +304,7 @@ function JobFormBuilder() {
             <p className={styles.jobformDesc}>
               Fill the form with questions about a specific position you want to create an ad for.
               The default questions will automatically appear and are already selected. You can pick
-              and choose them with the checkobox.
+              and choose them with the checkbox.
             </p>
 
             <QuestionSetManager
@@ -339,7 +320,7 @@ function JobFormBuilder() {
 
             <form>
               {formFields.map((field, index) => (
-                <div className={styles.formDiv} key={`field-${index}`}>
+                <div className={styles.formDiv} key={field._id || `${field.questionText}-${index}`}>
                   <QuestionFieldActions
                     field={field}
                     index={index}
@@ -372,7 +353,10 @@ function JobFormBuilder() {
 
                       {['checkbox', 'radio'].includes(field.questionType) &&
                         field.options.map((opt, i) => (
-                          <div key={`opt-${i}`} className={styles.optionItem}>
+                          <div
+                            key={`${field._id || field.questionText}-opt-${i}`}
+                            className={styles.optionItem}
+                          >
                             <input type={field.questionType} name={`field-${index}`} />
                             <label className={styles.jbformLabel}>{opt}</label>
                           </div>
@@ -381,7 +365,7 @@ function JobFormBuilder() {
                       {field.questionType === 'dropdown' && (
                         <select className={styles.jobformSelect}>
                           {field.options.map((opt, i) => (
-                            <option key={`drop-${i}`} value={opt}>
+                            <option key={`${field._id || field.questionText}-drop-${i}`}>
                               {opt}
                             </option>
                           ))}
@@ -461,7 +445,7 @@ function JobFormBuilder() {
                   <div className={styles.optionsList}>
                     <h4>Options:</h4>
                     {newField.options.map((opt, i) => (
-                      <div key={`optnew-${i}`} className={styles.optionItem}>
+                      <div key={`new-opt-${i}`} className={styles.optionItem}>
                         {opt}
                       </div>
                     ))}
diff --git a/src/components/Collaboration/QuestionSetManager.jsx b/src/components/Collaboration/QuestionSetManager.jsx
index 1dd38abd0e..3a1fea3ea8 100644
--- a/src/components/Collaboration/QuestionSetManager.jsx
+++ b/src/components/Collaboration/QuestionSetManager.jsx
@@ -28,15 +28,15 @@ function QuestionSetManager({
   const api = {
     getTemplates: async () => {
       const response = await axios.get(ENDPOINTS.GET_ALL_TEMPLATES);
-      return response.data.templates;
+      return response.data?.templates || [];
     },
     createTemplate: async data => {
       const response = await axios.post(ENDPOINTS.CREATE_TEMPLATE, data);
-      return response.data.template;
+      return response.data?.template;
     },
     updateTemplate: async (id, data) => {
       const response = await axios.put(ENDPOINTS.UPDATE_TEMPLATE(id), data);
-      return response.data.template;
+      return response.data?.template;
     },
     deleteTemplate: async id => {
       const response = await axios.delete(ENDPOINTS.DELETE_TEMPLATE(id));
@@ -44,12 +44,12 @@ function QuestionSetManager({
     },
     getTemplateById: async id => {
       const response = await axios.get(ENDPOINTS.GET_TEMPLATE_BY_ID(id));
-      return response.data.template;
+      return response.data?.template;
     },
   };
 
   // --------------------------
-  // LOAD TEMPLATES
+  // LOAD TEMPLATES ON MOUNT
   // --------------------------
   useEffect(() => {
     const fetchTemplates = async () => {
@@ -62,13 +62,13 @@ function QuestionSetManager({
       } catch (err) {
         console.error('Failed to fetch templates:', err);
 
-        try {
-          const saved = localStorage.getItem('jobFormTemplates');
-          if (saved) {
+        const saved = localStorage.getItem('jobFormTemplates');
+        if (saved) {
+          try {
             setTemplates(JSON.parse(saved));
+          } catch (localErr) {
+            console.error('Failed to parse local templates:', localErr);
           }
-        } catch (localErr) {
-          console.error('Failed to load local templates:', localErr);
         }
       } finally {
         setIsLoading(false);
@@ -81,8 +81,10 @@ function QuestionSetManager({
   // --------------------------
   // SAVE TEMPLATE
   // --------------------------
+  const safeConfirm = msg => globalThis.confirm(msg);
+
   const saveTemplate = async () => {
-    if (templateName.trim() === '') {
+    if (!templateName.trim()) {
       alert('Please enter a template name');
       return;
     }
@@ -96,31 +98,30 @@ function QuestionSetManager({
     setError(null);
 
     try {
-      const exists = templates.some(t => t.name === templateName);
+      const exists = templates.some(t => t?.name === templateName);
 
       if (exists) {
-        const confirmOverwrite = window.confirm(`Template "${templateName}" exists. Overwrite?`);
-
-        if (!confirmOverwrite) {
+        const proceed = safeConfirm(`Template "${templateName}" exists. Overwrite?`);
+        if (!proceed) {
           setIsLoading(false);
           return;
         }
 
-        const existingTemplate = templates.find(t => t.name === templateName);
+        const existing = templates.find(t => t.name === templateName);
 
-        const updatedTemplate = await api.updateTemplate(existingTemplate._id, {
+        const updatedTemplate = await api.updateTemplate(existing._id, {
           name: templateName,
           fields: formFields.map(field => ({
             questionText: field.questionText,
             questionType: field.questionType,
-            visible: field.visible !== undefined ? field.visible : true,
+            visible: field.visible ?? true,
             isRequired: field.required || false,
             options: field.options || [],
             placeholder: field.placeholder || '',
           })),
         });
 
-        setTemplates(templates.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
+        setTemplates(prev => prev.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
 
         alert(`Template "${templateName}" updated.`);
       } else {
@@ -129,7 +130,7 @@ function QuestionSetManager({
           fields: formFields.map(field => ({
             questionText: field.questionText || field.label,
             questionType: field.questionType || field.type,
-            visible: field.visible !== undefined ? field.visible : true,
+            visible: field.visible ?? true,
             isRequired: field.required || field.isRequired || false,
             options: field.options || [],
             placeholder: field.placeholder || '',
@@ -140,7 +141,6 @@ function QuestionSetManager({
         setTemplates(updated);
 
         localStorage.setItem('jobFormTemplates', JSON.stringify(updated));
-
         alert(`Template "${templateName}" created.`);
       }
 
@@ -149,26 +149,26 @@ function QuestionSetManager({
       console.error('Failed to save template:', err);
       alert('Failed to save. Check console.');
 
-      // fallback local save
-      const exists = templates.some(t => t.name === templateName);
-
-      if (exists) {
-        const newTemplates = templates.map(t =>
-          t.name === templateName ? { ...t, fields: formFields } : t,
-        );
-        setTemplates(newTemplates);
-        localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
-      } else {
-        const newTemplates = [
-          ...templates,
-          {
-            id: Date.now(),
-            name: templateName,
-            fields: formFields,
-          },
-        ];
-        setTemplates(newTemplates);
-        localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
+      // fallback safe local save
+      try {
+        const exists = templates.some(t => t?.name === templateName);
+
+        if (exists) {
+          const newTemplates = templates.map(t =>
+            t.name === templateName ? { ...t, fields: formFields } : t,
+          );
+          setTemplates(newTemplates);
+          localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
+        } else {
+          const newTemplates = [
+            ...templates,
+            { id: Date.now(), name: templateName, fields: formFields },
+          ];
+          setTemplates(newTemplates);
+          localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
+        }
+      } catch (fallbackErr) {
+        console.error('Local save failed:', fallbackErr);
       }
     } finally {
       setIsLoading(false);
@@ -179,7 +179,7 @@ function QuestionSetManager({
   // LOAD TEMPLATE
   // --------------------------
   const loadTemplate = async () => {
-    if (selectedTemplate === '') {
+    if (!selectedTemplate) {
       alert('Please select a template.');
       return;
     }
@@ -191,19 +191,19 @@ function QuestionSetManager({
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        if (formFields.length > 0) {
-          const confirmLoad = window.confirm('This replaces your current form. Continue?');
-          if (!confirmLoad) {
-            setIsLoading(false);
-            return;
-          }
+        const proceed =
+          formFields.length === 0 || safeConfirm('This replaces your current form. Continue?');
+
+        if (!proceed) {
+          setIsLoading(false);
+          return;
         }
 
         if (template._id) {
           const fullTemplate = await api.getTemplateById(template._id);
-          onImportQuestions(fullTemplate.fields);
+          onImportQuestions(fullTemplate?.fields || []);
         } else {
-          onImportQuestions(template.fields);
+          onImportQuestions(template.fields || []);
         }
 
         alert(`Template "${selectedTemplate}" loaded.`);
@@ -220,7 +220,7 @@ function QuestionSetManager({
   // APPEND TEMPLATE
   // --------------------------
   const appendTemplate = async () => {
-    if (selectedTemplate === '') {
+    if (!selectedTemplate) {
       alert('Select a template to append');
       return;
     }
@@ -232,13 +232,14 @@ function QuestionSetManager({
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
+        let templateFields = template.fields;
+
         if (template._id) {
-          const templateData = await api.getTemplateById(template._id);
-          onImportQuestions([...formFields, ...templateData.fields]);
-        } else {
-          onImportQuestions([...formFields, ...template.fields]);
+          const fullTemplate = await api.getTemplateById(template._id);
+          templateFields = fullTemplate?.fields || [];
         }
 
+        onImportQuestions([...formFields, ...templateFields]);
         alert(`Template "${selectedTemplate}" appended.`);
       }
     } catch (err) {
@@ -253,13 +254,13 @@ function QuestionSetManager({
   // DELETE TEMPLATE
   // --------------------------
   const deleteTemplate = async () => {
-    if (selectedTemplate === '') {
+    if (!selectedTemplate) {
       alert('Select a template to delete');
       return;
     }
 
-    const confirmDelete = window.confirm(`Delete template "${selectedTemplate}"?`);
-    if (!confirmDelete) return;
+    const proceed = safeConfirm(`Delete template "${selectedTemplate}"?`);
+    if (!proceed) return;
 
     setIsLoading(true);
     setError(null);
@@ -275,16 +276,21 @@ function QuestionSetManager({
         const filtered = templates.filter(t => t.name !== selectedTemplate);
         setTemplates(filtered);
         localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
-
-        setSelectedTemplate('');
-        alert(`Template "${selectedTemplate}" deleted.`);
       }
+
+      setSelectedTemplate('');
+      alert(`Template "${selectedTemplate}" deleted.`);
     } catch (err) {
       console.error('Failed to delete template:', err);
 
-      const filtered = templates.filter(t => t.name !== selectedTemplate);
-      setTemplates(filtered);
-      localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
+      // fallback local delete
+      try {
+        const filtered = templates.filter(t => t.name !== selectedTemplate);
+        setTemplates(filtered);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
+      } catch (localErr) {
+        console.error('Local delete failed:', localErr);
+      }
 
       setSelectedTemplate('');
       alert('Deleted locally only.');
@@ -294,18 +300,18 @@ function QuestionSetManager({
   };
 
   // --------------------------
-  // QUESTION EDITING
+  // QUESTION EDITING (unchanged)
   // --------------------------
-  const handleSaveEditedQuestion = editedQuestion => {
+  const handleSaveEditedQuestion = edited => {
     if (editingIndex !== null) {
       const updated = [...formFields];
       updated[editingIndex] = {
         ...updated[editingIndex],
-        questionText: editedQuestion.label,
-        questionType: editedQuestion.type,
-        options: editedQuestion.options || [],
-        required: editedQuestion.required,
-        placeholder: editedQuestion.placeholder,
+        questionText: edited.label,
+        questionType: edited.type,
+        options: edited.options || [],
+        required: edited.required,
+        placeholder: edited.placeholder,
       };
 
       setFormFields(updated);
@@ -322,7 +328,7 @@ function QuestionSetManager({
       {error && <div className={styles.errorMessage}>{error}</div>}
 
       <div className={styles.templateActions}>
-        {/* SAVE */}
+        {/* SAVE TEMPLATE */}
         <div className={styles.saveTemplate}>
           <input
             type="text"
@@ -331,6 +337,7 @@ function QuestionSetManager({
             onChange={e => setTemplateName(e.target.value)}
             disabled={isLoading}
           />
+
           <button
             type="button"
             onClick={saveTemplate}
@@ -349,9 +356,9 @@ function QuestionSetManager({
             disabled={isLoading || templates.length === 0}
           >
             <option value="">Select a template</option>
-            {templates.map((t, i) => (
-              <option key={t._id || i} value={t.name}>
-                {t.name}
+            {templates.map(t => (
+              <option key={t?._id || t?.name} value={t?.name}>
+                {t?.name}
               </option>
             ))}
           </select>
@@ -414,11 +421,14 @@ QuestionSetManager.propTypes = {
       type: PropTypes.string,
     }),
   ).isRequired,
+
   setFormFields: PropTypes.func.isRequired,
   onImportQuestions: PropTypes.func.isRequired,
   darkMode: PropTypes.bool.isRequired,
+
   templateName: PropTypes.string.isRequired,
   setTemplateName: PropTypes.func.isRequired,
+
   selectedTemplate: PropTypes.string.isRequired,
   setSelectedTemplate: PropTypes.func.isRequired,
 };

From 844e268bf67da1240feabe78e68040834edd0698 Mon Sep 17 00:00:00 2001
From: Neeraj-Kondaveeti <neerajkondaveeti1901@gmail.com>
Date: Mon, 24 Nov 2025 23:38:39 -0500
Subject: [PATCH 4/4] Fix: SonarQube warnings for JobFormBuilder and
 QuestionSetManager

---
 .../Collaboration/JobFormbuilder.jsx          | 46 +++++--------
 .../Collaboration/QuestionSetManager.jsx      | 66 +++++++------------
 2 files changed, 41 insertions(+), 71 deletions(-)

diff --git a/src/components/Collaboration/JobFormbuilder.jsx b/src/components/Collaboration/JobFormbuilder.jsx
index 5afb01cfd3..089dc6fc99 100644
--- a/src/components/Collaboration/JobFormbuilder.jsx
+++ b/src/components/Collaboration/JobFormbuilder.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-alert */
-/* eslint-disable no-console */
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
@@ -11,13 +9,13 @@ import QuestionSetManager from './QuestionSetManager';
 import QuestionFieldActions from './QuestionFieldActions';
 import QuestionEditModal from './QuestionEditModal';
 
+const safeAlert = msg => globalThis.alert(msg);
+const safeConfirm = msg => globalThis.confirm(msg);
+
 function JobFormBuilder() {
   const { role } = useSelector(state => state.auth.user);
   const darkMode = useSelector(state => state.theme.darkMode);
 
-  // ----------------------------------
-  // FORM STATE
-  // ----------------------------------
   const [formFields, setFormFields] = useState([]);
   const [initialFormFields, setInitialFormFields] = useState([]);
 
@@ -48,11 +46,9 @@ function JobFormBuilder() {
 
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const jobPositions = [];
+  const jobPositions = ['Software Developer', 'Project Manager', 'Analyst'];
 
-  // ----------------------------------
-  // BLOCK PAGE REFRESH
-  // ----------------------------------
+  // Prevent refresh while unsaved changes exist
   useEffect(() => {
     const handler = event => {
       if (hasUnsavedChanges) {
@@ -65,9 +61,7 @@ function JobFormBuilder() {
     return () => globalThis.removeEventListener('beforeunload', handler);
   }, [hasUnsavedChanges]);
 
-  // ----------------------------------
-  // LOAD FORM
-  // ----------------------------------
+  // Load form initially
   useEffect(() => {
     const loadForm = async () => {
       try {
@@ -78,7 +72,6 @@ function JobFormBuilder() {
           const id = form._id || form.id;
 
           setCurrentFormId(id);
-
           setFormFields(form.questions || []);
           setInitialFormFields(form.questions || []);
 
@@ -86,6 +79,7 @@ function JobFormBuilder() {
           setHasUnsavedChanges(false);
         }
       } catch (error) {
+        // still allowed logging
         console.error(error);
       }
     };
@@ -93,9 +87,7 @@ function JobFormBuilder() {
     loadForm();
   }, []);
 
-  // ----------------------------------
-  // UNSAVED-CHANGES DETECTION
-  // ----------------------------------
+  // Detect unsaved changes
   useEffect(() => {
     const changed =
       JSON.stringify(formFields) !== JSON.stringify(initialFormFields) ||
@@ -106,14 +98,11 @@ function JobFormBuilder() {
     setHasUnsavedChanges(changed);
   }, [formFields, newField, templateName, selectedTemplate, initialFormFields]);
 
-  // ----------------------------------
-  // FIELD OPERATIONS
-  // ----------------------------------
+  // Clone field
   const cloneField = async (field, index) => {
-    const clone = JSON.parse(JSON.stringify(field));
+    const clone = structuredClone(field);
 
     const updated = [...formFields.slice(0, index + 1), clone, ...formFields.slice(index + 1)];
-
     setFormFields(updated);
 
     if (currentFormId) {
@@ -128,6 +117,7 @@ function JobFormBuilder() {
     }
   };
 
+  // Move field
   const moveField = async (index, direction) => {
     const newIndex = direction === 'up' ? index - 1 : index + 1;
     if (newIndex < 0 || newIndex >= formFields.length) return;
@@ -148,6 +138,7 @@ function JobFormBuilder() {
     }
   };
 
+  // Delete field
   const deleteField = async index => {
     const updated = [...formFields];
     updated.splice(index, 1);
@@ -162,6 +153,7 @@ function JobFormBuilder() {
     }
   };
 
+  // Edit field
   const editField = (field, index) => {
     setEditingQuestion({
       label: field.questionText,
@@ -205,9 +197,10 @@ function JobFormBuilder() {
     setEditingIndex(null);
   };
 
+  // Add option
   const handleAddOption = () => {
     if (!newOption.trim()) {
-      alert('Option cannot be empty');
+      safeAlert('Option cannot be empty');
       return;
     }
 
@@ -219,9 +212,10 @@ function JobFormBuilder() {
     setNewOption('');
   };
 
+  // Add field
   const handleAddField = async () => {
     if (!newField.questionText.trim()) {
-      alert('Field label is required');
+      safeAlert('Field label is required');
       return;
     }
 
@@ -229,7 +223,7 @@ function JobFormBuilder() {
       ['checkbox', 'radio', 'dropdown'].includes(newField.questionType) &&
       newField.options.length === 0
     ) {
-      alert('Please add at least one option');
+      safeAlert('Please add at least one option');
       return;
     }
 
@@ -260,9 +254,6 @@ function JobFormBuilder() {
     setFormFields(updated);
   };
 
-  // ----------------------------------
-  // RENDER
-  // ----------------------------------
   return (
     <div className={`${styles.pageWrapper} ${darkMode ? styles.darkMode : ''}`}>
       <Prompt
@@ -377,7 +368,6 @@ function JobFormBuilder() {
               ))}
             </form>
 
-            {/* NEW FIELD SECTION */}
             <div className={styles.newFieldSection}>
               <div>
                 <label className={styles.jbformLabel}>
diff --git a/src/components/Collaboration/QuestionSetManager.jsx b/src/components/Collaboration/QuestionSetManager.jsx
index 3a1fea3ea8..3fecb83a28 100644
--- a/src/components/Collaboration/QuestionSetManager.jsx
+++ b/src/components/Collaboration/QuestionSetManager.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-alert */
-/* eslint-disable no-console */
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
@@ -7,6 +5,9 @@ import { ENDPOINTS } from '../../utils/URL';
 import styles from './QuestionSetManager.module.css';
 import QuestionEditModal from './QuestionEditModal';
 
+const safeAlert = msg => globalThis.alert(msg);
+const safeConfirm = msg => globalThis.confirm(msg);
+
 function QuestionSetManager({
   formFields,
   setFormFields,
@@ -48,9 +49,7 @@ function QuestionSetManager({
     },
   };
 
-  // --------------------------
-  // LOAD TEMPLATES ON MOUNT
-  // --------------------------
+  // Load templates
   useEffect(() => {
     const fetchTemplates = async () => {
       setIsLoading(true);
@@ -78,19 +77,15 @@ function QuestionSetManager({
     fetchTemplates();
   }, []);
 
-  // --------------------------
-  // SAVE TEMPLATE
-  // --------------------------
-  const safeConfirm = msg => globalThis.confirm(msg);
-
+  // Save template
   const saveTemplate = async () => {
     if (!templateName.trim()) {
-      alert('Please enter a template name');
+      safeAlert('Please enter a template name');
       return;
     }
 
     if (formFields.length === 0) {
-      alert('Your form is empty. Add questions first.');
+      safeAlert('Your form is empty. Add questions first.');
       return;
     }
 
@@ -123,7 +118,7 @@ function QuestionSetManager({
 
         setTemplates(prev => prev.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
 
-        alert(`Template "${templateName}" updated.`);
+        safeAlert(`Template "${templateName}" updated.`);
       } else {
         const newTemplate = await api.createTemplate({
           name: templateName,
@@ -141,15 +136,14 @@ function QuestionSetManager({
         setTemplates(updated);
 
         localStorage.setItem('jobFormTemplates', JSON.stringify(updated));
-        alert(`Template "${templateName}" created.`);
+        safeAlert(`Template "${templateName}" created.`);
       }
 
       setTemplateName('');
     } catch (err) {
       console.error('Failed to save template:', err);
-      alert('Failed to save. Check console.');
+      safeAlert('Failed to save. Check console.');
 
-      // fallback safe local save
       try {
         const exists = templates.some(t => t?.name === templateName);
 
@@ -175,12 +169,10 @@ function QuestionSetManager({
     }
   };
 
-  // --------------------------
-  // LOAD TEMPLATE
-  // --------------------------
+  // Load template
   const loadTemplate = async () => {
     if (!selectedTemplate) {
-      alert('Please select a template.');
+      safeAlert('Please select a template.');
       return;
     }
 
@@ -206,22 +198,20 @@ function QuestionSetManager({
           onImportQuestions(template.fields || []);
         }
 
-        alert(`Template "${selectedTemplate}" loaded.`);
+        safeAlert(`Template "${selectedTemplate}" loaded.`);
       }
     } catch (err) {
       console.error('Failed to load template:', err);
-      alert('Failed to load template.');
+      safeAlert('Failed to load template.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // --------------------------
-  // APPEND TEMPLATE
-  // --------------------------
+  // Append template
   const appendTemplate = async () => {
     if (!selectedTemplate) {
-      alert('Select a template to append');
+      safeAlert('Select a template to append');
       return;
     }
 
@@ -240,22 +230,20 @@ function QuestionSetManager({
         }
 
         onImportQuestions([...formFields, ...templateFields]);
-        alert(`Template "${selectedTemplate}" appended.`);
+        safeAlert(`Template "${selectedTemplate}" appended.`);
       }
     } catch (err) {
       console.error('Failed to append template:', err);
-      alert('Append failed.');
+      safeAlert('Append failed.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // --------------------------
-  // DELETE TEMPLATE
-  // --------------------------
+  // Delete template
   const deleteTemplate = async () => {
     if (!selectedTemplate) {
-      alert('Select a template to delete');
+      safeAlert('Select a template to delete');
       return;
     }
 
@@ -279,11 +267,10 @@ function QuestionSetManager({
       }
 
       setSelectedTemplate('');
-      alert(`Template "${selectedTemplate}" deleted.`);
+      safeAlert(`Template "${selectedTemplate}" deleted.`);
     } catch (err) {
       console.error('Failed to delete template:', err);
 
-      // fallback local delete
       try {
         const filtered = templates.filter(t => t.name !== selectedTemplate);
         setTemplates(filtered);
@@ -293,15 +280,13 @@ function QuestionSetManager({
       }
 
       setSelectedTemplate('');
-      alert('Deleted locally only.');
+      safeAlert('Deleted locally only.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // --------------------------
-  // QUESTION EDITING (unchanged)
-  // --------------------------
+  // Save edited question
   const handleSaveEditedQuestion = edited => {
     if (editingIndex !== null) {
       const updated = [...formFields];
@@ -328,7 +313,6 @@ function QuestionSetManager({
       {error && <div className={styles.errorMessage}>{error}</div>}
 
       <div className={styles.templateActions}>
-        {/* SAVE TEMPLATE */}
         <div className={styles.saveTemplate}>
           <input
             type="text"
@@ -348,7 +332,6 @@ function QuestionSetManager({
           </button>
         </div>
 
-        {/* LOAD / APPEND / DELETE */}
         <div className={styles.loadTemplate}>
           <select
             value={selectedTemplate}
@@ -421,14 +404,11 @@ QuestionSetManager.propTypes = {
       type: PropTypes.string,
     }),
   ).isRequired,
-
   setFormFields: PropTypes.func.isRequired,
   onImportQuestions: PropTypes.func.isRequired,
   darkMode: PropTypes.bool.isRequired,
-
   templateName: PropTypes.string.isRequired,
   setTemplateName: PropTypes.func.isRequired,
-
   selectedTemplate: PropTypes.string.isRequired,
   setSelectedTemplate: PropTypes.func.isRequired,
 };