Akshith - Job Listings Page : Add Empty State Messaging for No Results

src/components/Collaboration/Collaboration.jsx

@@ -333,23 +333,33 @@ function Collaboration() {
 
         {/* JOB GRID */}
         <div className={styles.jobList}>
-          {jobAds.map(ad => (
-            <button
-              key={ad._id}
-              type="button"
-              className={styles.jobAd}
-              onClick={() => setSelectedJob(ad)}
-            >
-              <img
-                src={
-                  ad.imageUrl ||
-                  `/api/placeholder/640/480?text=${encodeURIComponent(ad.category || 'Job')}`
-                }
-                alt={ad.title}
-              />
-              <h3>{ad.title}</h3>
-            </button>
-          ))}
+          {jobAds.length > 0 ? (
+            jobAds.map(ad => (
+              <button
+                key={ad._id}
+                type="button"
+                className={styles.jobAd}
+                onClick={() => setSelectedJob(ad)}
+              >
+                <img
+                  src={
+                    ad.imageUrl ||
+                    `/api/placeholder/640/480?text=${encodeURIComponent(ad.category || 'Job')}`
+                  }
+                  alt={ad.title}
+                />
+                <h3>{ad.title}</h3>
+              </button>
+            ))
+          ) : (
+            <div className={styles.emptyState}>
+              <p>No job listings found matching your criteria.</p>
+              <p>Try clearing filters or adjusting your search terms.</p>
+              <button className="btn btn-secondary" onClick={handleClearAllFilters}>
+                Clear All Filters
+              </button>
+            </div>
+          )}
         </div>
 
         {/* PAGINATION */}

src/components/Collaboration/Collaboration.module.css

@@ -85,6 +85,33 @@
   gap: 8px;
 }
 
+.emptyState {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+  color: #666; 
+  min-height: 250px;
+  border-radius: 12px;
+  background: transparent;
+}
+
+.emptyState.dark {
+  color: #ccc; /* Dark mode text color */
+}
+
+.emptyState p {
+  margin: 0.5rem 0;
+  font-size: 1rem;
+}
+
+.emptyState button {
+  margin-top: 1rem;
+}
+
 /* Buttons FIRST to avoid specificity issues */
 .dropdownWrapper button {
   padding: 8px 12px;