Merge pull request #4010 from OneCommunityGlobal/Neeraj_Job_Posting_Most_Popular_Graph_Frontend

Neeraj Created a horizontal bar graph comparing the competitiveness of each role

Author: one-community

src/components/Reports/JobAnalytics/JobAnalyticsCompetitiveRolesPage.jsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useMemo } from "react";
+import axios from "axios";
+import { useSelector } from "react-redux";
+import { ENDPOINTS } from "../../../utils/URL";
+import JobAnalyticsFilters from "./JobAnalyticsFilters";
+import JobAnalyticsGraph from "./JobAnalyticsGraph";
+import styles from "./JobAnalyticsPage.module.css";
+
+const JobAnalyticsCompetitiveRolesPage = () => {
+  const darkMode = useSelector((state) => state.theme.darkMode);
+
+  const [filters, setFilters] = useState({
+    dateMode: "All",
+    startDate: "",
+    endDate: "",
+    roles: "All",
+    granularity: "totals",
+  });
+
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const requestUrl = useMemo(() => {
+    const start = filters.dateMode === "Custom" ? filters.startDate : "";
+    const end = filters.dateMode === "Custom" ? filters.endDate : "";
+    const gran =
+      filters.dateMode === "Custom" && filters.granularity !== "totals"
+        ? filters.granularity
+        : undefined;
+
+    return ENDPOINTS.JOB_ANALYTICS_QUERY(start, end, filters.roles, gran);
+  }, [filters]);
+
+  useEffect(() => {
+    let alive = true;
+
+    (async () => {
+      setLoading(true);
+      try {
+        const resp = await axios.get(requestUrl);
+        if (alive) {
+          setData(Array.isArray(resp.data) ? resp.data : []);
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("Error fetching job analytics:", e);
+        if (alive) setData([]);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [requestUrl]);
+
+  return (
+    <div
+      className={`${styles.jobAnalyticsPage} ${
+        darkMode ? styles.dark : styles.light
+      }`}
+    >
+      <div className={styles.jobAnalyticsFilters}>
+        <JobAnalyticsFilters filters={filters} setFilters={setFilters} />
+      </div>
+
+      {loading ? (
+        <p>Loading…</p>
+      ) : (
+        <JobAnalyticsGraph data={data} darkMode={darkMode} />
+      )}
+    </div>
+  );
+};
+
+export default JobAnalyticsCompetitiveRolesPage;

src/components/Reports/JobAnalytics/JobAnalyticsFilters.jsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import { ENDPOINTS } from "../../../utils/URL";
+import styles from "./JobAnalyticsPage.module.css";
+
+const GRANULARITY_OPTS = [
+  { value: "totals", label: "Totals" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "annually", label: "Annually" },
+];
+
+function FilterField({ label, children }) {
+  return (
+    <label className={styles.filterLabel}>
+      <span>{label}</span>
+      {children}
+    </label>
+  );
+}
+
+FilterField.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function JobAnalyticsFilters({ filters, setFilters }) {
+  const [roleOptions, setRoleOptions] = useState(["All"]);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+
+    async function loadRoles() {
+      setLoadingRoles(true);
+      try {
+        const resp = await axios.get(ENDPOINTS.JOB_ANALYTICS_ROLES);
+        const roles = Array.isArray(resp.data) ? resp.data : [];
+
+        const sorted = [
+          "All",
+          ...Array.from(new Set(roles)).sort((a, b) =>
+            a.localeCompare(b)
+          ),
+        ];
+
+        if (alive) {
+          setRoleOptions(sorted);
+          if (!sorted.includes(filters.roles)) {
+            setFilters((prev) => ({ ...prev, roles: "All" }));
+          }
+        }
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error("Failed to load roles:", err);
+        if (alive) setRoleOptions(["All"]);
+      } finally {
+        if (alive) setLoadingRoles(false);
+      }
+    }
+
+    loadRoles();
+    return () => {
+      alive = false;
+    };
+  }, [filters.roles, setFilters]);
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+
+    if (name === "dateMode") {
+      if (value === "All") {
+        setFilters((prev) => ({
+          ...prev,
+          dateMode: "All",
+          startDate: "",
+          endDate: "",
+          granularity: "totals",
+        }));
+        return;
+      }
+      setFilters((prev) => ({ ...prev, dateMode: "Custom" }));
+      return;
+    }
+
+    if (name === "granularity" && filters.dateMode === "All") {
+      setFilters((prev) => ({ ...prev, granularity: "totals" }));
+      return;
+    }
+
+    setFilters((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const nonTotalsDisabled = filters.dateMode !== "Custom";
+
+  return (
+    <div className={styles.jobAnalyticsFilters}>
+      <FilterField label="Dates">
+        <select
+          name="dateMode"
+          value={filters.dateMode}
+          onChange={onChange}
+          className={styles.filterInput}
+        >
+          <option value="All">All</option>
+          <option value="Custom">Custom</option>
+        </select>
+      </FilterField>
+
+      {filters.dateMode === "Custom" && (
+        <>
+          <FilterField label="Start Date">
+            <input
+              type="date"
+              name="startDate"
+              value={filters.startDate}
+              onChange={onChange}
+              className={styles.filterInput}
+            />
+          </FilterField>
+
+          <FilterField label="End Date">
+            <input
+              type="date"
+              name="endDate"
+              value={filters.endDate}
+              onChange={onChange}
+              className={styles.filterInput}
+            />
+          </FilterField>
+        </>
+      )}
+
+      <FilterField label="Role">
+        <select
+          name="roles"
+          value={filters.roles}
+          onChange={onChange}
+          disabled={loadingRoles}
+          className={styles.filterInput}
+        >
+          {roleOptions.map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </FilterField>
+
+      <FilterField label="Granularity">
+        <select
+          name="granularity"
+          value={filters.granularity}
+          onChange={onChange}
+          className={styles.filterInput}
+        >
+          {GRANULARITY_OPTS.map((opt) => (
+            <option
+              key={opt.value}
+              value={opt.value}
+              disabled={opt.value !== "totals" && nonTotalsDisabled}
+            >
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </FilterField>
+    </div>
+  );
+}
+
+JobAnalyticsFilters.propTypes = {
+  filters: PropTypes.shape({
+    dateMode: PropTypes.string.isRequired,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+    roles: PropTypes.string,
+    granularity: PropTypes.string,
+  }).isRequired,
+  setFilters: PropTypes.func.isRequired,
+};
+
+export default JobAnalyticsFilters;

src/components/Reports/JobAnalytics/JobAnalyticsGraph.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import styles from "./JobAnalyticsPage.module.css";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export default function JobAnalyticsGraph({ data, darkMode }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return <p>No data available</p>;
+  }
+
+  const chartData = {
+    labels: data.map((d) => d.role),
+    datasets: [
+      {
+        label: "Applications",
+        data: data.map((d) => d.applications ?? d.count ?? 0),
+        backgroundColor: darkMode ? "#3A506B" : "rgba(54, 162, 235, 0.7)",
+      },
+    ],
+  };
+
+  const chartOptions = {
+    indexAxis: "y",
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false },
+      title: {
+        display: true,
+        text: "Most Competitive Roles",
+        color: darkMode ? "#E0E0E0" : "#111111",
+        font: { size: 18, weight: "bold" },
+      },
+      datalabels: {
+        color: darkMode ? "#E0E0E0" : "#111111",
+        anchor: "end",
+        align: "left",
+        offset: -5,
+        formatter: (value) => value.toLocaleString(),
+        font: { weight: "bold" },
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "Number of Applications",
+          color: darkMode ? "#E0E0E0" : "#111111",
+          font: { weight: "bold", size: 14 },
+        },
+        ticks: {
+          color: darkMode ? "#E0E0E0" : "#111111",
+        },
+        grid: { color: darkMode ? "#333" : "#ddd" },
+      },
+      y: {
+        title: {
+          display: true,
+          text: "Role",
+          color: darkMode ? "#E0E0E0" : "#111111",
+          font: { weight: "bold", size: 14 },
+        },
+        ticks: {
+          color: darkMode ? "#E0E0E0" : "#111111",
+        },
+        grid: { color: darkMode ? "#333" : "#ddd" },
+      },
+    },
+  };
+
+  return (
+    <div className={styles.graphContainer}>
+      <Bar data={chartData} options={chartOptions} plugins={[ChartDataLabels]} />
+    </div>
+  );
+}
+
+JobAnalyticsGraph.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      role: PropTypes.string.isRequired,
+      applications: PropTypes.number,
+      count: PropTypes.number,
+    })
+  ),
+  darkMode: PropTypes.bool,
+};
+
+JobAnalyticsGraph.defaultProps = {
+  data: [],
+  darkMode: false,
+};