Merge pull request #192 from harshitap1305/feat-bug/skills

[SPRINT M25] add user skill issue resolved

Author: harshitap1305

frontend/src/Components/Skills/FilterDropdown.jsx

@@ -12,16 +12,23 @@ const FilterDropdown = ({ label, value, onChange, options }) => (
         onChange={(e) => onChange(e.target.value)}
         className="w-full pl-3 pr-10 py-2 border border-[#DCD3C9] rounded-lg focus:ring-2 focus:ring-black focus:border-black appearance-none bg-white text-black"
       >
-        <option>All</option>
-        {options.map((opt) => (
-          <option key={opt} value={opt}>
-            {opt.charAt(0).toUpperCase() + opt.slice(1)}
-          </option>
-        ))}
+        <option value="">Select...</option>
+        {options.map((opt, idx) => {
+          // Handle both string and object types
+          const labelText = typeof opt === "string" ? opt : opt.label;
+          const valueText = typeof opt === "string" ? opt : opt.value;
+          return (
+            <option key={idx} value={valueText}>
+              {labelText
+                ? labelText.charAt(0).toUpperCase() + labelText.slice(1)
+                : ""}
+            </option>
+          );
+        })}
       </select>
       <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-black w-4 h-4 pointer-events-none" />
     </div>
   </div>
 );
 
-export default FilterDropdown;
+export default FilterDropdown;

frontend/src/Components/Skills/SkillFormModal.jsx

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useMemo } from "react";
-import { X, ChevronDown, Trophy } from "lucide-react";
+import React, { useContext, useMemo } from "react";
+import { Trophy } from "lucide-react";
 import { useSkillForm, useSkills } from "../../hooks/useSkills";
 import FilterDropdown from "./FilterDropdown";
 import { usePositionHolders } from "../../hooks/usePositionHolders";
@@ -13,13 +13,9 @@ const SkillFormModal = ({ showForm, setShowForm }) => {
   const { positionHolders } = usePositionHolders();
   const {
     formData,
-    newSkillData,
     loading,
-    showNewSkillForm,
     handleSkillChange,
     updateFormData,
-    updateNewSkillData,
-    resetForm,
     submitSkill,
   } = useSkillForm(refreshUserSkills);
 
@@ -57,25 +53,35 @@ const SkillFormModal = ({ showForm, setShowForm }) => {
           <FilterDropdown
             label="Select Skill"
             value={formData.skill_id}
-            onChange={handleSkillChange}
-            options={skills.map((skill) => skill.name + " - " + skill.category)}
+            onChange={(id) => handleSkillChange(id)}
+            options={skills.map((skill) => ({
+               label: `${skill.name} - ${skill.category}`,
+               value: skill._id,
+             }))}
           />
 
           <FilterDropdown
-            label="Proficiency Level"
-            value={formData.proficiency_level}
-            onChange={updateFormData}
-            options={["Beginner", "Intermediate", "Advanced", "Expert"]}
-          />
+             label="Proficiency Level"
+             value={formData.proficiency_level}
+             onChange={(val) => updateFormData({ proficiency_level: val })}
+             options={[
+               { label: "Beginner", value: "beginner" },
+               { label: "Intermediate", value: "intermediate" },
+               { label: "Advanced", value: "advanced" },
+               { label: "Expert", value: "expert" },
+             ]}
+           />
+           
+           <FilterDropdown
+             label="Associated Position (Optional)"
+             value={formData.position_id}
+             onChange={(val) => updateFormData({ position_id: val })}
+             options={userPositions.map((pos) => ({
+               label: `${pos.title} - ${pos.unit_id?.name || "No Unit"}`,
+               value: pos._id,
+             }))}
+           />
 
-          <FilterDropdown
-            label="Associated Position (Optional)"
-            value={formData.position_id}
-            onChange={updateFormData}
-            options={userPositions.map(
-              (pos) => `${pos.title} - ${pos.unit_id?.name || "No Unit"}`
-            )}
-          />
         </div>
         <div className="pt-4">
           <button

frontend/src/Components/Skills/SkillManagement.jsx

@@ -1,9 +1,6 @@
-import React, { useState } from "react";
-import { Plus } from "lucide-react";
 import { useSkills, useSkillForm } from "../../hooks/useSkills";
 import FilterDropdown from "./FilterDropdown";
 import SkillCard from "./SkillCard";
-import SkillFormModal from "./SkillFormModal";
 import { EmptyStateNoSkills, EmptyStateNoResults } from "./EmptyState";
 
 const SkillManagement = ({ showForm, setShowForm }) => {
@@ -56,7 +53,6 @@ const SkillManagement = ({ showForm, setShowForm }) => {
             {filteredSkills.map((userSkill) => (
               <>
               <SkillCard key={userSkill._id} userSkill={userSkill} />
-              {/* <SkillCard key={userSkill._id} userSkill={userSkill} /> */}
               </>
             ))}
           </div>

frontend/src/Components/Skills/Skills.jsx

@@ -1,15 +1,10 @@
 import React, { useContext, useState } from "react";
 import { AdminContext } from "../../context/AdminContext";
 import { Eye, Plus } from "lucide-react";
-import SkillsEndorsementTab from "../GenSec/SkillsEndorsementTab";
 import SkillManagement from "./SkillManagement";
-import UserSkillsEndorsementTab from "../GenSec/UserSkillsEndorsementTab";
 import SkillFormModal from "./SkillFormModal";
 
 const Skills = () => {
-  const [add, setAdd] = useState(false);
-  const { isUserLoggedIn } = useContext(AdminContext);
-  const userRole = isUserLoggedIn?.role || "STUDENT";
   const [showForm, setShowForm] = useState(false);
 
   return (

frontend/src/hooks/useSkills.js

@@ -186,30 +186,9 @@ export const useSkillForm = (onSuccess) => {
     if (!formData.skill_id) {
       return { success: false, message: "Please select a skill." };
     }
-
-    if (
-      showNewSkillForm &&
-      (!newSkillData.name.trim() || !newSkillData.category.trim())
-    ) {
-      return {
-        success: false,
-        message: "Please fill all required fields for the new skill.",
-      };
-    }
-
     setLoading(true);
     try {
       let skillIdToUse = formData.skill_id;
-
-      // Create new skill if needed
-      if (showNewSkillForm) {
-        const newSkillResponse = await api.post(
-          `/api/skills/create-skill`,
-          newSkillData
-        );
-        skillIdToUse = newSkillResponse.data._id;
-      }
-
       // Create user skill
       await api.post(`/api/skills/create-user-skill`, {
         user_id: isUserLoggedIn._id,