Merge origin/development into veda-review-volume-over-time-chart

Made-with: Cursor

Author: Test

.eslintignore.bak

@@ -0,0 +1,18 @@
+# Dependencies
+node_modules
+
+# Build output
+build
+dist
+*.min.js
+
+# Vendor / third-party (tinymce copied to public by postinstall)
+public/tinymce
+
+# Scripts not part of app source
+postinstall.js
+refactor-css-classes.js
+
+# Coverage and test artifacts
+coverage
+*.test.js.snap

.github/workflows/deploy.yml

@@ -62,4 +62,4 @@ jobs:
           domain: ${{ vars.SURGE_DOMAIN }}
           project: './build'
           login: ${{ secrets.SURGE_LOGIN }}
-          token: ${{ secrets.SURGE_TOKEN }}
+          token: ${{ secrets.SURGE_TOKEN }}

.github/workflows/pull_request_test.yml

@@ -55,4 +55,4 @@ jobs:
     - name: Run Unit Tests for Changed Files Only
       run: yarn run test:changed
     - name: Run Lint
-      run: yarn run lint
+      run: yarn run lint

.gitignore

@@ -33,4 +33,5 @@ yarn-error.log*
 
 **\ **
 
-/public/tinymce/
+/public/tinymce/
+package-lock.json

.husky/pre-commit

@@ -7,8 +7,6 @@ if [ -f .nvmrc ]; then
   nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
 fi
 
-. "$(dirname "$0")/_/husky.sh"
-
 echo ""
 echo "🛡️  Husky pre-commit hook triggered"
 

package.json

@@ -55,7 +55,7 @@
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.13",
     "diff": "^8.0.3",
-    "dompurify": "^3.2.5",
+    "dompurify": "^3.3.2",
     "elliptic": "^6.6.1",
     "font-awesome": "^4.7.0",
     "fs-extra": "^11.3.0",
@@ -129,7 +129,9 @@
   },
   "resolutions": {
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "mdn-data": "2.12.2",
+    "ansi-escapes": "7.1.1"
   },
   "packageManager": "yarn@1.22.22",
   "scripts": {

src/actions/kiCalendarAction.js

@@ -0,0 +1,23 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { ENDPOINTS } from '~/utils/URL';
+import axios from 'axios';
+
+export const kiCalendarApi = createApi({
+  reducerPath: "kiCalendarApi",
+  baseQuery: fetchBaseQuery({
+    prepareHeaders: (headers) => {
+      const token = axios.defaults.headers.common.Authorization;
+      if (token) headers.set("Authorization", token);
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getKICalendarEvents: builder.query({
+      query: ({ month, year }) =>
+        ENDPOINTS.KI_CALENDAR_EVENTS(month, year), 
+        // `kitchenandinventory/calendar?month=${month}&year=${year}`,
+    }),
+  }),
+});
+
+export const { useGetKICalendarEventsQuery } = kiCalendarApi;

src/components/ApplicantVolunteerRatio/ApplicantVolunteerRatio.jsx

@@ -9,77 +9,61 @@ import 'react-datepicker/dist/react-datepicker.css';
 
 function ApplicantVolunteerRatio() {
   const darkMode = useSelector(state => state.theme.darkMode);
+
   const [data, setData] = useState([]);
-  const [allRoles, setAllRoles] = useState([]); // Store all available roles
+  const [allRoles, setAllRoles] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [selectedRoles, setSelectedRoles] = useState([]);
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
   const [validationError, setValidationError] = useState('');
+  const [viewMode, setViewMode] = useState('count');
 
-  // Fetch all available roles (without filtering)
+  // Fetch all available roles
   useEffect(() => {
     const fetchAllRoles = async () => {
       try {
         const response = await getAllApplicantVolunteerRatios({});
-        const apiData = response.data;
-
-        // Get all unique roles
+        const apiData = response?.data ?? [];
         const uniqueRoles = [...new Set(apiData.map(item => item.role))];
         const roleOptions = uniqueRoles.map(role => ({ label: role, value: role }));
-
         setAllRoles(roleOptions);
-
-        // Set all roles as selected by default
         setSelectedRoles(roleOptions);
       } catch (err) {
-        // Error fetching all roles
         setError('Failed to load roles. Please try again.');
       }
     };
-
     fetchAllRoles();
   }, []);
 
-  // Fetch filtered data based on selected roles and date range
+  // Fetch filtered data
   useEffect(() => {
     const fetchFilteredData = async () => {
-      // Validate date range: start must be before or equal to end
       if (startDate && endDate && startDate > endDate) {
         setValidationError('Start date must be earlier than or equal to End date.');
         setData([]);
         setLoading(false);
         return;
       }
 
-      // clear previous validation error when dates are valid
       if (validationError) setValidationError('');
 
       if (selectedRoles.length === 0) {
         setData([]);
         return;
       }
-
       try {
         setLoading(true);
-
-        // Prepare filters
         const filters = {};
-        if (startDate) {
-          filters.startDate = startDate.toISOString().split('T')[0]; // Format as YYYY-MM-DD
-        }
-        if (endDate) {
-          filters.endDate = endDate.toISOString().split('T')[0]; // Format as YYYY-MM-DD
-        }
+        if (startDate) filters.startDate = startDate.toISOString().split('T')[0];
+        if (endDate) filters.endDate = endDate.toISOString().split('T')[0];
         if (selectedRoles.length > 0) {
           filters.roles = selectedRoles.map(role => role.value).join(',');
         }
 
         const response = await getAllApplicantVolunteerRatios(filters);
-        const apiData = response.data;
-
-        // Transform API data to match chart format
+        const apiData = response?.data ?? [];
         const transformedData = apiData.map(item => ({
           role: item.role,
           applicants: item.totalApplicants,
@@ -88,23 +72,34 @@ function ApplicantVolunteerRatio() {
 
         setData(transformedData);
       } catch (err) {
-        // Error fetching applicant volunteer ratio data
         setError('Failed to load data. Please try again.');
       } finally {
         setLoading(false);
       }
     };
-
     fetchFilteredData();
-  }, [startDate, endDate, selectedRoles]); // Re-fetch when date range or selected roles change
+  }, [startDate, endDate, selectedRoles]);
 
-  // Filter and transform data for chart
-  const chartData = useMemo(
-    () => data.filter(d => selectedRoles.map(r => r.value).includes(d.role)),
-    [data, selectedRoles],
-  );
+  // Prepare chart data
+  const chartData = useMemo(() => {
+    const filtered = data.filter(d => selectedRoles.map(r => r.value).includes(d.role));
+
+    if (viewMode === 'percentage') {
+      return filtered.map(item => {
+        const percentage =
+          item.applicants > 0 ? Number(((item.hired / item.applicants) * 100).toFixed(1)) : 0;
+
+        return {
+          ...item,
+          hiredPercentage: percentage,
+        };
+      });
+    }
 
-  // Apply dark mode to document body
+    return filtered;
+  }, [data, selectedRoles, viewMode]);
+
+  // Apply dark mode
   useEffect(() => {
     if (darkMode) {
       document.body.classList.add('dark-mode-body');
@@ -138,10 +133,12 @@ function ApplicantVolunteerRatio() {
   return (
     <div className={`${styles.page} ${darkMode ? styles.dark : ''}`}>
       <h2 className={styles.heading}>Number of People Hired vs. Total Applications</h2>
+
+      {/* Filters */}
       <div className={styles.filters}>
         <div className={styles.filterGroup}>
           <label htmlFor="start-date" className={styles.label}>
-            Date Range:{' '}
+            Date Range:
           </label>
           <div className={styles.dateInputWrapper}>
             <DatePicker
@@ -173,9 +170,10 @@ function ApplicantVolunteerRatio() {
             </div>
           )}
         </div>
+
         <div className={styles.filterGroupInline}>
           <label htmlFor="role-select" className={styles.label}>
-            Role:{' '}
+            Role:
           </label>
           <Select
             id="role-select"
@@ -189,39 +187,119 @@ function ApplicantVolunteerRatio() {
           />
         </div>
       </div>
+
+      {/* Toggle Buttons */}
+      <div style={{ marginBottom: '12px', display: 'flex', gap: '8px' }}>
+        <button
+          type="button"
+          onClick={() => setViewMode('count')}
+          style={{
+            padding: '6px 12px',
+            cursor: 'pointer',
+            backgroundColor: viewMode === 'count' ? '#1976d2' : '#e0e0e0',
+            color: viewMode === 'count' ? '#fff' : '#000',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Count View
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setViewMode('percentage')}
+          style={{
+            padding: '6px 12px',
+            cursor: 'pointer',
+            backgroundColor: viewMode === 'percentage' ? '#1976d2' : '#e0e0e0',
+            color: viewMode === 'percentage' ? '#fff' : '#000',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Percentage View
+        </button>
+      </div>
+
       {chartData.length > 0 ? (
         <div className={styles.chartContainer}>
-          <ResponsiveContainer width="100%" height={400}>
+          <ResponsiveContainer width="100%" height={350}>
             <BarChart
               data={chartData}
               layout="vertical"
               margin={{ top: 20, right: 40, left: 80, bottom: 20 }}
               barCategoryGap={24}
+              barSize={16}
             >
               <XAxis
                 type="number"
-                label={{
-                  value: 'Percentage of People Hired vs. Total Applications',
-                  position: 'insideBottom',
-                  offset: -5,
-                }}
-                allowDecimals={false}
+                domain={viewMode === 'percentage' ? [0, 100] : ['auto', 'auto']}
+                allowDecimals={viewMode === 'percentage'}
               />
+
               <YAxis
                 dataKey="role"
                 type="category"
                 width={180}
-                label={{ value: 'Name of Role', angle: -90, position: 'insideLeft' }}
+                label={{ value: 'Role', angle: -90, position: 'insideLeft' }}
               />
+
               <Tooltip />
-              <Bar dataKey="applicants" fill="#1976d2" name="Total Applicants">
-                <LabelList dataKey="applicants" position="right" />
-              </Bar>
-              <Bar dataKey="hired" fill="#43a047" name="Total Hired">
-                <LabelList dataKey="hired" position="right" />
-              </Bar>
+
+              {viewMode === 'count' ? (
+                <>
+                  <Bar dataKey="applicants" fill="#1976d2">
+                    <LabelList dataKey="applicants" position="right" />
+                  </Bar>
+
+                  <Bar dataKey="hired" fill="#43a047">
+                    <LabelList dataKey="hired" position="right" />
+                  </Bar>
+                </>
+              ) : (
+                <Bar dataKey="hiredPercentage" fill="#43a047">
+                  <LabelList
+                    dataKey="hiredPercentage"
+                    position="right"
+                    formatter={value => `${value}%`}
+                  />
+                </Bar>
+              )}
             </BarChart>
           </ResponsiveContainer>
+
+          {/* Manual Legend */}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '16px',
+              marginTop: '12px',
+              fontWeight: 500,
+            }}
+          >
+            {viewMode === 'count' ? (
+              <>
+                <span style={{ color: '#1976d2' }}>■ Total Applications</span>
+                <span style={{ color: '#43a047' }}>■ People Hired</span>
+              </>
+            ) : (
+              <span style={{ color: '#43a047' }}>■ People Hired (%)</span>
+            )}
+          </div>
+
+          {/* Axis Title */}
+          <div
+            style={{
+              textAlign: 'center',
+              marginTop: '10px',
+              fontWeight: 500,
+            }}
+          >
+            {viewMode === 'percentage'
+              ? 'Percentage of People Hired (%)'
+              : 'Number of Applications / Hires'}
+          </div>
         </div>
       ) : (
         <div className={styles.noData}>