Frontend Release to Main [4.49]

eslint.config.js

@@ -34,8 +34,7 @@ module.exports = [
       // Ignore entire component folders
       'src/components/Badge/**',
       'src/components/SummaryManagement/**',
-      'src/components/TeamMemberTasks/**',
-      'src/components/Teams/TeamMembersPopup.jsx',
+      'src/components/UserProfile/**',
       'src/components/Announcements/index.jsx',
     ],
   },

package.json

@@ -13,11 +13,11 @@
     "@date-io/dayjs": "^3.2.0",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.14.0",
-    "@fortawesome/fontawesome-svg-core": "^6",
-    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^7.0.1",
     "@fortawesome/free-regular-svg-icons": "^6",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.3",
+    "@fortawesome/react-fontawesome": "^0.2.6",
     "@hello-pangea/dnd": "^18.0.1",
     "@mui/lab": "^7.0.0-beta.12",
     "@mui/material": "^7.1.0",

src/actions/projectMembers.js

@@ -137,7 +137,7 @@ export const fetchProjectsWithActiveUsers = () => {
 /**
  * Call API to assign/ unassign project
  */
-export const assignProject = (projectId, userId, operation, firstName, lastName) => {
+export const assignProject = (projectId, userId, operation, firstName, lastName, isActive) => {
   const request = axios.post(ENDPOINTS.PROJECT_MEMBER(projectId), {
     projectId,
     users: [
@@ -158,9 +158,10 @@ export const assignProject = (projectId, userId, operation, firstName, lastName)
               _id: userId,
               firstName,
               lastName,
+              isActive
             }),
           );
-          dispatch(removeFoundUser(userId));
+          // dispatch(removeFoundUser(userId));
         } else {
           dispatch(deleteMember(userId));
         }
@@ -192,8 +193,8 @@ export const findProjectMembers = (_projectId, query) => {
       );
 
       const list = Array.isArray(data) ? data
-                 : Array.isArray(data?.users) ? data.users
-                 : [];
+        : Array.isArray(data?.users) ? data.users
+          : [];
 
       const assigned = new Set(getState().projectMembers.members.map(m => m._id));
       const users = list.map(u => ({ ...u, assigned: assigned.has(u._id) }));

src/components/ApplicantsChart/AgeChart.jsx

@@ -9,11 +9,11 @@ import {
   LabelList,
 } from 'recharts';
 
-function AgeChart({ data, compareLabel }) {
+function AgeChart({ data, compareLabel, darkMode }) {
   const formatTooltip = (value, name, props) => {
     const { change } = props.payload;
-    let changeText = '';
     if (compareLabel && change !== undefined) {
+      let changeText = '';
       if (change > 0) {
         changeText = `${change}% more than ${compareLabel}`;
       } else if (change < 0) {
@@ -27,19 +27,56 @@ function AgeChart({ data, compareLabel }) {
   };
 
   return (
-    <div style={{ width: '800px', height: 500, margin: '0 auto', padding: '20px' }}>
-      <h2>Applicants grouped by Age</h2>
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }} barSize={80}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="ageGroup" />
-          <YAxis />
-          <Tooltip formatter={formatTooltip} />
-          <Bar dataKey="applicants" fill="#3b82f6">
-            <LabelList dataKey="applicants" position="top" />
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
+    <div
+      className={darkMode ? 'bg-oxford-blue text-light' : 'bg-white text-black'}
+      style={{
+        width: '100%', // take full available width
+        maxWidth: '1000px', // optional: cap at some max width
+        margin: '0 auto',
+        padding: '20px',
+      }}
+    >
+      <h2 style={{ color: darkMode ? '#fff' : '#000', textAlign: 'center' }}>
+        Applicants Grouped by Age
+      </h2>
+      <div style={{ width: '100%', height: '60vh', minHeight: '350px' }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 40 }} barSize={60}>
+            <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? '#555' : '#ccc'} />
+            <XAxis
+              dataKey="ageGroup"
+              label={{
+                value: 'Age Group',
+                position: 'insideBottom',
+                offset: -5,
+                fill: darkMode ? '#fff' : '#000',
+              }}
+              tick={{ fill: darkMode ? '#fff' : '#000' }}
+            />
+            <YAxis
+              label={{
+                value: 'Number of Applicants',
+                angle: -90,
+                position: 'insideLeft',
+                offset: -5,
+                fill: darkMode ? '#fff' : '#000',
+              }}
+              tick={{ fill: darkMode ? '#fff' : '#000' }}
+            />
+            <Tooltip
+              formatter={formatTooltip}
+              contentStyle={{
+                backgroundColor: darkMode ? '#fff' : '#fff',
+                color: darkMode ? '#000' : '#000',
+                border: `1px solid ${darkMode ? '#555' : '#ccc'}`,
+              }}
+            />
+            <Bar dataKey="applicants" fill={darkMode ? '#60a5fa' : '#3b82f6'}>
+              <LabelList dataKey="applicants" position="top" fill={darkMode ? '#fff' : '#000'} />
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
     </div>
   );
 }

src/components/ApplicantsChart/TimeFilter.jsx

@@ -2,63 +2,98 @@ import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
-function TimeFilter({ onFilterChange }) {
+function TimeFilter({ onFilterChange, darkMode }) {
   const [selectedOption, setSelectedOption] = useState('weekly');
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
+  const [error, setError] = useState('');
 
   useEffect(() => {
-    onFilterChange({ selectedOption, startDate, endDate });
+    if (selectedOption === 'custom' && startDate && endDate) {
+      if (startDate > endDate) {
+        setError('🚨 Start date cannot be after end date.');
+        return;
+      } else {
+        setError('');
+      }
+    } else {
+      setError('');
+    }
+
+    onFilterChange({ selectedOption, startDate, endDate, error: '' });
   }, [selectedOption, startDate, endDate]);
 
   return (
     <div
       style={{
         display: 'flex',
-        justifyContent: 'center',
+        flexDirection: 'column',
         alignItems: 'center',
-        gap: '16px',
+        gap: '12px',
         margin: '20px auto',
-        flexWrap: 'wrap',
       }}
     >
-      <label htmlFor="timeFilterSelect" style={{ fontWeight: 500 }}>
-        Time Filter:
-      </label>
-      <select
-        id="timeFilterSelect"
-        value={selectedOption}
-        onChange={e => setSelectedOption(e.target.value)}
-        style={{
-          padding: '6px 12px',
-          borderRadius: '4px',
-          border: '1px solid #ccc',
-          fontSize: '14px',
-        }}
-      >
-        <option value="weekly">Weekly</option>
-        <option value="monthly">Monthly</option>
-        <option value="yearly">Yearly</option>
-        <option value="custom">Custom Dates</option>
-      </select>
+      {/* Top row */}
+      <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+        <label
+          htmlFor="timeFilterSelect"
+          style={{
+            fontWeight: 600,
+            color: darkMode ? '#fff' : '#000',
+          }}
+        >
+          Time Filter:
+        </label>
+
+        <select
+          id="timeFilterSelect"
+          value={selectedOption}
+          onChange={e => setSelectedOption(e.target.value)}
+          style={{
+            padding: '6px 12px',
+            borderRadius: '4px',
+            border: '1px solid #ccc',
+            fontSize: '14px',
+          }}
+        >
+          <option value="weekly">Weekly</option>
+          <option value="monthly">Monthly</option>
+          <option value="yearly">Yearly</option>
+          <option value="custom">Custom Dates</option>
+        </select>
+
+        {selectedOption === 'custom' && (
+          <>
+            <DatePicker
+              selected={startDate}
+              onChange={date => setStartDate(date)}
+              placeholderText="Start Date"
+              dateFormat="yyyy/MM/dd"
+            />
+            <span style={{ color: darkMode ? '#fff' : '#000' }}>to</span>
+            <DatePicker
+              selected={endDate}
+              onChange={date => setEndDate(date)}
+              placeholderText="End Date"
+              dateFormat="yyyy/MM/dd"
+            />
+          </>
+        )}
+      </div>
 
-      {selectedOption === 'custom' && (
-        <>
-          <DatePicker
-            selected={startDate}
-            onChange={date => setStartDate(date)}
-            placeholderText="Start Date"
-            dateFormat="yyyy/MM/dd"
-            style={{ marginRight: '10px' }}
-          />
-          <span>to</span>
-          <DatePicker
-            selected={endDate}
-            onChange={date => setEndDate(date)}
-            placeholderText="End Date"
-            dateFormat="yyyy/MM/dd"
-          />
-        </>
+      {/* Error message */}
+      {error && (
+        <p
+          style={{
+            color: 'red',
+            fontSize: '18px',
+            fontWeight: '600',
+            textAlign: 'center',
+            marginTop: '8px',
+          }}
+        >
+          {error}
+        </p>
       )}
     </div>
   );