Siva - Fix feedback search

src/App.css

@@ -0,0 +1,282 @@
+html {
+  overflow-x: hidden;
+}
+
+body {
+  display: grid;
+  grid-template-columns: auto 0px;
+}
+button {
+  border: none;
+  background-color: transparent;
+}
+#root {
+  height: 100%;
+  overflow-x: auto;
+  overflow: hidden;
+  /* background-color: var(--background-color); */
+  background-color: #ffffff;
+}
+
+.App {
+  text-align: center;
+}
+
+/* .close{
+  visibility: hidden
+} */
+
+.newProfilePic {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  padding-top: 7px;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.infringement {
+  color: blue;
+}
+
+.profilepic {
+  height: 180px;
+  width: 180px;
+}
+
+.accordion-toggle:after {
+  font-family: 'FontAwesome';
+  content: '\f054';
+  float: right;
+}
+
+.accordion-toggle.collapsed:after {
+  /* symbol for down chevron*/
+  content: '\f078';
+}
+
+.dashboardbutton {
+  background-color: black;
+  border: black;
+}
+
+.hgn-leaderboard {
+  /*background-color:#FFCCBC */
+  background-color: black;
+}
+
+.bg-super {
+  background-color: #0000cd !important;
+  /* medium blue #0000CD*/
+}
+
+.bg-awesome {
+  background-color: #990099 !important;
+  /*  violet */
+}
+
+.bg-super-awesome {
+  background-color: #660099 !important;
+  /*  purple */
+}
+
+.bg-orange {
+  background-color: #ffa500 !important;
+  /*  brighter orange */
+}
+
+.bg--dark-sea-green {
+  background-color: #c9d6c6;
+}
+
+.bg-bright-red {
+  background-color: #ff3300 !important;
+  /*  bright-red */
+}
+
+.bg-almost-red {
+  background-color: #cc3366 !important;
+  /*  90%to100%-red */
+}
+
+.bg-oxford-blue {
+  background-color: #1b2a41 !important;
+}
+
+/* .bg-oxford-blue:hover{
+  background-color: #1B2A41 !important;
+  color:black;
+} */
+
+.bg-space-cadet {
+  background-color: #1c2541 !important;
+}
+
+/* .bg-space-cadet:hover{
+  background-color: #1C2541 !important;
+  color:black;
+} */
+
+.bg-yinmn-blue {
+  background-color: #3a506b !important;
+}
+
+/* .bg-yinmn-blue:hover{
+  background-color: #3A506B !important;
+  color: black;
+} */
+
+.bg-yinmn-blue-light {
+  background-color: #2f4157;
+}
+
+/* .bg-yinmn-blue-light:hover{
+  background-color:#2f4157;
+  color: black;
+} */
+
+.bg-darkmode-liblack {
+  background-color: #1c1c1c !important;
+}
+
+.bg-darkmode-black {
+  background-color: #000000 !important;
+}
+
+.bg-azure {
+  background-color: #007bff !important;
+}
+
+.text-oxford-blue {
+  color: #1b2a41 !important;
+}
+
+.text-space-cadet {
+  color: #1c2541 !important;
+}
+
+.text-yinmn-blue {
+  color: #3a506b !important;
+}
+
+.text-azure {
+  color: #007bff !important;
+}
+
+.text-dark-green {
+  color: #193d31 !important;
+}
+
+.text-custom-grey {
+  color: rgb(192, 192, 192) !important;
+}
+
+.box-shadow-dark {
+  box-shadow: 2px 2px 4px 1px black !important;
+}
+
+.box-shadow-light {
+  box-shadow: 2px 2px 4px 1px lightgray;
+}
+
+.dark-text-muted {
+  color: #b5bac5 !important;
+}
+
+.dark-text-info {
+  color: #6af1ea !important
+}
+
+.summary-text-light p{
+  color: #fff !important;
+}
+
+nav ul.navbar-nav li:last-child > div {
+  transform: translate3d(-26px, 40px, 0px) !important;
+}
+
+.calendar-icon-dark {
+  color-scheme: dark;
+}
+
+.top {
+  text-decoration: none;
+  padding: 10px;
+  margin: 10px;
+  --offset: 100px;
+  margin-top: calc(100vh + var(--offset));
+  font-family: sans-serif;
+  color: #fff;
+  background: #000;
+  border-radius: 100px;
+  place-self: end;
+  position: sticky;
+  right: -30px;
+  bottom: 10px;
+  white-space: nowrap;
+}
+
+tr {
+  content-visibility: auto;
+}
+
+.custom-checkbox *:hover {
+  cursor: pointer;
+}
+
+input[type='radio']:hover {
+  cursor: pointer;
+}
+
+input[type='checkbox']:not([disabled]):hover {
+  cursor: pointer;
+}
+
+.tox .tox-toolbar__group {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  gap: 4px !important;
+}
+
+.tox .tox-tbtn {
+  min-width: auto !important;
+  padding: 4px 6px !important;
+  font-size: 14px !important;
+}
+
+.tox-tbtn {
+  padding: 2px 4px !important;
+}
+
+.tox .tox-toolbar {
+  flex-wrap: wrap !important;
+  justify-content: flex-start !important;
+}
+
+.tox .tox-split-button {
+  display: flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.tox .tox-split-button__chevron {
+  display: inline-block !important;
+  min-width: auto !important;
+  width: auto !important;
+  margin-left: -1px !important;
+  padding: 4px !important;
+}
+
+.pdrl-1 {
+  padding: 0 1em !important;
+}
+.user-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+  padding: 20px;
+}

src/components/App.jsx

@@ -14,6 +14,8 @@ import { initMessagingSocket } from '../utils/messagingSocket';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ThemeManager from './common/ThemeManager';
 
+// TODO: Fix undefined search parameters in Feedback page - Phase 1: Analysis & Planning
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/components/CommunityPortal/Activities/activityId/ActivityComments.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import styles from './ActivityComments.module.css';
 
 // Utility function to calculate relative time
@@ -244,6 +245,8 @@ const mockFeedbacks = [
 ];
 
 function ActivityComments() {
+  const darkMode = useSelector(state => state.theme?.darkMode || false);
+
   // Utility function to restore Date objects from localStorage
   const restoreDates = items => {
     return items.map(item => ({
@@ -632,20 +635,44 @@ function ActivityComments() {
     );
   };
 
+  /**
+   * Filter and sort feedbacks based on search, filter, and sort criteria
+   *
+   * Search Parameters:
+   * - Reviewer name (feedback.name): Searches in the reviewer's name
+   * - Feedback text (feedback.text): Searches in the feedback comment/description
+   *
+   * The search uses case-insensitive partial matching (contains) for both fields.
+   */
   const filteredFeedbacks = feedbacks
     .filter(feedback => {
-      const matchesSearch =
-        feedback.text.toLowerCase().includes(feedbackSearch.toLowerCase()) ||
-        feedback.name.toLowerCase().includes(feedbackSearch.toLowerCase());
+      // Search logic: check if search term matches reviewer name or feedback text
+      const searchTerm = feedbackSearch.trim().toLowerCase();
+      let matchesSearch = true;
+
+      if (searchTerm) {
+        const reviewerName = (feedback.name || '').toLowerCase();
+        const feedbackText = (feedback.text || '').toLowerCase();
+
+        // Explicit search matching: check both fields with OR logic
+        matchesSearch = reviewerName.includes(searchTerm) || feedbackText.includes(searchTerm);
+      }
+
+      // Rating filter logic
       const matchesFilter =
         feedbackFilter === 'All' || feedback.rating.toString() === feedbackFilter;
+
       return matchesSearch && matchesFilter;
     })
     .sort((a, b) => {
-      if (feedbackSort === 'Oldest') return new Date(a.timestamp) - new Date(b.timestamp);
+      // Sort by creation date with null safety
+      const dateA = a.createdAt ? new Date(a.createdAt) : new Date(0);
+      const dateB = b.createdAt ? new Date(b.createdAt) : new Date(0);
+
+      if (feedbackSort === 'Oldest') return dateA - dateB;
       if (feedbackSort === 'Highest Rated') return b.rating - a.rating;
       if (feedbackSort === 'Lowest Rated') return a.rating - b.rating;
-      return new Date(b.timestamp) - new Date(a.timestamp); // Newest
+      return dateB - dateA; // Newest (default)
     });
 
   return (
@@ -1117,16 +1144,18 @@ function ActivityComments() {
               >
                 <input
                   type="text"
-                  placeholder="Search feedback..."
+                  placeholder="Search by reviewer name or feedback text..."
                   value={feedbackSearch}
                   onChange={e => setFeedbackSearch(e.target.value)}
                   style={{
                     flex: 1,
                     minWidth: '200px',
                     padding: '8px 12px',
-                    border: '1px solid #ddd',
+                    border: darkMode ? '1px solid #4a5a77' : '1px solid #ddd',
                     borderRadius: '6px',
                     fontSize: '0.9rem',
+                    backgroundColor: darkMode ? '#3a506b' : '#fff',
+                    color: darkMode ? '#ffffff' : '#222',
                   }}
                 />
                 <select