modal appreciate disable applied

server.js

@@ -141,7 +141,7 @@ app.post("/getreportees",async (req, res) => {
     "data":{
         "aName":"Approval of timesheet",
         "aId":"D001",
-        "type":"default",
+        "type":"duties",
         "ratedBy":"Name",
         "score":3,
         "comments":""

src/components/modal/index.jsx

@@ -16,6 +16,7 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
   const [modalLoading, setModalLoading] = useState(true)
   const [scoreRender, setScoreRender] = useState([]);
   const [showScore, setShowScore] = useState(false)
+  const [disableAppreciate,setDisableAppreciate]=useState(false)
 
   const getActivitysList = async (type) => {
     const activities = await axios.get(`${base_url}/activities`)
@@ -78,7 +79,11 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
     setActivtyType(str.charAt(0).toUpperCase() + str.slice(1).toLowerCase())
   }
   useEffect(() => {
-    
+    if(type==="duties"){
+      setDisableAppreciate(true);
+    }else{
+      setDisableAppreciate(false);
+    }
     SentenceCase(type)
     if (visible === false) {
       setActivityData({ aName: "",ratedBy:"", aId: "", type: type, score: 0, comments: "" })
@@ -108,7 +113,9 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
             <div>
               <div>
                 <form className=" p-2 max-w-sm mx-auto text-[12px]" onClick={(e) => e.stopPropagation()}>
-                  <div className="flex items-center justify-between  my-5">
+                  <div className="flex items-center   my-5">
+                      
+
                     <label htmlFor="countries">SELECT ACTIVITY<span className="text-[15px]">*</span>: </label>
                     <select disabled={showCustActivity} className="bg-gray-50 ml-2 w-6/12 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 " onChange={(e) => handleActivityName(e)} value={activityData.aName}>
                       <option id="" value="">Select</option>
@@ -116,15 +123,19 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
                         activitiesList && activitiesList.map((activity) => <option className=" w-7/12" key={activity.aId} id={activity.aId} value={activity.aName}>{activity.aName}</option>)
                       }
                     </select>
-                    <button onClick={(e) => { handleCustBtn(e) }} className="bg-blue-400 ml-2 w-2/12 text-white  py-1 rounded hover:scale-95 transition text-sm">Custom</button>
+                    <button onClick={(e) => { handleCustBtn(e) }} className={`${showCustActivity && 'hidden'} bg-blue-400 ml-2 w-2/12 text-white  py-1 rounded hover:scale-95 transition text-sm`}>Custom</button>
                   </div>
                   <div className={`flex items-center  ${!showCustActivity && 'hidden'}`}>
                     <label className={`font-medium  mr-2`}>Custom Activity<span className="text-[15px]">*</span>:</label>
                     <input type="text" value={activityData.aName} placeholder="Enter Activity name" name="performance" className={`border border-gray-300 rounded p-2 `} onChange={(e) => handleCustumActivity(e)} />
+                    <button onClick={(e) => { handleCustBtn(e) }} className={`${!showCustActivity && 'hidden'} bg-blue-400 ml-2 w-2/12 text-white  py-1 rounded hover:scale-95 transition text-sm`}>Close</button>
                   </div>
+
+
+
                   <div className="flex items-center mb-4 ">
-                    <label htmlFor="appreciate" className="  font-medium ">APPRECIATION<span className="text-[15px]">*</span>:</label>
-                    <input id="appreciate" type="radio" value="appreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300  " onChange={() => handlePerformance(1)} />
+                    <label htmlFor="appreciate" className="font-medium">APPRECIATION<span className="text-[15px]">*</span>:</label>
+                    <input id="appreciate" disabled={disableAppreciate} type="radio" value="appreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300  " onChange={() => handlePerformance(1)} />
                     <label htmlFor="depreciate" className="ms-2  font-medium ">DEPRECIATION<span className="text-[15px]">*</span>:</label>
                     <input id="depreciate" type="radio" value="depreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300  " onChange={() => handlePerformance(-1)} />
                   </div>
@@ -137,6 +148,9 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
                       }
                     </select>
                   </div>
+
+
+
                   <div className="flex items-center my-5">
                     <label htmlFor="comments" className="block w-3/12 mb-20 text-start  font-medium  ">COMMENTS<span className="text-[15px]">*</span>:</label>
                     <textarea id="comments" style={{ resize: "none" }} rows="4" className="block ml-2 p-2.5 w-9/12  bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Comments" onChange={(e) => handleComments(e)}