Merge pull request #5011 from OneCommunityGlobal/aseem-application-jobposting-avghours

Aseem-Application/Job Posting Avg Weekly hours UI changes

Author: one-community

.husky/pre-commit

@@ -1,10 +1,14 @@
 #!/bin/sh
 # Load nvm if available
+# Try to load nvm (non-blocking)
 export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-# Use Node 20 if available (or install if needed)
-if [ -f .nvmrc ]; then
-  nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
+
+if [ -s "$NVM_DIR/nvm.sh" ]; then
+  . "$NVM_DIR/nvm.sh"
+  nvm use >/dev/null 2>&1
+  echo "Using Node via nvm"
+else
+  echo "nvm not available, using system Node"
 fi
 
 echo ""

src/components/JobAnalytics/HoursPledgedChart/HoursPledgedChart.jsx

@@ -81,10 +81,10 @@ function HoursPledgedChart() {
 
     const processedData = Object.values(roleMap).map(roleData => ({
       role: roleData.role,
-      avgHours: roleData.totalHours / roleData.count,
+      avgHours: (roleData.totalHours / roleData.count).toFixed(2),
     }));
 
-    processedData.sort((a, b) => b.avgHours - a.avgHours);
+    processedData.sort((a, b) => Number(b.avgHours) - Number(a.avgHours));
     setChartData(processedData);
   }, [rawData, startDate, endDate, selectedRoles]);
 
@@ -124,9 +124,48 @@ function HoursPledgedChart() {
             onChange={setSelectedRoles}
             placeholder="Select Roles"
             styles={{
+              control: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#1c2541' : base.backgroundColor,
+              }),
+              menu: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#1c2541' : base.backgroundColor,
+              }),
+              option: (base, state) => ({
+                ...base,
+                backgroundColor: darkMode
+                  ? state.isFocused
+                    ? '#47526dff'
+                    : '#1c2541'
+                  : base.backgroundColor,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
               placeholder: base => ({
                 ...base,
-                color: 'black',
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+              input: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+              multiValue: base => ({
+                ...base,
+                backgroundColor: darkMode ? '#47526d' : base.backgroundColor,
+              }),
+
+              multiValueLabel: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+              }),
+
+              multiValueRemove: base => ({
+                ...base,
+                color: darkMode ? '#ffffff' : base.color,
+                ':hover': {
+                  backgroundColor: darkMode ? '#5a6a85' : base[':hover']?.backgroundColor,
+                  color: '#ffffff',
+                },
               }),
             }}
           />
@@ -147,24 +186,35 @@ function HoursPledgedChart() {
             height={400}
             data={chartData}
             layout="vertical"
-            margin={{ top: 20, right: 30, left: 100, bottom: 20 }}
+            margin={{ top: 20, right: 80, left: 100, bottom: 60 }}
           >
             <CartesianGrid strokeDasharray="3 3" />
-            <XAxis type="number" dataKey="avgHours">
-              <Label value="Average Hours Pledged" position="insideBottom" offset={-10} />
+            <XAxis type="number" dataKey="avgHours" width={120} tickMargin={15}>
+              <Label value="Average Hours Pledged" position="insideBottom" offset={-20} dy={10} />
             </XAxis>
-            <YAxis type="category" dataKey="role">
+            <YAxis type="category" dataKey="role" width={120} tickMargin={15}>
               <Label
                 value="Name of Role"
                 angle={-90}
                 position="outsideCenter"
                 offset={-20}
-                dx={-50}
+                dx={-70}
               />
             </YAxis>
-            <Tooltip />
-            <Bar dataKey="avgHours" fill={darkMode ? '#225163' : '#8884d8'}>
-              <LabelList dataKey="avgHours" position="right" />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: darkMode ? '#1c2541' : '#ffffff',
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+              labelStyle={{
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+              itemStyle={{
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+            />
+            <Bar dataKey="avgHours" fill={darkMode ? '#9ca5f6ff' : '#8884d8'}>
+              <LabelList dataKey="avgHours" position="right" formatter={v => v} />
             </Bar>
           </BarChart>
         )}

src/components/JobAnalytics/HoursPledgedChart/HoursPledgedChart.module.css

@@ -1,8 +1,8 @@
 .hoursPledgedChart {
   font-family: Arial, sans-serif;
   padding: 20px;
-  background-color: #ffffff;
-  color: #000000;
+  background-color: #fff;
+  color: #000;
   min-height: 100vh;
   transition: background-color 0.3s, color 0.3s;
 }
@@ -23,18 +23,18 @@
   box-shadow: 2px 2px 4px 1px black;
 }
 
+.hpChartContainer {
+  display: flex;
+  justify-content: center;
+}
+
 .darkMode .hpChartContainer {
   background-color: #1c2541;
   color: #f1f1f1;
   box-shadow: 2px 2px 4px 1px black;
   border: none;
 }
 
-.hpChartContainer {
-  display: flex;
-  justify-content: center;
-}
-
 .hpDateFilter,
 .hpRoleFilter {
   display: flex;
@@ -49,13 +49,21 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 100%;
+
+}
+
+.darkMode .hpDateFilter input {
+  background-color: #1c2541;
+  color: #fff;
+  border: 1px solid #47526d;
 }
 
 label {
   font-weight: bold;
   margin-bottom: 5px;
 }
 
+
 .darkMode label {
   color: #f1f1f1 !important;
 }