- {comments.map(comment => (
-
-
-
+
+
+ {comments.map((comment, index) => (
+
+
+
{comment.name[0]}
-
+
{comment.comment}
-
+
{comment.name} -
{comment.time}
diff --git a/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css b/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css
new file mode 100644
index 0000000000..a31272b58d
--- /dev/null
+++ b/src/components/CommunityPortal/Activities/activityId/CommentSection/CommentSection.module.css
@@ -0,0 +1,86 @@
+.activityCommentFooter {
+ font-size: 12px;
+ color: gray;
+ margin-top: 5px;
+ transition: color 0.3s ease;
+}
+
+.activityComment {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ transition: background-color 0.3s ease;
+}
+
+.activityCommentsSection {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ transition: all 0.3s ease;
+}
+
+.activityCommentUser {
+ display: flex;
+ gap: 5px;
+}
+
+.activityCommentText {
+ flex: 1;
+ background-color: #f4f4f4;
+ padding: 10px;
+ border-radius: 6px;
+ transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.activityIcon {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ color: #fff;
+ text-align: center;
+ line-height: 30px;
+ font-weight: bold;
+ transition: transform 0.2s ease;
+}
+
+.activityIcon:hover {
+ transform: scale(1.1);
+}
+
+.purple {
+ background-color: purple;
+}
+
+.blue {
+ background-color: #3366ff;
+}
+
+@media (max-width: 800px) {
+ .activityComment {
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .activityCommentsSection {
+ gap: 10px;
+ padding: 15px;
+ }
+}
+
+.darkMode .activityCommentFooter {
+ color: #aaa;
+}
+
+.darkMode .activityComment {
+ background-color: transparent;
+}
+
+.darkMode .activityCommentsSection {
+ background-color: transparent;
+}
+
+.darkMode .activityCommentText {
+ background-color: #3a506b;
+ color: #ffffff;
+}
diff --git a/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx b/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx
new file mode 100644
index 0000000000..cad408e059
--- /dev/null
+++ b/src/components/CommunityPortal/Activities/activityId/FeedBackSection/Feedback.jsx
@@ -0,0 +1,405 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import styles from './Feedback.module.css';
+import { FaSearch } from 'react-icons/fa';
+import { MdArrowUpward, MdArrowDownward } from 'react-icons/md';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import FeedbackModal from './FeedbackModal';
+
+const nowISO = () => new Date().toISOString();
+
+function Feedback({
+ reviewsEnabled = true,
+ suggestionsOnly = false,
+ isHost = false,
+ eventCreatedAt = null,
+ showModal = false,
+ setShowModal = null,
+ feedbackList,
+ setFeedbackList,
+}) {
+ // local list (in real app you'd fetch)
+ const [searchTerm, setSearchTerm] = useState('');
+ const [filterBy, setFilterBy] = useState('date');
+ const [sortOrder, setSortOrder] = useState('desc');
+ const [visibilityFilter, setVisibilityFilter] = useState('all');
+ const [showSuggestionsOnly, setShowSuggestionsOnly] = useState(false);
+
+ // modal form state (participant)
+ const [modalOpen, setModalOpen] = useState(showModal);
+ const [modalRating, setModalRating] = useState(0);
+ const [modalComment, setModalComment] = useState('');
+ const [modalSuggestionText, setModalSuggestionText] = useState('');
+ const [modalPrivate, setModalPrivate] = useState(false);
+ const [visibleCount, setVisibleCount] = useState(2);
+
+ // reflect incoming modal prop
+ useEffect(() => {
+ if (typeof showModal === 'boolean') setModalOpen(showModal);
+ }, [showModal]);
+
+ useEffect(() => {
+ // If parent gave setShowModal, keep synchronized
+ if (setShowModal) {
+ setShowModal(modalOpen);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [modalOpen]);
+
+ useEffect(() => {
+ // Placeholder for API call to fetch feedback data
+ // For now we use dummyFeedback above.
+ }, []);
+
+ // dark mode for styling
+ const darkMode = useSelector(state => state.theme?.darkMode);
+
+ // helper: determine if event was created within one month
+ const eventWithinFirstMonth = useMemo(() => {
+ if (!eventCreatedAt) return false;
+ const created = new Date(eventCreatedAt);
+ const oneMonthLater = new Date(created);
+ oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
+ return new Date() <= oneMonthLater;
+ }, [eventCreatedAt]);
+
+ const handleSearch = e => setSearchTerm(e.target.value);
+ const handleFilterChange = e => setFilterBy(e.target.value);
+ const handleSortChange = () => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+
+ const renderStars = feedback =>
+ Array.from({ length: 5 }, (_, i) => (
+
+ {i < (feedback.rating || 0) ?
+
+ {isHost && (
+ <>
+ {
+ setModalOpen(false);
+ if (setShowModal) setShowModal(false);
+ }}
+ onSubmit={handleSubmitFeedback}
+ show={modalOpen}
+ importantLabel={
+ eventWithinFirstMonth
+ ? 'Your feedback is only visible to the host for the first month.'
+ : null
+ }
+ disableSubmit={
+ (!suggestionsOnly && !modalComment && !modalRating) ||
+ (suggestionsOnly && !modalSuggestionText) ||
+ (!reviewsEnabled && !suggestionsOnly)
+ }
+ >
+ {suggestionsOnly ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showSuggestionsOnly ? (
+
+ {suggestionList.length === 0 ? (
+
+ ) : (
+ No suggestions yet.
+ ) : (
+ suggestionList.map(s => (
+
+ ![User]()
+
+ ))
+ )}
+
+
+
+ {s.name}
+ {s.date}
+
+ {s.comment}
+
+ {filteredFeedback.length === 0 ? (
+
+ )}
+ {visibleCount < feedbackList.length && (
+ No feedback matches your filters.
+ ) : (
+ filteredFeedback.slice(0, visibleCount).map(feedback => (
+
+ ![User]()
+
+ ))
+ )}
+
+
+
+ {feedback.name}
+ {feedback.date}
+ {/* Visibility badge */}
+
+ {feedback.visibility === 'host-only'
+ ? 'Private'
+ : feedback.visibility === 'suggestion'
+ ? 'Suggestion'
+ : 'Public'}
+
+
+
+ {/* rating */}
+ {feedback.rating !== null && (
+ {renderStars(feedback)}
+ )}
+
+ {feedback.comment}
+
+
+
+ )}
+
+ )}
+
+ {/* Participant view / modal */}
+ {!isHost && (
+ <>
+ {/* Notice if reviews disabled */}
+ {!reviewsEnabled && !suggestionsOnly && (
+
+ Reviews are currently disabled for this event.
+
+ )}
+
+ {/* Button to open modal if parent didn't provide one */}
+ {!modalOpen && (reviewsEnabled || suggestionsOnly) && (
+
+
+
+ )}
+
+ {/* Modal-like simple panel (replace with your modal component if you have one) */}
+ {modalOpen && (
+
+
+