Distribution of Labor Hours
{/* Filters */}
-
{/* Chart + Legend */}
@@ -132,7 +134,19 @@ export default function DistributionLaborHours() {
cy="50%"
outerRadius={100}
labelLine={false}
- label={({ value }) => `${((value / totalHours) * 100).toFixed(1)}%`}
+ label={({ x, y, value }) => (
+
+
+ );
+}
function CommunityMembersPage() {
const [selectedSkills, setSelectedSkills] = useState([]);
+ const [selectedPreferences, setSelectedPreferences] = useState([]);
+ const darkMode = useSelector(state => state.theme.darkMode);
- const handleCheckboxChange = skill => {
- setSelectedSkills(prev =>
- prev.includes(skill) ? prev.filter(s => s !== skill) : [...prev, skill],
+ const toggleItem = (item, selectedArray, setSelectedArray) => {
+ setSelectedArray(prev =>
+ prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item],
);
};
- // EFFECTIVE SKILLS = what we pass to RankedUserList
- const effectiveSkills = useMemo(() => {
- return selectedSkills.length > 0 ? selectedSkills : availableSkills;
- }, [selectedSkills]);
+ const renderSkillButtons = () => (
+ setOpen(prev => !prev)}
+ onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && setOpen(prev => !prev)}
+ className={`${styles.accordionHeader} ${darkMode ? styles.dark : ''}`}
+ >
+ {title}
+ {open ? '−' : '+'}
+
+ {open && {children}
}
+
+ {availableSkills.map(skillKey => {
+ const formattedName = formatSkillName(skillKey);
+ const isSelected = selectedSkills.includes(skillKey);
+ return (
+
+ );
+ })}
+
+ );
+
+ const renderPreferenceButtons = () => (
+
+ {availablePreferences.map(pref => {
+ const isSelected = selectedPreferences.includes(pref);
+ return (
+
+ );
+ })}
+
+ );
return (
-
-
Community Members
- -
- Filter by skills:
-
+
- {availableSkills.map(skill => (
-
- ))}
-
-
+
+ {renderSkillButtons()}
+
+
+
+ {renderPreferenceButtons()}
+
+
+
);
}
diff --git a/src/components/HGNHelpSkillsDashboard/FilerData.js b/src/components/HGNHelpSkillsDashboard/FilerData.js
new file mode 100644
index 0000000000..2fbfc36c33
--- /dev/null
+++ b/src/components/HGNHelpSkillsDashboard/FilerData.js
@@ -0,0 +1,69 @@
+export const availableSkills = [
+ 'combined_frontend_backend',
+ 'mern_skills',
+ 'leadership_skills',
+ 'HTML',
+ 'Bootstrap',
+ 'CSS',
+ 'React',
+ 'Redux',
+ 'WebSocketCom',
+ 'ResponsiveUI',
+ 'UnitTest',
+ 'Documentation',
+ 'UIUXTools',
+ 'Database',
+ 'MongoDB',
+ 'MongoDB_Advanced',
+ 'TestDrivenDev',
+ 'Deployment',
+ 'VersionControl',
+ 'CodeReview',
+ 'EnvironmentSetup',
+ 'AdvancedCoding',
+ 'AgileDevelopment',
+];
+
+export const availablePreferences = [
+ 'Design',
+ 'Backend',
+ 'Frontend',
+ 'Management',
+ 'Testing',
+ 'Deployment',
+ 'No Preference',
+];
+
+export const formatSkillName = key => {
+ switch (key) {
+ case 'combined_frontend_backend':
+ return 'Frontend/Backend';
+ case 'mern_skills':
+ return 'MERN';
+ case 'leadership_skills':
+ return 'Leadership';
+ case 'MongoDB_Advanced':
+ return 'Advanced MongoDB';
+ case 'UIUXTools':
+ return 'UI/UX';
+ case 'TestDrivenDev':
+ return 'TDD';
+ case 'ResponsiveUI':
+ return 'Responsive UI';
+ case 'MongoDB':
+ case 'HTML':
+ case 'CSS':
+ return key;
+ default:
+ let formatted = key.replace(/([A-Z])/g, ' $1').trim();
+ formatted = formatted.replace(/_/g, ' ');
+ formatted = formatted
+ .toLowerCase()
+ .split(' ')
+ .map(word => (word.length === 0 ? '' : word.charAt(0).toUpperCase() + word.slice(1)))
+ .join(' ');
+ formatted = formatted.replace('Web Socket Com', 'WebSocket Comm');
+ formatted = formatted.replace('Unit Test', 'Unit Testing');
+ return formatted;
+ }
+};
diff --git a/src/components/HGNHelpSkillsDashboard/RankedUserList.jsx b/src/components/HGNHelpSkillsDashboard/RankedUserList.jsx
index fe41907f68..efecb8a8ea 100644
--- a/src/components/HGNHelpSkillsDashboard/RankedUserList.jsx
+++ b/src/components/HGNHelpSkillsDashboard/RankedUserList.jsx
@@ -1,59 +1,52 @@
import { useEffect, useState } from 'react';
import axios from 'axios';
import UserCard from './UserCard';
-import './style/UserCard.module.css';
+import { useSelector } from 'react-redux';
+import styles from './style/RankedUserList.module.css';
-function RankedUserList({ selectedSkills = [] }) {
+function RankedUserList({ selectedSkills, selectedPreferences }) {
const [rankedUsers, setRankedUsers] = useState([]);
const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
-
+ const darkMode = useSelector(state => state.theme.darkMode);
useEffect(() => {
- let canceled = false;
+ if (
+ (!selectedSkills || selectedSkills.length === 0) &&
+ (!selectedPreferences || selectedPreferences.length === 0)
+ )
+ return;
const fetchRankedUsers = async () => {
setLoading(true);
- setError(null);
-
try {
const params = {};
- if (Array.isArray(selectedSkills) && selectedSkills.length > 0) {
- params.skills = selectedSkills.join(',');
- }
-
- const response = await axios.get('http://localhost:4500/api/hgnform/ranked', { params });
+ if (selectedSkills.length > 0) params.skills = selectedSkills.join(',');
+ if (selectedPreferences.length > 0) params.preferences = selectedPreferences.join(',');
- if (!canceled) {
- const data = response?.data || [];
- setRankedUsers(Array.isArray(data) ? data : []);
- }
+ const response = await axios.get(`${process.env.REACT_APP_APIENDPOINT}/hgnform/ranked`, {
+ params,
+ });
+ setRankedUsers(response.data);
} catch (err) {
- console.error('Failed to fetch ranked users', err);
- if (!canceled) {
- setError(err);
- setRankedUsers([]);
- }
} finally {
- if (!canceled) setLoading(false);
+ setLoading(false);
}
};
fetchRankedUsers();
+ }, [selectedSkills, selectedPreferences]);
- return () => {
- canceled = true;
- };
- }, [selectedSkills]);
-
- if (loading) return Community Member Filters
-
+ {selectedSkills.length > 0 || selectedPreferences.length > 0 ? (
+
+ Select skills or preferences above to see filtered members. +
+ )} +Loading ranked users...
; - if (error) returnFailed to load users.
; - if (!rankedUsers.length) returnNo members found.
; + if (loading) returnLoading ranked users...
; + if (!rankedUsers.length) returnNo users found.
; return ( -
- {rankedUsers.map(user => (
-
+
);
}
diff --git a/src/components/HGNHelpSkillsDashboard/UserCard.jsx b/src/components/HGNHelpSkillsDashboard/UserCard.jsx
index dfbe5f19b2..2adee3226a 100644
--- a/src/components/HGNHelpSkillsDashboard/UserCard.jsx
+++ b/src/components/HGNHelpSkillsDashboard/UserCard.jsx
@@ -1,27 +1,22 @@
-import React from 'react';
import styles from './style/UserCard.module.css';
import avatar from './style/avatar.png';
import emailIcon from './style/email_icon.png';
import slackIcon from './style/slack_icon.png';
-
import { useSelector } from 'react-redux';
function UserCard({ user }) {
- const darkMode = useSelector(state => state.theme?.darkMode);
const { name, email, slack, score, topSkills } = user;
-
+ const darkMode = useSelector(state => state.theme.darkMode);
const getScoreColor = userScore => {
if (userScore >= 5) return '#00754A';
return '#D93D3D';
};
return (
-
+ {rankedUsers.map(user => (
+
+
+ ))}
+
+
-
@@ -47,9 +42,7 @@ function UserCard({ user }) {
diff --git a/src/components/HGNHelpSkillsDashboard/UserProfilePage.jsx b/src/components/HGNHelpSkillsDashboard/UserProfilePage.jsx
index 016889fff2..7f8a01756b 100644
--- a/src/components/HGNHelpSkillsDashboard/UserProfilePage.jsx
+++ b/src/components/HGNHelpSkillsDashboard/UserProfilePage.jsx
@@ -25,209 +25,36 @@ import {
Tooltip,
} from 'recharts';
import { ENDPOINTS } from '~/utils/URL';
-import styles from './style/UserCard.module.css';
-import pageStyles from './style/UserProfilePage.module.css';
-
-// Sample data for skills
-const mockSkillsData = {
- Frontend: [
- {
- id: 'fe1',
- name: 'UX/UI Design',
- score: 8,
- question: 'How comfortable are you with UX/UI Design principles and implementation?',
- },
- {
- id: 'fe2',
- name: 'Bootstrap',
- score: 4,
- question: 'Rate your proficiency with the Bootstrap framework',
- },
- {
- id: 'fe3',
- name: 'Advanced React',
- score: 10,
- question:
- 'How would you rate your expertise with advanced React concepts like hooks, context API, and optimizations?',
- },
- {
- id: 'fe4',
- name: 'Overall Frontend',
- score: 3,
- question: 'Rate your overall frontend development skills',
- },
- {
- id: 'fe5',
- name: 'Web Sockets',
- score: 1,
- question: 'How comfortable are you integrating web sockets in frontend applications?',
- },
- {
- id: 'fe6',
- name: 'HTML Semantics',
- score: 2,
- question: 'Rate your knowledge of semantic HTML structure and accessibility',
- },
- {
- id: 'fe7',
- name: 'CSS Advanced',
- score: 9,
- question:
- 'How would you rate your expertise with CSS preprocessing, animations, and layouts?',
- },
- {
- id: 'fe8',
- name: 'Redux',
- score: 7,
- question: 'Rate your proficiency with Redux state management and middleware',
- },
- {
- id: 'fe9',
- name: 'Responsive UI',
- score: 6,
- question:
- 'How proficient are you with implementing responsive design across different devices?',
- },
- {
- id: 'fe10',
- name: 'Figma',
- score: 5,
- question: 'Rate your proficiency with Figma for UI/UX design',
- },
- ],
- Backend: [
- {
- id: 'be1',
- name: 'Backend',
- score: 6,
- question: 'Rate your overall backend development skills',
- },
- {
- id: 'be2',
- name: 'TDD Backend',
- score: 5,
- question: 'How comfortable are you with Test-Driven Development for backend?',
- },
- {
- id: 'be3',
- name: 'Database',
- score: 8,
- question: 'Rate your knowledge of database design and management',
- },
- {
- id: 'be4',
- name: 'MongoDB',
- score: 7,
- question: 'How would you rate your expertise with MongoDB?',
- },
- {
- id: 'be5',
- name: 'Mock MongoDB',
- score: 4,
- question: 'Rate your proficiency with mocking MongoDB for testing',
- },
- {
- id: 'be6',
- name: 'MERN Stack',
- score: 9,
- question: 'How comfortable are you working with the complete MERN stack?',
- },
- ],
- DevOps: [
- {
- id: 'devops1',
- name: 'Deployment',
- score: 5,
- question: 'How comfortable are you with deploying applications to production?',
- },
- {
- id: 'devops2',
- name: 'Version Control',
- score: 8,
- question: 'Rate your proficiency with version control systems like Git',
- },
- {
- id: 'devops3',
- name: 'Env Setup',
- score: 3,
- question: 'How would you rate your expertise with setting up development environments?',
- },
- {
- id: 'devops4',
- name: 'Testing',
- score: 7,
- question: 'Rate your knowledge of different testing methodologies',
- },
- ],
- SWPractices: [
- {
- id: 'sp1',
- name: 'Agile',
- score: 7,
- question: 'How comfortable are you working in an Agile environment?',
- },
- {
- id: 'sp2',
- name: 'Code Review',
- score: 9,
- question: 'Rate your proficiency with conducting thorough code reviews',
- },
- {
- id: 'sp3',
- name: 'Advanced Coding',
- score: 6,
- question: 'How would you rate your expertise with advanced coding practices?',
- },
- {
- id: 'sp4',
- name: 'Documentation',
- score: 8,
- question: 'Rate your skill with creating clear and comprehensive documentation',
- },
- {
- id: 'sp5',
- name: 'Markdown & Graphs',
- score: 5,
- question: 'How comfortable are you with markdown and creating graphs/charts?',
- },
- {
- id: 'sp6',
- name: 'Leadership Skills',
- score: 7,
- question: 'Rate your leadership skills within a development team',
- },
- ],
-};
+import styles from './style/UserProfile.module.css';
+// Custom tooltip for RadarChart
function CustomTooltip({ active, payload }) {
if (active && payload && payload.length) {
+ const data = payload[0].payload;
return (
-
- {name}
-
+ {name}
{email && (
Top Skills:
-
- {Array.isArray(topSkills) ? topSkills.join(', ') : topSkills || ''}
-
+ {topSkills.join(', ')}
-
{payload[0].payload.name}
-+
+
);
}
return null;
}
+// Single skill card
function SkillItem({ item }) {
return (
- {data.name}
+Score:{' '} - - {payload[0].value} + + {data.value}
-{payload[0].payload.question}
+{data.question}
-
+
+
{item.question}
@@ -235,17 +62,17 @@ function SkillItem({ item }) {
);
}
-// Separate Skills Tabbed Section component
+// Skills tabbed section
function SkillsTabbedSection({ skillsData }) {
const [activeTab, setActiveTab] = useState('Dashboard');
+
const allSkills = [
- ...skillsData.Frontend,
- ...skillsData.Backend,
- ...skillsData.DevOps,
- ...skillsData.SWPractices,
+ ...(skillsData.Frontend || []),
+ ...(skillsData.Backend || []),
+ ...(skillsData.DevOps || []),
+ ...(skillsData.SWPractices || []),
];
- // Format all skills for the radar chart
const radarData = allSkills.map(skill => ({
name: skill.name,
value: skill.score,
@@ -256,40 +83,24 @@ function SkillsTabbedSection({ skillsData }) {
if (activeTab !== tab) setActiveTab(tab);
};
- const renderScoreItems = items => {
- return (
-
- {items.map(item => (
-
- );
- };
-
- const renderRadarChart = () => {
- return (
-
-
-
-
- );
- };
+ const renderScoreItems = items => (
+
+ {items.map(item => (
+
+ );
return (
-
-
- {/* Tabs */}
-
{item.score}
- {item.name}
+ {item.name}