modal modified

package.json

@@ -6,7 +6,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.7",
     "cors": "^2.8.5",
     "express": "^4.18.3",
@@ -50,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.3",
     "tailwindcss": "^3.4.1"
   }
 }

public/manifest.json

 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Scorecard",
+  "name": "Nisum ScoreCard",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon1.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
       "src": "logo192.png",

src/.babelrc

+{
+    "presets": ["@babel/preset-env"]
+  }
+  
\ No newline at end of file

src/App.js

@@ -6,6 +6,7 @@ import Viewreportee from './pages/viewReportee';
 import './App.css';
 import PageNotFound from './pages/pagenotfound/PageNotFound';
 import Exporttable from './pages/reportexport'
+
 function App() {
   return (
     <BrowserRouter>

src/App.test.js

@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  // const linkElement = screen.getByText(/learn react/i);
+  // expect(linkElement).toBeInTheDocument();
 });

src/components/modal/index.jsx

@@ -7,16 +7,16 @@ import { v4 as uuidv4 } from 'uuid';
 
 
 export default function MyModal({ visible, onClose, type, handleAddActivity }) {
-  const {user} = useSelector((state) => state.userDetails)
+  const { user } = useSelector((state) => state.userDetails)
   const [activitiesList, setActivitiesList] = useState([])
   const [enableSubmit, setEnableSubmit] = useState(false)
-  const [activityData, setActivityData] = useState({ aName: "",ratedBy:"", aId: "", type: type, score: 0, comments: "" })
+  const [activityData, setActivityData] = useState({ aName: "", ratedBy: "", aId: "", type: type, score: 0, comments: "" })
   const [activityType, setActivtyType] = useState("")
   const [showCustActivity, setShowActivity] = useState(false);
   const [modalLoading, setModalLoading] = useState(true)
   const [scoreRender, setScoreRender] = useState([]);
   const [showScore, setShowScore] = useState(false)
-  const [disableAppreciate,setDisableAppreciate]=useState(false)
+  const [disableAppreciate, setDisableAppreciate] = useState(false)
 
   const getActivitysList = async (type) => {
     const activities = await axios.get(`${base_url}/activities`)
@@ -26,7 +26,14 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
   }
 
   const handleActivityName = (e) => {
-    setActivityData({ ...activityData, aName: e.target.value, aId: e.target.options[e.target.selectedIndex].id })
+    if (e.target.value === "custom") {
+      setActivityData({ ...activityData, aName: "", aId: "" })
+      setShowActivity(true)
+    }
+    else {
+      setShowActivity(false)
+      setActivityData({ ...activityData, aName: e.target.value, aId: e.target.options[e.target.selectedIndex].id })
+    }
   }
 
   const handleCustumActivity = (e) => {
@@ -39,9 +46,9 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
     setActivityData({ ...activityData, score: Number(value) })
   }
 
-  const handlePerformance=(value)=> {
+  const handlePerformance = (value) => {
     let appreciateScores = [1, 2, 3, 4, 5]
-    let depreciateScores = [ -1, -2, -3, -4, -5]
+    let depreciateScores = [-1, -2, -3, -4, -5]
     if (value == 1) {
       setActivityData({ ...activityData, score: 0 })
       setScoreRender(appreciateScores)
@@ -55,10 +62,11 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
   }
 
   const handleComments = (e) => {
-    setActivityData({ ...activityData, comments:e.target.value.trim() })
+    setActivityData({ ...activityData, comments: e.target.value.trim() })
   }
 
   const handleSubmit = (e) => {
+    e.preventDefault()
     onClose()
     setShowActivity(false)
     handleAddActivity(activityData)
@@ -79,16 +87,16 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
     setActivtyType(str.charAt(0).toUpperCase() + str.slice(1).toLowerCase())
   }
   useEffect(() => {
-    if(type==="duties"){
+    if (type === "duties") {
       setDisableAppreciate(true);
-    }else{
+    } else {
       setDisableAppreciate(false);
     }
     SentenceCase(type)
     if (visible === false) {
-      setActivityData({ aName: "",ratedBy:"", aId: "", type: type, score: 0, comments: "" })
+      setActivityData({ aName: "", ratedBy: "", aId: "", type: type, score: 0, comments: "" })
     } else {
-      setActivityData({...activityData,ratedBy:user.empName})
+      setActivityData({ ...activityData, ratedBy: user.empName })
       getActivitysList(type);
       setModalLoading(true)
     }
@@ -114,25 +122,19 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
               <div>
                 <form className=" p-2 max-w-sm mx-auto text-[12px]" onClick={(e) => e.stopPropagation()}>
                   <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}>
+                    <select 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)} >
                       <option id="" value="">Select</option>
                       {
                         activitiesList && activitiesList.map((activity) => <option className=" w-7/12" key={activity.aId} id={activity.aId} value={activity.aName}>{activity.aName}</option>)
                       }
+                      <option value="custom" className={`${showCustActivity || type == "duties" && 'hidden'}`}>Add Activity</option>
                     </select>
-                    <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>
+                    <label className={`font-medium  mr-2`}>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" 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)} />

src/components/sidebar/index.jsx

@@ -14,7 +14,7 @@ function Sidebar() {
         <ul className="space-y-1.5">
           <li>
             <Link
-              className={`flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
+              className={`flex items-center gap-x-3.5 py-2 px-2.5  text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
               to={`/dashboard`}
             >
               <svg

src/pages/home/index.jsx

@@ -4,7 +4,6 @@ import axios from 'axios';
 import { base_url } from "../../utils/constants";
 import { loginUser } from "../../redux/reducers/userSlice";
 import {useDispatch,useSelector} from 'react-redux'
-import Loading from '../../components/loading Component/Loading'
 
 function Home() {
   const inputRef = useRef(null);

src/redux/reducers/exporttableslice.js

@@ -3,17 +3,15 @@ import { base_url } from "../../utils/constants";
 import axios from "axios";
 
 const initialState = {
-    totalReporteesData: [],
     activitiesData:null,
     loading: false,
     error: null,
-    fromDate: null,
-    toDate: null,
 };
 
-export const fetchReportstableData = createAsyncThunk("getreportees", async (data) => {
-  return await axios.post(`${base_url}/getreportees`,  data)
-    .then((response) => response.data);
+
+export const fetchReportesActivitiesData = createAsyncThunk("getactivities", async (data) => {
+  return await axios.post(`${base_url}/getActivities`,  data)
+    .then((response) =>  response.data.activities);
 });
 
 const exporttableSlice = createSlice({
@@ -23,57 +21,26 @@ const exporttableSlice = createSlice({
     resetReporteesTableData:() => {
       return initialState
     },
-    setPastMonth: (state) => {
-        const toDate = new Date();
-        const fromDate = new Date();
-        fromDate.setMonth(fromDate.getMonth() - 1);
-        state.fromDate = fromDate;
-        state.toDate = toDate;
-        console.log(fromDate,toDate)
-      },
-      setPastTwoMonths: (state) => {
-        const toDate = new Date();
-        const fromDate = new Date();
-        fromDate.setMonth(fromDate.getMonth() - 3);
-        state.fromDate = fromDate;
-        state.toDate = toDate;
-        console.log(fromDate,toDate)
-      },
-      setPastsixMonths: (state) => {
-        const toDate = new Date();
-        const fromDate = new Date();
-        fromDate.setMonth(fromDate.getMonth() - 6);
-        state.fromDate = fromDate;
-        state.toDate = toDate;
-        console.log(fromDate,toDate)
-      },
-      setPasttwelvemonths: (state) => {
-        const toDate = new Date();
-        const fromDate = new Date();
-        fromDate.setMonth(fromDate.getMonth() - 12);
-        state.fromDate = fromDate;
-        state.toDate = toDate;
-        console.log(fromDate,toDate)
-      },
+    
   },
   extraReducers: (builder) => {
-    builder.addCase(fetchReportstableData.pending, (state) => {
+    builder.addCase(fetchReportesActivitiesData.pending, (state) => {
       state.loading = true;
       state.error = "pending";
     });
-    builder.addCase(fetchReportstableData.fulfilled, (state, action) => {
+    builder.addCase(fetchReportesActivitiesData.fulfilled, (state, action) => {
       state.loading = false;
-      state.totalReporteesData = action.payload.data;
+      state.activitiesData = action.payload;
       state.error = "";
     });
-    builder.addCase(fetchReportstableData.rejected, (state, action) => {
+    builder.addCase(fetchReportesActivitiesData.rejected, (state, action) => {
       state.loading = false;
-      state.totalReporteesData = null;
+      state.activitiesData = null;
       state.error = action.error || "Something went wrong!";
     });
   },
 });
 
-export const {resetReporteesTableData,setPastMonth,setPastTwoMonths,setPastsixMonths,setPasttwelvemonths} = exporttableSlice.actions;
+export const {resetReporteesTableData} = exporttableSlice.actions;
 
 export default exporttableSlice.reducer;