Veda Charitha - Job Specific Template Changes

src/components/Collaboration/Collaboration.jsx

@@ -1,5 +1,6 @@
 // src/pages/Collaboration/Collaboration.jsx
 import { useEffect, useState, useMemo, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
 import styles from './Collaboration.module.css';
 import { toast } from 'react-toastify';
 import { ApiEndpoint } from '~/utils/URL';
@@ -26,12 +27,10 @@
   const categoryRef = useRef(null);
   const positionRef = useRef(null);
 
-  // Modal
-  const [selectedJob, setSelectedJob] = useState(null);
-
+  const history = useHistory();
   const darkMode = useSelector(state => state.theme.darkMode);
 
   const slugify = s =>
     (s || '')
       .toLowerCase()
       .replace(/&/g, 'and')
@@ -64,18 +63,6 @@
     }
   };
 
-  /* ================= FETCH CATEGORIES ================= */
-  const fetchPositions = async () => {
-    try {
-      const res = await fetch(`${ApiEndpoint}/jobs/positions`);
-      const data = await res.json();
-
-      setPositions((data.positions || []).sort((a, b) => a.localeCompare(b)));
-    } catch {
-      toast.error('Error fetching positions');
-    }
-  };
-
   /* ================= EFFECTS ================= */
   useEffect(() => {
     fetchCategories();
@@ -119,11 +106,8 @@
   }, [filteredJobs, currentPage]);
 
   useEffect(() => {
-    if (!selectedJob) return;
-    const esc = e => e.key === 'Escape' && setSelectedJob(null);
-    window.addEventListener('keydown', esc);
-    return () => window.removeEventListener('keydown', esc);
-  }, [selectedJob]);
+    // no-op placeholder; keep hook list stable if needed in future
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = event => {
@@ -168,6 +152,22 @@
     }
   };
 
+  const handleJobClick = ad => {
+    const title = ad.title || '';
+    const search = title ? `?jobTitle=${encodeURIComponent(title)}` : '';
+    history.push({
+      pathname: '/job-application',
+      search,
+      state: {
+        jobId: ad._id,
+        jobTitle: title,
+        jobDescription: ad.description || '',
+        requirements: ad.requirements || [],
+        category: ad.category || 'General',
+      },
+    });
+  };
+
   /* ================= SUMMARIES VIEW ================= */
   if (summaries) {
     return (
@@ -338,7 +338,7 @@
               key={ad._id}
               type="button"
               className={styles.jobAd}
-              onClick={() => setSelectedJob(ad)}
+              onClick={() => handleJobClick(ad)}
             >
               <img
                 src={
@@ -367,42 +367,6 @@
           ))}
         </div>
       </div>
-
-      {/* MODAL */}
-      {selectedJob && (
-        <div className={styles.modalOverlay} aria-hidden="true">
-          <div className={styles.modal}>
-            <button
-              type="button"
-              className={styles.closeButton}
-              aria-label="Close role details"
-              onClick={() => setSelectedJob(null)}
-            >
-              ×
-            </button>
-
-            <h2>{selectedJob.title}</h2>
-            <p>
-              <strong>Category:</strong> {selectedJob.category}
-            </p>
-            <p>{selectedJob.description}</p>
-
-            <div className={styles.modalActions}>
-              <a
-                className="btn btn-secondary"
-                href={`https://www.onecommunityglobal.org/collaboration/seeking-${slugify(
-                  selectedJob.category,
-                )}`}
-              >
-                View Full Details
-              </a>
-              <button className="btn btn-primary" disabled>
-                Apply Now
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

src/components/Collaboration/Collaboration.module.css

@@ -4,15 +4,18 @@
 
 .jobLanding {
   width: 100%;
-  min-height: 100%;
+  min-height: 100vh;
+  padding: 32px 0 48px;
 }
 
 .userCollaborationContainer {
-  width: 90%;
+  width: 92%;
+  max-width: 1200px;
   margin: 0 auto;
   background-color: #fff;
-  border-radius: 10px;
-  padding-bottom: 24px;
+  border-radius: 12px;
+  padding: 24px 24px 32px;
+  box-shadow: 0 8px 20px rgb(15 23 42 / 8%);
 }
 
 /* ================= DARK MODE VARIABLES ================= */
@@ -226,9 +229,9 @@
 
 .jobList {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
-  padding: 20px;
+  padding: 24px 20px 8px;
 }
 
 .jobAd {