Harshavarma: fix - Job Posting Analytics Graph Issues

src/components/Reports/HitsAndApplicationRatio/ConvertedApplicationGraph.jsx

@@ -28,7 +28,7 @@
         style={{ fontSize: '0.875rem' }}
       >
         <p><strong>Role:</strong> {job.title}</p>
-        <p><strong>Conversion Rate:</strong> {usePercentage ? `${job.conversionRate}%` : job.conversionRate}</p>
+        <p><strong>Conversion Rate (Applications ÷ Hits):</strong> {usePercentage ? `${job.conversionRate}%` : job.conversionRate}</p>
         <p><strong>Hits:</strong> {job.hits}</p>
         <p><strong>Applications:</strong> {job.applications}</p>
       </div>
@@ -37,15 +37,38 @@
   return null;
 };
 
-function ConvertedApplicationGraph({ data = [], usePercentage, isDark }) {
+function ConvertedApplicationGraph({ data = [], usePercentage, isDark, dateRange }) {
   const sortedData = useMemo(() => {
+    const map = new Map();
+
+    data.forEach((item) => {
+      const title = item.title;
+
+      if (!map.has(title)) {
+        map.set(title, { ...item });
+      } else {
+        const existing = map.get(title);
+
+        const hits = (existing.hits || 0) + (item.hits || 0);
+        const applications =
+          (existing.applications || 0) + (item.applications || 0);
+
+        map.set(title, {
+          ...existing,
+          hits,
+          applications,
+          conversionRate: hits ? Number((applications / hits) * 100).toFixed(2) : 0,
+        });
+      }
+    });
+
+    const uniqueRoles = Array.from(map.values());
+
     const key = usePercentage ? 'conversionRate' : 'applications';
-    const toNum = (v) => Number(v) || 0;
 
-    const cloned = [...data];
-    cloned.sort((a, b) => toNum(b[key]) - toNum(a[key]));
+    uniqueRoles.sort((a, b) => (b[key] || 0) - (a[key] || 0));
 
-    return cloned.slice(0, 10);
+    return uniqueRoles.slice(0, 10);
   }, [data, usePercentage]);
 
   return (
@@ -54,15 +77,17 @@
         isDark ? 'bg-space-cadet text-light boxStyleDark' : 'bg-white text-gray-900 boxStyle'
       }`}
     >
-      <h2 className={`text-lg font-semibold mb-2 ${isDark ? 'text-azure' : ''}`}>
-        Top 10 Job Postings by {usePercentage ? 'Conversion Rate' : 'Applications'}
-      </h2>
+      <div className="mb-4">
+        <h2 className={`text-lg font-semibold mb-2 ${isDark ? 'text-azure' : ''}`}>
+          Top 10 Job Postings by {usePercentage ? 'Conversion Rate' : 'Applications'} ({dateRange})
+        </h2>
+      </div>
 
       {sortedData.length === 0 ? (
         <p>No data available for the selected date range.</p>
       ) : (
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart layout="vertical" data={sortedData} margin={{ top: 20, right: 90, bottom: 40, left: 180 }}>
+          <BarChart layout="vertical" data={sortedData} margin={{ top: 20, right: 90, bottom: 40, left: 20 }}>
             <XAxis
               type="number"
               domain={usePercentage ? [0, 100] : ['auto', 'auto']}
@@ -91,7 +116,12 @@
               />
             </YAxis>
 
-            <Tooltip content={<CustomTooltip isDark={isDark} usePercentage={usePercentage} />} />
+            <Tooltip
+              wrapperStyle={{
+                backgroundColor: isDark ? '#374151' : '#ffffff',
+                border: 'none'
+              }}
+              content={<CustomTooltip isDark={isDark} usePercentage={usePercentage} />} />
 
             <Bar dataKey={usePercentage ? 'conversionRate' : 'applications'} fill="#4CAF50">
               <LabelList

src/components/Reports/HitsAndApplicationRatio/JobAnalyticsPage.jsx

@@ -93,12 +93,16 @@ function JobAnalyticsPage() {
                 onChange={(e) => setDateRange(e.target.value)}
                 className={`rounded px-2 py-1 ${
                   isDark
-                    ? 'bg-space-cadet text-light border border-yinmn-blue'
+                    ? 'bg-space-cadet text-gray-900 border border-yinmn-blue'
                     : 'bg-white text-gray-900 border border-gray-300'
                 }`}
               >
                 {dateOptions.map((option) => (
-                  <option key={option} value={option}>
+                  <option
+                    key={option}
+                    value={option}
+                    style={isDark ? { backgroundColor: '#1a1a2e', color: '#e0e0e0' } : {}}
+                  >
                     {option}
                   </option>
                 ))}
@@ -138,12 +142,16 @@ function JobAnalyticsPage() {
                 data={convertedData}
                 usePercentage={usePercentage}
                 isDark={isDark}
+                dateRange={dateRange}
               />
 
+              <div className={`my-8 border-t ${isDark ? 'border-yinmn-blue' : 'border-gray-200'}`} />
+
               <NonConvertedApplicationsGraph
                 data={nonConvertedData}
                 usePercentage={usePercentage}
                 isDark={isDark}
+                dateRange={dateRange}
               />
             </>
           )}

src/components/Reports/HitsAndApplicationRatio/NonConvertedApplicationsGraph.jsx

@@ -35,7 +35,7 @@
         style={{ fontSize: '0.875rem' }}
       >
         <p><strong>Role:</strong> {job.title}</p>
-        <p><strong>Conversion Rate:</strong> {fmtPct(job.conversionRate)}</p>
+        <p><strong>Conversion Rate (Applications ÷ Hits):</strong> {fmtPct(job.conversionRate)}</p>
         <p><strong>Hits:</strong> {fmtInt(job.hits)}</p>
         <p><strong>Applications:</strong> {fmtInt(job.applications)}</p>
       </div>
@@ -44,17 +44,42 @@
   return null;
 };
 
-function NonConvertedApplicationsGraph({ data = [], usePercentage, isDark }) {
-  const normalized = useMemo(
-    () =>
-      data.map((d) => ({
-        ...d,
-        hits: toNum(d.hits),
-        applications: toNum(d.applications),
-        conversionRate: toNum(d.conversionRate),
-      })),
-    [data]
-  );
+function NonConvertedApplicationsGraph({ data = [], usePercentage, isDark, dateRange }) {
+  const normalized = useMemo(() => {
+    const map = new Map();
+
+    data.forEach((item) => {
+      const title = item.title;
+
+      const hits = toNum(item.hits);
+      const applications = toNum(item.applications);
+
+      if (!map.has(title)) {
+        map.set(title, {
+          ...item,
+          hits,
+          applications,
+          conversionRate: hits ? Number((applications / hits) * 100).toFixed(2) : 0,
+        });
+      } else {
+        const existing = map.get(title);
+
+        const totalHits = existing.hits + hits;
+        const totalApplications = existing.applications + applications;
+
+        map.set(title, {
+          ...existing,
+          hits: totalHits,
+          applications: totalApplications,
+          conversionRate: totalHits
+            ? (totalApplications / totalHits) * 100
+            : 0,
+        });
+      }
+    });
+
+    return Array.from(map.values());
+  }, [data]);
 
   const metricKey = usePercentage ? 'conversionRate' : 'applications';
 
@@ -83,11 +108,14 @@
         isDark ? 'bg-space-cadet text-light boxStyleDark' : 'bg-white text-gray-900 boxStyle'
       }`}
     >
-      <h2 className={`text-lg font-semibold mb-2 ${isDark ? 'text-azure' : ''}`}>
-        {usePercentage
-          ? 'Top 10 Job Postings with Lowest Conversion Rate'
-          : 'Top 10 Job Postings with Lowest Applications'}
-      </h2>
+
+      <div className="mb-4">
+        <h2 className={`text-lg font-semibold mb-2 ${isDark ? 'text-azure' : ''}`}>
+          Top 10 Job Postings with Lowest {usePercentage
+            ? 'Conversion Rate'
+            : 'Applications'} ({dateRange})
+        </h2>
+      </div>
 
       {rows.length === 0 ? (
         <p>No data available for the selected date range.</p>
@@ -96,7 +124,7 @@
           <BarChart
             layout="vertical"
             data={rows}
-            margin={{ top: 20, right: 90, bottom: 40, left: 180 }}
+            margin={{ top: 20, right: 90, bottom: 40, left: 20 }}
           >
             <XAxis
               type="number"
@@ -131,7 +159,12 @@
               />
             </YAxis>
 
-            <Tooltip content={<CustomTooltip usePercentage={usePercentage} isDark={isDark} />} />
+            <Tooltip
+              wrapperStyle={{
+                backgroundColor: isDark ? '#374151' : '#ffffff',
+                border: 'none'
+              }}
+              content={<CustomTooltip usePercentage={usePercentage} isDark={isDark} />} />
 
             <Bar dataKey={metricKey} fill="#F44336" minPointSize={3}>
               <LabelList